CSS语言详解——读书笔记

CSS语言详解——读书笔记

1、css概述

　　css是cascading style sheets的简写，中文翻译为层叠样式表。css是一种高级的、弱类型的语言，与html一样是标识语言。

　　css特点：
1）实现网页样式和内容的分离；
2）更好地控制页面布局；
3）制作出体积更小、下载更快的网页；
4）更快、更容易地维护及更新大量的网页；
5）浏览器兼容性更好。

2、css语法和用法

1）基本结构

　　css语法单元是样式，每个样式包含选择符和声明（或称为规则）两部分内容，如

　　body{font-size:14px;margin:0 auto;}

　　body是选择符（Selector），选择符告诉浏览器该样式将作用于页面中哪些对象，这些对象可以是某个标签、所有网页对象、指定class或id值等。

　　font-size:14px;是一个声明（Declaration），声明可以增加一个或无数个，这些声明命令浏览器如何去渲染选择符指定的对象。声明必须包含属性和属性值，并用分号来标识一个声明的结束。所有声明放置在一对花括号（样式分隔符）内，整体紧邻选择符的后面。

　　font-size是属性（Property）名，属性是css提供的设置好的样式选项，属性名可以是一个单词或多个通过连字符相连的单词。

　　14px是属性值（Value），属性值是属性用来显示效果的参数，它包括数值和单位，或者关键字。
css使用“/*注释语句*/”来进行注释。

2）基本用法

　　css样式须放置在特定类型的文件、标签或属性中，通常可以放置在标签的style属性中、把样式放置在单独的文件中，然后使用标签或@import关键字导入的方式称为外部样式，一般网站都采用这种方式，便于统筹设计css样式。

3）css样式表

　　一个或多个css样式组成一个样式表，样式表包括内部样式表和外部样式表。

3、css属性、属性值和单位

1）css属性（详见附件中CSS参考手册）

CSS 常用布局属性分类属性取值说明定位positionstatic（默认值）|absolute|fixed|relative设置对象的定位方式。取值为absolute表示对象脱离文档流动，根据浏览器、具有定位功能的父元素或特殊父元素的左上角为坐标原点来定位；取值为relative表示以文档流动中的当前对象自身位置为坐标原点进行定位；取值为fixed表示不受任何网页影响，根据浏览器的左上角进行定位，定位之后在窗口中的显示位置就被固定，不随滚动条滚动定位z-indexauto|number（数字）设置对象层叠顺序，取值越大，显示越靠上，此属性仅作用于position属性值设置为relative或absolute的元素定位topauto|length（高度）设置对象与其最近一个具有定位属性的上级元素顶边框的距离，该属性仅在定位（position）属性被设置时可用，否则被忽略定位rightauto|length（高度）设置对象与其最近一个具有定位属性的上级元素右边框的距离，该属性仅在定位（position）属性被设置时可用，否则被忽略定位bottomauto|length（高度）设置对象与其最近一个具有定位属性的上级元素底边框的距离，该属性仅在定位（position）属性被设置时可用，否则被忽略定位leftauto|length（高度）设置对象与其最近一个具有定位属性的上级元素左边框的距离，该属性仅在定位（position）属性被设置时可用，否则被忽略尺寸heightauto|length（高度）定义对象的高度尺寸widthauto|length（高度）定义对象的宽度尺寸max-heightauto|length（高度）定义对象的最大高度，ie6及其以下版本浏览器不支持尺寸min-heightauto|length（高度）定义对象的最小高度，ie6及其以下版本浏览器不支持尺寸max-widthauto|length（高度）定义对象的最大宽度，ie6及其以下版本浏览器不支持尺寸min-widthauto|length（高度）定义对象的最小宽度，ie6及其以下版本浏览器不支持布局clearnone|left|right|both设置对象左右不允许有浮动对象，该属性需与float属性配合使用布局floatnone|left|right设置对象是否浮动以及浮动方向。当被定义为浮动时，对象将被视作块状显示，即display属性为block，此时浮动对象的display属性被忽略布局clipauto|rect (number number number number) （裁切区域）设置对象的可视区域，可视区域外的部分是透明的。取值为rect表示依据上-右-下-左的顺序提供自对象左上角为（0, 0）坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。该属性仅在定位属性值设为absolute时才可以使用，目前支持的浏览器不多布局overflowvisible|auto|hidden|scroll（显示滚动条）设置对象内容超过指定高和宽时如何显示内容。所有元素默认为visible，除了textarea元素和body元素的默认值是auto外。设置textarea元素此属性值为hidden，将隐藏其滚动条布局overflow-xvisible|auto|hidden|scroll（显示滚动条）设置对象内容超过指定高时如何显示布局overflow-yvisible|auto|hidden|scroll（显示滚动条）设置对象内容超过指定宽时如何显示布局displayblock|none|inline|list-item设置对象显示类型或方式布局visibilityinherit|visible|hidden设置是否显示对象

2）css属性值及其单位

颜色值：设置颜色值可以选用颜色名、百分比、数字和十六进制数值。

. 使用颜色名：真正被各种浏览器支持，并作为CSS规范推荐的颜色名称只有16种，考虑到浏览器兼容性，不建议在网页中使用颜色名。

. 使用百分比：如白色为color:rgb(100%,100%,100%);，哪个百分值大就偏向哪个原色。

. 使用数值：数值范围从0到255，如白色为color:rgb(255,255,255);，同理哪个数值大哪个原色的比重就会加大。

. 十六进制颜色：最常用的方法，如白色为color:#ffffff;。

绝对单位：在网页中很少使用，其中css有时也用磅（pt）设置字体大小，12磅的字体大小等于六分之一英寸大小。

相对单位：其显示大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置、相关元素的大小等多种因素影响。

. em：表示元素的字体高度，根据字体的font-size属性值来确定单位的大小，一个em等于font-size的属性值。若设置font-size属性的单位为em，则em的值将根据父元素的font-size属性值来确定，若父元素的fontsize属性的单位也为em，则依次向上级元素寻找参考的font-size属性值，若都没定义，则根据浏览器默认字体进行换算，默认字体一般为16px。

. ex：ex单位根据所使用的字体中小写字母x的高度作为参考。实际应用中，浏览器通过em的值除以2得到ex的值。

. px：px单位根据屏幕像素点来确定。

百分比：一般参考父对象中相同属性的值。

url：包括绝对地址和相对地址，参照物不同，相对地址可能不同。

4、基本选择器（符）

1）标签选择符

　　html文档由很多标签通过一定的规则编织而成，可以把这些标签称为网页元素，标签选择符（也称为类型选择符）用来确定要定义样式的网页元素对象。标签选择符不需要重命名，直接引用html特定标签的名称即可，它规定了网页元素在页面中的默认显示样式，即会影响页面中所有同名标签。如：p{font-size:14px;margin-bottom:18px;}

2）类别选择符

　　类（class）选择符可以实现同一个标签在网页的不同位置显示不同的样式。

　　类选择符必须以一个点（.）前缀开头，然后跟随一个自定义的类名，自定义类名只能使用字母、数字、下划线（_）和连字符（-），首字符只能是字母，如：.content{font-size:14px;}。可通过使用class属性在网页对应位置引用类样式。同一个类样式可在多个标签中被引用，同一个标签可以引用多个类样式。
可以为类选择符指定标签范围，从而更准确地控制页面元素的样式，具体做法是在标签的后面紧跟一个类，组成复合选择符，如：p .f14{font-size:14px;}。

3）ID选择符

　　id在web设计中一般指定标签在html文档中的唯一编号，javascript等脚本语言通过id值捕获和控制页面中每一个元素，因此，最好保证其在文档中的唯一性，一般通过id选择符定义html框架结构的布局效果。同一个标签最多只能引用一个id选择符。id的命名规则与class命名规则相同，只是它必须以一个井号（#）前缀开头，如：#column{width:450px;}。可以为id选择符指定标签范围，以提高其优先级，如：div #column{width:450px;height:300px;}。

　　如何确定使用类选择符和id选择符：

. 对于网页结构问题，一般建议使用id选择符来定义；
. 对于重复出现的样式，可考虑使用类选择符来提炼；
. 当id选择符和类选择符的样式发生冲突时，id选择符的样式优先于类选择符定义的样式。

4）通配选择符

　　通配选择符是固定的，用星号（*）表示，如：*{margin:0;padding:0;}，要注意的是，使用通配选择符会影响到页面中所有元素的显示效果。

5、复合选择器（符）

1）子选择符

　　子选择符是指定父元素所包含的子元素的样式，用尖角号（>）表示，如：div>span{font-size:16px;}，这样就可以把包含在div元素内的子元素span的字体大小定义为16px。也可以使用id值或class值来定义子选择符。ie6及其以下版本浏览器不支持子选择符。

2）相邻选择符

　　相邻选择符用来指定一个元素相邻的下一个元素的样式，用加号（+）表示，如：div+span{font-size:16px;}，可以把div元素后面相邻的span元素的字体大小定义为16px。也可借助class值或id值进行控制。ie6及其以下版本浏览器不支持相邻选择符。

3）包含选择符

　　包含选择符通过空格标识符来表示，用来定义被包含选择符的样式，如：div span{font-size:16px;}，可以把包含在div元素里面的span元素的字体大小定义为16px。是比较常用的方法，兼容ie6。

4）多层选择符嵌套

　　嵌套的层级没有明确限制，嵌套的方法利用空格实现，如：div p span{font-size:16px;}。

5）属性选择符

　　属性选择符利用网页标签包含的属性及其属性值来定义特定元素或一定范围元素的样式，一般是一个元素后面紧跟中括号，中括号内是属性或属性表达式，如：div[id="header"]{font-size:16px;}。ie6及其以下版本浏览器对属性选择符不支持。

　　. 匹配属性名选择符，为包含指定属性名的所有该类型标签定义样式，如：div[id]{font-size:16px;}，可以为div元素设置所有id属性的对象定义样式。可以设置所有合法属性，可以同时设置多个属性名，多个匹配属性名之间分别用不同的中括号表示，如：div[id][class]{font-size:16px;}，则只有对同时设置了id和class属性的div元素才定义样式。

　　. 匹配属性值选择符，指定属性值时应确保值被双引号括起来，如：div[id="header"]{font-size:16px;}，也可同时设置多个匹配属性值。

　　. 模糊匹配属性值选择符，类似于正则表达式的匹配模式：

[|=]（连字符匹配）：以连字符为分隔符，匹配属性值中局部字符串；
[~=]（空白符匹配）：以空白符为分隔符，匹配属性值中局部字符串；
[^=]（前缀字符）：匹配属性值中起始字符；
[$=]（后缀匹配）：匹配属性值中结束字符；
[*=]（子字符串匹配）：匹配属性值存在的指定字符。

6）伪选择器

　　伪类和伪元素定义一些无法通过标签、ID或Class以及其他属性精确控制的特殊区域或特殊状态下的样式，如控制鼠标单击过程中超链接显示为不同的状态。
伪类和伪元素以英文冒号（:）为前缀来表示，如：a:hover{color:#ff0000;}，当鼠标经过超链接时，文字将变成红色。a元素也可为body、div、span等元素，但是只要超链接的四种伪类才被ie6及其以下版本浏览器兼容。

7）选择符分组

　　有时有些元素选择符的样式是一样的，可以把它们分为一组，选择符之间用英文逗号（,）分隔，如：h1,h2,h3,h4,h5,h6{font-size:16px;}。

6、css的继承性、层叠性和特殊性

1）继承性

　　在html文档结构中，包含在内部的标签拥有外部标签的某些样式，其典型应用是在body元素中定义整个页面的字体颜色、字体大小等基本页面属性，如：body{font-size:14px;font-color:#000;}，包含在body元素的所有其他元素都将继承该属性，除非元素已专门定义字体大小等属性。

　　有些属性是不能继承的，分类如下：

. 边框属性
. 边界属性（margin系列）
. 补白属性（padding系列）
. 背景属性
. 定位属性
. 布局属性
. 元素宽、高属性

2）层叠性

　　css能够对同一个元素或同一个网页应用多个样式或多个样式表，如可以创建一个样式来定义颜色，另一个样式定义字体大小。当同一属性的不同声明样式作用于同一对象时计算规则：作者定义的样式表最重要，然后是用户的样式表，最后才是浏览器的预定义样式（可使用!important命令来强制提高重要性，使其优先于任何规则），然后根据选择符的特殊性来决定规则的优先顺序，一般是后面的样式优先于前面相同声明的样式。

3）优先级

　　. css样式表优先级：原则上优先级从高到低排列是，作者定义的样式表>用户设置的样式>浏览器默认样式>html默认样式，但css2中，可使用!important命令来强制提高重要性，使其优先于任何规则。

　　. css样式的优先级：优先级从高到低排列是，行内样式>内样式表>外部样式表，可使用!important使某样式拥有最高优先级。

4）特殊性

　　对于常规选择符，它们的优先级加权值如下：

. 标签选择符：优先级加权值为1
. 伪元素或伪对象选择符：优先级加权值为1
. 类选择符：优先级加权值为10
. 属性选择符：优先级加权值为10
. id选择符：优先级加权值为100
. 其他选择符：优先级加权值为0

计算规则：

. 统计选择符中id选择符个数，然后乘以100
. 统计选择符中类选择符个数，然后乘以10
. 统计选择符中标签选择符个数，然后乘以1

依此类推，然后把所有加权值数相加，即可得总加权值，加权值越大，优先级则越高。

另外：

. 被继承的值具有特殊性0
. 内联样式优先
. 就近原则，即排在最后的样式具有最大优先权
. 被定义!important命令的样式有最大优先权（!important需置于属性值与分号之间）

以上，ie6及其以下版本浏览器不支持!important命令。

附件：HTML5 & CSS 相关参考手册