6.1 CSS入门
6.1.1 什么是CSS
CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的设置网页格式。
6.1.2 CSS的属性单位
6.1.2.1 长度单位
在CSS中用于描述长度的单位包括:
6.1.2.2 百分比单位
在CSS中除了可以使用绝对数来指定单位(如上面所介绍的),还可以用相对数来指定单位。例如:
P{line-height:150%}
表示该段行高是标准行高的1.5倍。
6.1.2.3 颜色
层叠样式表允许网页设计者使用以下方式中的一种指定颜色:
6.2 CSS样式定义
样式表项的组成如下:
selector{property1:value1;property2:value2;......}
其中selector表示需要应用样式的内容,property表示由CSS标准定义的样式属性,value表示样式属性的值。
Selector 类型:HTML 标记符、用户定义的 class 类样式、自定义的 ID、虚类 等。
6.2.1 HTML标记符selector
HTML标记符是最典型的selector类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。例如:
H1{text-align:center;font-family:楷体_gb2312}
若将相同的样式应用于不同的selector,可以采用编组的方法简化样式定义。例如:
H1 {color:#ff0000}
H2 {color:#ff0000}
H3 {color:#ff0000}
可以简化为:
H1,H2,H3 {color:#ff0000}
6.2.2 具有上下文关系的HTML标记符selector
如果需要为位于某个标记符内的标记符设置特定的样式规则,则应将selector指定为具有上下文关系的HTML标记符。例如:要使位于P标记符内的CODE标记符内的B元素具有红色属性,则应使用如下格式:
P CODE B {color:red}
6.2.3 用户定义的类 selector
可以使用类(class)来为单一HTML标记符创建多个样式。其语法格式如下:
selector.classname{property:value;...}
例如:H1.rr {color:red}
然后在网页中需要处引用,所下所示:
此标题为红色
如果要定义应用于所有标记符的类,可以直接用句点后跟类名即可。其语法格式如下:
.classname{property:value;...}
例如:.rr{color:red} , 然后在网页中需要处引用,所下所示:
本段落文字为红色
|
6.2.4 用户定义ID selector
要将一个ID样式包括在样式定义中,应以一个井号“#”作为ID名称的前缀,其语法格式如下:
#IDname{property:value;...}
定义了ID样式后,在引用该样式的标记符内使用id属性。例如:
#rr {color:red} 本段落文字为红色
|
注意:使用.classname和使用#IDname这两种方式在效果上没有区别,但最好只使用其中之一,以免造成混淆。
6.2.5 虚类 selector
对于A标记符,可以用虚类的方式设置不同类型超链接的显示方式。所谓不同类型超链接,是指访问过的、未访问过的、激活的以及鼠标指针悬停于其上的4种状态的超链接。其虚类的selector如下:
6.3 在网页中使用CSS
6.3.1 在标记符中直接嵌套样式信息
使用style属性可以在HTML标记符中直接嵌入样式定义。
<标记符 style="property1:value1;...">
例如:
仅位于此标记符内的文本受样式的影响 |
6.3.2 在STYLE标记符中定义样式信息
CSS应用于网页的最常用的方式是在HEAD标记符内使用STYLE标记符,然后在STYLE标记符中定义样式。语法格式通常如下:
. . . . . . [] |
6.3.3 链接外部样式表中的样式信息
如果要在多个网页中使用相同的样式,最好的办法是将网页中要使用的样式,单独放在一个文件中定义,然后通过链接的方式引用其中的样式。
链接引用外部样式表的方法为:在HEAD标记符内使用LINK标记符,通过指定相应属性链接到外部样式表。LINK标记符的用法如下:
css" href=样式表文件的URL>
其中:rel属性规定了被链接文件的关系,在链接样式表文件(.css文件)的情况下,取值永远是“stylesheet”;type属性规定了链接文件的MIME类型,它的值永远是“text/css”;href属性指定了要链接的样式表文件的URL。
6.3.4 样式的优先级
如果有多个样式同时修饰一个对象,样式如果冲突,则采用高优先级样式;如果没有冲突,则采用叠加的样式效果。
样式的优先级遵循“就近优先”的原则,也就是说,距离所修饰对象越近的样式,其优先级越高。
6.4 CSS属性
6.4.1 字体与文本属性
6.4.1.1 字体属性
CSS中字体属性包括:
6.4.1.2 文本属性
文本属性用于控制文本段落格式。
6.4.2 颜色与背景属性
6.4.3 布局属性
6.4.3.1 页面元素周围的空白
在任何一个HTML元素的周围,都包括边框、边界和填充这三种空白。最接近元素内容的是填充,接下一来是边框,最外围是边界。CSS的margin、border和background属性分别用于设置以上三个区域。
6.4.3.2 边框属性
CSS边框属性包括:
6.4.3.3 边界属性
CSS边界属性包括margin、margin-bottom、margin-left、margin-right以及margin-top。
6.4.3.4 填充属性
CSS填充属性包括padding、padding-left、padding-right、padding-top以及padding-bottom。
6.4.3.5 浮动属性
CSS浮动属性包括:
6.4.4 定位和显示属性
6.4.4.1 定位属性和宽高属性
定位属性包括:
width和height属性可以控制元素的宽度和高度,此时position属性必须指定为absolute。它们的取值可以是长度值,也可以是百分比。
6.4.4.2 显示属性
在CSS中,有两个属性可以控制元素的显示和隐藏。
与display不同之处在于当隐藏元素时,仍然为元素保留原有的显示空间。
6.4.5 列表属性
列表属性用于设置网页中列表的格式,CSS中的列表属性包括:
6.4.6 鼠标属性
鼠标属性通过cursor属性来设置在对象上移动的鼠标指针的形状,取值如下:
6.5 CSS过滤器效果
过滤器(filter)是CSS的一种扩充,它能够将特定的效果应用于文本容器、图片或其它对象。
6.5.1 过滤器属性列表
过滤器效果是通过filter样式表属性定义的,其格式如下:
filter:过滤器名(参数)
其中参数用于控制特定的过滤效果。