IW 会把大多数的视觉属性转换为 CSS; 我们主动使用 CSS 要分两步:


第一步:


{通过窗体的 StyleSheet 属性指定要链接的 CSS 文件}
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
StyleSheet.Filename := 'MyCss1.css'; //CSS 文件须放在 wwwroot 下
// StyleSheet.URL := 'http://...'; //外链
end; {假如站点级的 CSS ... TIWServerController.OnCreate}
procedure TIWServerController.IWServerControllerBaseCreate(Sender: TObject);
begin
StyleSheet.Filename := 'MyCss1.css'; //CSS 文件须放在 wwwroot 下
// StyleSheet.URL := 'http://...'; //外链
end;

第二步:


{为要使用样式的控件指定 Css 属性}
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
StyleSheet.Filename := 'MyCss1.css';
IWMemo1.Css := 'Class1'; //假如 MyCss1.css 中有个 Class1 的类, 如: .Class {font-size: 32px; } IWMemo1.StyleRenderOptions.RenderFont := False; //一般情况下, 还需要同时调整下 StyleRenderOptions 属性
end; {------------------------------------------------------------------
关于 StyleRenderOptions 属性: 如果我们给控件使用了 CSS, 就有可能和控件本身的属性发生冲突, 用哪一个呢? 这需要控件的 StyleRenderOptions 属性来决定! 它也是个类(IWTypes.TIWStyleRenderOptions

CSS 的诸多操作类似与 JavaScript, 譬如:

procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
IWServerController.HTMLHeaders('<link type="text/css" rel="stylesheet" href="MyCss1.css"/>');
Self.PreHeader.Add('<link type="text/css" rel="stylesheet" href="MyCss2.css"/>');
Self.ExtraHeader.Add('<link type="text/css" rel="stylesheet" href="MyCss3.css"/>'); IWServerController.ContentFiles.Add('MyCss4.css');
Self.ContentFiles.Add('MyCss5.css');
end;

有没有可能直接在代码中写入 CSS 呢?


{使用 ExtraTagParams 属性}
IWLabel1.ExtraTagParams.Add('style = color: #f00; font-size:22px;'); {使用 OnHTMLTag 事件, 需要 uses IWHTMLTag}
procedure TIWForm1.IWLabel1HTMLTag(ASender: TObject; ATag: TIWHTMLTag);
begin
ATag.AddStringParam('style', 'color: #f00; font-size:22px;');
end;

使用 IntraWeb (10) - CSS的更多相关文章

  1. HTML+CSS学习笔记 (10) - CSS格式化排版

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  2. 8.10 CSS知识点3

    7.属性选择符 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素 E[att="val"] CSS2 选择具有att属性值等于val的E元素 E[att~=& ...

  3. CSS基础学习-10.CSS伸缩盒(老版本)

  4. css 10 款非常棒的CSS代码格式化工具推荐

    http://www.iteye.com/news/23692/  10 款非常棒的CSS代码格式化工具推荐 2011-12-14 09:31 by 副主编 wangguo 评论(0) 有9111人浏 ...

  5. 10 款非常棒的CSS代码格式化工具推荐

    如果你刚开始学习CSS,这意味着你的很多代码或结构可能需要优化,比如你可能过多使用了类.添加了多余的间隔或空行等等,这将导致代码臃肿.混乱,可读性和执行效率将大大降低. 本文为你整理了几款CSS工具, ...

  6. 10个HTML和CSS必须知道的重点难点问题

    前端日刊 登录 10个HTML和CSS必须知道的重点难点问题 2018-02-26 阅读 2982 收藏 6 原链:segmentfault.com 分享到:   前端必备图书<深入浅出Node ...

  7. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  8. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  9. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

随机推荐

  1. 读asyncio模块源码时的知识补漏

    硬着头皮看了一周的asyncio模块代码,了解了大概的执行流程,引用太多,成尤其是对象间函数的引用. 光是这么一段简单的代码: # coding: utf8 import asyncio import ...

  2. RabbitMq简单应用

    服务端: <?php //配置信息 $conn_args = array( 'host' => '127.0.0.1', 'port' => '5672', 'login' => ...

  3. CF 1131B Draw!

    Draw! Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u   Descriptio ...

  4. PyQT5 No module named ‘PyQt5.QtWebEngineWidgets’

    PyQT5查找不到模块QtWebEngineWidgets pip install pyqt5==5.10.1 或 安装64位的Pyhon解释器

  5. 一主多从+Binlog Server,主库故障无法访问,如何在从库中选举一个新主库

    一.基本环境 VMware10.0+CentOS6.9+MySQL5.7.19 ROLE HOSTNAME BASEDIR DATADIR IP PORT M ZST1 /usr/local/mysq ...

  6. Gson学习记录

    Gson是Google开发来用来序列化和反序列化json格式数据的java库,他最大的特点就是对复杂类型的支持度高,可以完美解决java泛型问题,这得益于他对泛型类型数据的特殊处理,他的缺点就是速度慢 ...

  7. Linux umount的device is busy问题

    现象: [root@dbserver ~]# df -h文件系统 容量 已用 可用 已用%% 挂载点/dev/vda1 9.9G 3.9G 5.6G 41% /tmpfs 3.9G 100K 3.9G ...

  8. vs2017 Remote Debugger远程调试目录

    默认目录:C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\Remote Debugger

  9. interface关键字定义接口

    package interface0; public interface InterfaceTest { /* * 接口的定义,使用interface关键字定义接口 */ public interfa ...

  10. HttpUrlConnection的setDoOutput与setDoInput的区别

    httpUrlConnection.setDoOutput(true) httpUrlConnection.setDoInput(true) 这两个方法在develope的httpUrlConnect ...