【www.bbyears.com--CSS入门】

6.1 CSS入门

6.1.1 什么是CSS

     CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的设置网页格式。

6.1.2 CSS的属性单位

6.1.2.1 长度单位

     在CSS中用于描述长度的单位包括：

cm 厘米 mm 毫米 em 当前字体中m字母的宽度 ex 当前字体中x字母的高度 in 英寸 pc 1pc=12点 pt 点，1pt=1/72英寸 px 像素

6.1.2.2 百分比单位

     在CSS中除了可以使用绝对数来指定单位（如上面所介绍的），还可以用相对数来指定单位。例如：

P{line-height:150%}

     表示该段行高是标准行高的1.5倍。

6.1.2.3 颜色

     层叠样式表允许网页设计者使用以下方式中的一种指定颜色：

颜色名 直接使用标准颜色名称 #RRGGBB 使用6位十六进制数表示颜色 #RGB 使用3位十六进制数表示颜色，它是#RRGGBB方式的快捷方式。例如：#00FFEE可以表示为#0FE。 grb(rrr,ggg,bbb) 使用十进制数表示颜色。 grb(rrr%,ggg%,bbb%)使用百分数表示颜色。

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如下：

A:link或:link 未被访问过的超链接 A:visited或:visited 已被访问过的超链接 A:active或:active 当超链接处于选中状态 A:hover或:hover 当鼠标指针移动到超链接上

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标记符的用法如下：

其中:rel属性规定了被链接文件的关系，在链接样式表文件(.css文件)的情况下，取值永远是“stylesheet”;type属性规定了链接文件的MIME类型，它的值永远是“text/css”；href属性指定了要链接的样式表文件的URL。

6.3.4 样式的优先级

     如果有多个样式同时修饰一个对象，样式如果冲突，则采用高优先级样式；如果没有冲突，则采用叠加的样式效果。

     样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。

6.4 CSS属性

6.4.1 字体与文本属性

6.4.1.1 字体属性

     CSS中字体属性包括：

font-family 属性用于确定要使用的字体列表，取值可以是字体名称，也可以是字体族名称，值之间用逗号分隔。 font-size 用于控制字体的大小。它的取值分为4种类型： 绝对大小，可能的取值有： xx-small x-small small medium large x-large xx-large 相对大小，可能的取值为： smaller 比上一级字体小一号 larger 比上一级字体大一号 使用长度值直接指定。如：P{font-size:12px} 使用百分比，如：H1{font-size:70%}表示以H1标准字体的70%显示。 font-style 用于指定元素显示的字形。取值为： normal 普通字体（默认值） italic 表示斜体字型 oblique 表示斜体字型 font-variant 指定了浏览器显示指定元素的字体变体。该属性有两个值： normal 默认值 small-caps 表示小体大写，即文本中的小写字母显示为大写，不过尺寸要比标准的大写字母要小一些。 font-weight 定义了字体的粗细程度。 font 可一次性设置前面介绍的种种字体属性，属性之间以空格分隔。

6.4.1.2 文本属性

     文本属性用于控制文本段落格式。

letter-spacing 用于设置字符间距 line-height 用于设置行间距 text-align 设置对齐方式 text-decoration 对特定选项的文本进行修饰，它的取值可以是： none 表示不加任何修饰（默认值） underline 加下划线 overline 加上划线 line-through 加删除线 blink 表示添加闪烁效果 text-indent 设置首行缩进 text-transform 用于转换文本，取值为： none 默认值 capitaliae 所选文本中每个单词的首字母大写显示； uppercase 所有字母都以大写显示 lowercase 所有字母都以小显示

6.4.2 颜色与背景属性

color 用于控制文本的颜色 background-color 用于设置HTML元素背景颜色。 background-image 用于设置HTML元素背景图案。 background-attachment 控制背景图案是否随内容一起滚动，取值为： scroll 表示背景随内容一起滚动（默认值） fixed 表示背景静止 bachground-position 用于指定背景图案与相对关联区域左上角的位置。 background-repeat 设置背景图案是否重复显示，以及如何重复。取值可以是： repeat repeat-x repeat-y no-repeat background 与font类似，可以同时设置上述属性

6.4.3 布局属性

6.4.3.1 页面元素周围的空白

     在任何一个HTML元素的周围，都包括边框、边界和填充这三种空白。最接近元素内容的是填充，接下一来是边框，最外围是边界。CSS的margin、border和background属性分别用于设置以上三个区域。

6.4.3.2 边框属性

     CSS边框属性包括：

border border-bottom border-bottom-color border-bottom-style border-botton-width border-color border-left border-left-color border-lefy-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width

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浮动属性包括：

float 可以将元素的内容浮动到页面的边缘，其取值为： none left right clear 设置了元素是否允许浮动元素在它旁边，取值可以是： none left right both

6.4.4 定位和显示属性

6.4.4.1 定位属性和宽高属性

     定位属性包括：

position 用来规定元素在页面中的位置，它的取值可以是： static 默认值 relative absolute top bottom left right z-index

     width和height属性可以控制元素的宽度和高度，此时position属性必须指定为absolute。它们的取值可以是长度值，也可以是百分比。

6.4.4.2 显示属性

     在CSS中，有两个属性可以控制元素的显示和隐藏。

display 用于确定一个元素是否应绘制在页面上，它的取值有多个，但在一般浏览器中，只有一个none可以使用。当使用属性隐藏元素时，不但元素不可见，而且元素不占用任何空间。 visibility 用于控制元素的可见性，取值包括： visible 可见 hidden 隐藏 inherit 继承（默认值）

     与display不同之处在于当隐藏元素时，仍然为元素保留原有的显示空间。

6.4.5 列表属性

     列表属性用于设置网页中列表的格式，CSS中的列表属性包括：

list-style-image 指定图片作为列表项目符号，取值为： none 默认值 url(imageURL) list-style-position 设置列表元素标记的位置，取值可以是： inside outside list-style-type 用来设置项目符号和编号的样式，取值如下： disc 实心黑园点 circle 空心园圈 square 方形黑块 decimal 十进制数 lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写字母 upper-alpha 大写字母 none 无 list-style 用于一次性设置上述属性

6.4.6 鼠标属性

     鼠标属性通过cursor属性来设置在对象上移动的鼠标指针的形状，取值如下：

auto 浏览器基于当前文本决定显示哪种指针 crosshair 简单十字形 default 随平台而定的默认指针（通常为箭头） hand 手形 move 指示某对象被移动的交叉箭头 *-resize 指示边缘被移动的前头（*可以是n、ne、nw、s、se、sw、e以及w，分别代表北、东北、西北、南、东南、西南、东以及西等方向） text 编辑文本指针（通常为I形） wait 指示程序正忙，用户需要等待的沙漏图标 help 指示用户可以得到帮助的问号图标

6.5 CSS过滤器效果

     过滤器（filter）是CSS的一种扩充，它能够将特定的效果应用于文本容器、图片或其它对象。

6.5.1 过滤器属性列表

     过滤器效果是通过filter样式表属性定义的，其格式如下：

filter:过滤器名（参数）

     其中参数用于控制特定的过滤效果。

本文来源：http://www.bbyears.com/css/10547.html