CSS指层叠样式表(CascadingStyleSheets).doc

CSS指层叠样式表（Cascading Style Sheets）CSS语法由三部分组成：选择器、属性和值：Selector property: value 例：body color:blue;若值为若干单词，需加引号。选择器分组 例：h1,h2,h3,h4 color:#ff0000;使这几个标题的颜色都是绿色的。派生选择器 例：li strong font-style:italic;指在li里的属性为strong的元素会变成斜体。id选择器 以#定义#red color:red;这段是红色的注：每个id属性只能在html中出现一次。#mm p color:red;#mm h1 color:green;作为派生选择器，指id为mm的段落是红色，h1标题是绿色的。注：id选择器作为派生选择器时，可出现多次。类选择器 以一个点号显示.center text-align:centeraaaaa注：类选择器的第一个字符不能是数字。td.fancy color: #f60;background: #666;作为派生选择器，指类名为fancy的表格单元都是灰色背景的橙色。如何插入样式表 3种方法外部样式表注：外部样式表mystyle.css不包含任何html标签。内部样式表hr color:red;内联样式注：同一属性在不同样式表中被同样选择器定义，属性值将从更具体的样式表中被继承过来。（内部样式比外部具体）CSS背景背景色p backgroud-color:red;背景图像p backgroud-image:url(123.jpg);背景重复p backgroud-repeat:repeat;repeat是图像在水平垂直方向上都平铺，相当于添加整个背景图像。repeat-x是图像在水平方向上平铺，repeat-y是在垂直方向上。背景定位p backgroud-position: center;其属性值可以为center,top,bottom,left.right，若只出现一个关键字，则认为另一个关键字是center。p backgroud-position:66% 33%;指将图像放在水平方向 2/3、垂直方向 1/3 处。p background-position:50px 100px;图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置。背景关联p backgroud-attachment:fixed;背景图像固定，不会随其他滚动。（就是你可以一直看到背景，它不会动）可以将所有背景属性放在一个声明中：body background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; CSS文本缩进文本p text-indent:5em;使所有段落的首行缩进 5 em（即第一行开头距左边距有5em）使用负值p text-indent:-5em;段落的第一行的前5em的内容从左面超出了浏览器。p text-indent:-5em;padding-left:5em;设置一个5em的内边距，第一行正常显示，其余行的开头距左边有5em距离。使用百分比值div width:500px;p text-indent:20%;hello world!缩进的长度为：百分比值乘以该元素的父元素的宽度。水平对齐p text-align:left;文本左对齐，还有center，right，justify（文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等）字间隔p word-spacing:3px;文本行中字（单词）间的间隔。（可以使用负值）字母间隔p letter-spacing:3px;以上两种的默认值都是normal，和0一样。字符转换p text-transform:none;属性值：uppercase:全大写，lowercase:全小写，capitalize:每个单词的首字母大写。文本装饰p text-decoration:none;属性值：underline:下划线，overline:文本顶部一条线，line-through:横线从文本中间穿过，blink:使文本闪烁。注：none值会关闭原本应用到一个元素上的所有装饰。比如链接的下划线。p text-decoration:underline overline;可以这样使文本同时拥有上下划线。CSS字体注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 inherit。font用于将所有字体的属性值写到一个声明中。设置文本字体p font-family:Times, TimesNR, New Century Schoolbook,Georgia, New York, serif;根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。当一个字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。设置字体大小p font-size:30;其他属性值：xx-small，x-small，small，medium，large，x-large，xx-large（默认值是medium）smaller：把 font-size 设置为比父元素更小的尺寸。larger：把 font-size 设置为比父元素更大的尺寸。inherit：规定应该从父元素继承字体尺寸。200%：把 font-size 设置为基于父元素的一个百分比值。设置字体风格p font-style:normal; （默认值）italic：浏览器会显示一个斜体的字体样式。oblique：浏览器会显示一个倾斜的字体样式。inherit：规定应该从父元素继承字体样式。设置字体异体p font-variant:small-caps;浏览器会显示小型大写字母的字体。设置字体粗细p font-weight:bold; (设置字体为粗体)bolder：定义更粗的字符。lighter：定义更细的字符。100900：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。CSS列表要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。设置列表标记类型ul list-style-type:disc;其他属性值：none：无标记。disc：实心圆。（默认值）circle：空心圆。square：实心方块。decimal：数字。decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman：大写罗马数字(I, II, III, IV, V, 等。)lower-alpha：小写英文字母。upper-alpha：大写英文字母。将图像作为列表标志ul list-style-image: url(/i/eg_arrow.gif);设置列表标志的位置u