html教程7.pptVIP

第7章 CSS规则 设计者总希望能够在页面中自由发挥创意，实现自己的想法。然而，HTML语言的很多标签都存在很大局限性，如h1标签定义的标题，始终是较大字体的文本，无法改变。所以在没有CSS以前，设计者不得不借助大量其他标签来补充某些标签的局限性。 从本章开始，读者要尽量忘记原来标签的定式。CSS样式表如同一种上乘的武学，类似于一种无招胜有招的境界。 事实上，CSS就是一个无所不能的、巨大的“属性集”。 现在，人们仍然习惯于使用h1标签定义标题，但h1标签表现出来的样式却并非一成不变了。使用CSS后，设计者可以令h1标签内的文本变成任何他们想要的样子。 本章的主要知识点有： CSS样式表的写法规则 选择器及其写法 选择器的多种样式及作用 CSS样式表的3种方式：行内CSS、嵌入式CSS和外联式CSS 使用CSS样式表编辑页面 7.1 如何学习CSS CSS常被翻译为“级联样式表”。如果读者不明白“级联”的意思，不妨从Cascading 一词的本意来理解。 Cascading的意思是“小瀑布，瀑布状的”，读者不妨就把CSS形象地理解为“瀑布一样的样式表”。 一个CSS看上去是这样的： body { font-family: 黑体; //字体样式 font-size: 80%; //字体大小 color: black; //字体颜色 background-color:blue; //背景颜色 margin: 1em; //在页面中的定位 padding: 0; //设置空距为0 } 大括号中是一排属性值的描述。其实，CSS并不神秘。页面中用属性标签来修饰页面内容，而CSS本身就是一个“属性集”，只不过这个属性可以由设计者自行定义，可以无限扩展。 7.2 CSS基本的规则写法 CSS已经出现很多年了，但是直到近两年，CSS才能够被所有网页浏览器支持。 今天，CSS已经形成了自己的一套语法。一个基本的样式表由选择器、属性和属性值构成。 7.2.1 基本的样式表的写法 CSS样式表有属于自己的写法规则。一个标准的CSS写法如下： h1 { font-family:黑体; } 这里，“h1”表示选择符；“font-family”是属性，这里表示的是定义字体；“黑体”是属性值，这里表示定义的字体为黑体字。语句“font-family:黑体;”将属性和属性值结合在一起，称之为声明语句。 声明语句可以有很多句，所有的声明语句都要放在“{}”内。声明语句的结尾是分号“;” CSS样式表的引用需要放在style标签中声明。 7.2.2 使用类class和标志id链接样式表 一个定义好的样式表，需要通过类class和标志id来定位它所作用的页面内容。id标志在同页面中可以实现链接（参见第6章），作用相当于在页面中定位一个锚点。id在链接CSS属性表时，所起到的作用也是一样的，而类似这样作用的还有类class。类class和标志id之间是有区别的，如代码7-2类选择器和标志选择器的对比。 【本节示例参考：资料光盘\第7章\7-2 类选择器和标志选择器.html】。 7.2.3 创建选择器 选择器指定了样式将被应用于页面中的哪些内容，主要有3种选择器：HTML选择器（HTML selector）、id选择器（id selector）和class选择器（class selector）。 1．HTML选择器 2．派生选择器 3．id选择器 4．class选择器 5．分组选择器 6．伪类和伪类选择器 7.2.4 应用CSS样式表 首先需分清这样一个概念，应用CSS样式表到HTML页面中，和将CSS样式表绑定到HTML页面中的对象，这两者是不同的两个概念。如7.2.3节中 ，通过不同的选择器将样式表绑定到HTML页面中的对象。但是，使用的都是同一种方法应用CSS样式表到HTML页面中。这种方式称之为嵌入样式表，而这种应用CSS的方法亦有4种，剩下的3种方法分别是内联样式、外联式样式表和多重样式表。 1．嵌入样式表 2．内联样式 3．外联样式表 4．多重样式表 7.3 用CSS来修饰页面文本 本书在前面的章节中介绍了文本的排版，并没有花浓重的墨彩去描绘如何展现文本的形式，而当理解了CSS的使用后，这里将为设计者打开一扇广阔的设计天空，令文本可以变化出奇妙的样式。 7.3.1 修饰页面文本字体 不要忽视字体的作用，字体的设置能潜移默化的给浏览用户带来很大的视觉影响。CSS中，使用font-family属性来定义字体的样式。说到字体，中国文化中的字体一向渊源博大，至少也可以