[信息与通信]第6章 CSS样式表设计.ppt

第6章 CSS样式表设计 6.1 CSS基本概念 6.2 引用CSS 6.3 HTML标记选择符 6.4 Class选择符 6.5 id选择符 6.6 上下文选择符 6.7 CSS属性 6.1 CSS基本结构 CSS：Casading Style Sheets，层叠样式表。 作用： HTML文件显示样式定义。把HTML文件的显示的内容和显示样式定义分离。 显示样式定义：包括字体、颜色等等。 样式文件：将样式定义单独保存在文件中，后缀.css。 共享：多个HTML文件可以共享相同的样式文件。 引用：一个HTML文件也可以引用多个CSS样式文件中的样式定义。 6.1 CSS基本概念 编辑CSS文档：文本编辑器。如记事本和写字板。 保存CSS文档： 保存成“.CSS”文件。或者直接写在HTML文档中。 6.1 CSS基本概念 CSS样式表定义的基本语法： 选择符{样式属性名：样式值； 样式属性名：样式值；…} 选择符：引用样式的对象，用逗号隔开 HTML标记：如果有多个标记，用逗号分开 Class选择符，ID选择符或上下文选择符。 {}规则表：一个或多个样式属性和样式值组成，由分号隔开，每个样式定义格式为 样式属性名：样式值 注解：样式定义中可以加入注解，格式为：/*字符串*／ 6.1 CSS基本概念 /*定义h1h2样式*/ h1,h2{font-family: 隶书; color:#ff8800;text-align:center;} /*定义p样式*/ p{font-family:宋体; font-size:9pt; color:blue;background-color:yellow;} 6.2 引用CSS 引用CSS：将样式表应用于HTML文件。有四种方式： 内联样式,直接在标记中定义style属性 嵌入一个样式表 输入一个样式表 连接到一个外部的样式表 6.2 引用CSS 内联样式—直接在标记中定义style属性：STYLE属性可以应用于任意BODY元素(包括BODY本身)。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号隔开。 例1 h1 STYLE= “color:blue;font-size:10pt;font-family:黑体”CSS实例 /h1 例2 P STYLE=color:red;font-family:宋体‘; 注意单引号，因为双引号被用作包含样式声明。 6.2 引用CSS 嵌入一个样式表：使用STYLE在文档中嵌入，STYLE放在文档的HEAD部分。 STYLE TYPE=text/css !-- H1{color:blue;font-size:20pt;font-family:黑体;} -- /STYLE 6.2 引用CSS 输入一个样式表：使用@import声明输入。这个声明用于一个CSS文件或内部的STYLE元素。STYLE TYPE=text/css  !-- @import url(./1.css);-- /STYLE 6.2 引用CSS 链接一个样式表：使用在head中使用link声明链接。这个声明用于一个外部CSS文件。 htmlhead link href=“./l.cssrel=stylesheet”type=text/css /HEADBODY H1 这个标题使用了Style。/H1 H2这个标题没有使用Style。/H2 /body/html 文件1.css如下：不能有style标记 H1{color:blue;font-size:20pt;font-family:黑体;} 6.3 HTML标记选择符 选择符是HTML标记：表示HTML文档中的标记使用指定的样式。如果有多个标记，用逗号分开。 例子1：定义h1h2样式 h1,h2{font-family: 隶书; color:#ff8800;text-align:center;} 显示效果： h1标题/h1和h2标题/h2显示样式为隶书/居中/颜色=#ff8800。 6.3 HTML标记选择符 例子2： 定义p样式 p{font-family:宋体; font-size:9pt; color:blue;background-color:yellow;} 显示效果：p内容/p的显示样式是宋体/大小=9pt/颜色= blue/背景色=Yellow 6.3 HTML标记选择符 属性解释： font-family属性：字体名，比如“宋体”等 font-size属性：字体大小，取值用数字即可 Color属性： 前景色，可以用6位16进制数字，表示rgb三分量。也可以用red，yellow等。 b