CSS指层叠样式表(Cascading Style Sheets).docVIP

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;} p id=red“这段是红色的p 注：每个id属性只能在html中出现一次。 #mm p {color:red;} #mm h1 {color:green;} 作为派生选择器，指id为mm的段落是红色，h1标题是绿色的。 注：id选择器作为派生选择器时，可出现多次。 ? 类选择器 以一个点号显示 .center {text-align:center} h1 class=centeraaaaa/h1 注：类选择器的第一个字符不能是数字。 td.fancy {color: #f60;background: #666;}作为派生选择器，指类名为fancy的表格单元都是灰色背景的橙色。 ? 如何插入样式表 3种方法 ①外部样式表 head link rel=stylesheet type=text/css href=mystyle.css / /head 注：外部样式表mystyle.css不包含任何html标签。 ②内部样式表 head style type=text/css hr {color:red;} /style /head ③内联样式 p style=color:sienna; margin-left:20px/p注：同一属性在不同样式表中被同样选择器定义，属性值将从更具体的样式表中被继承过来。（内部样式比外部具体） ? 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;} 背景图像固定，不会随其他滚动。（就是你可以一直看到背景，它不会动） 可以将所有背景属性放在一个声明中： headstyle type=text/cssbody{ background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; }/style/head ? ? 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%;} divphello world!/p/div 缩进的长度为：百分比值乘以该元素的父元素的宽度。 水平对齐 p {text-align:left;} 文本左对齐，还有center，right，justify（文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等） 字间隔 p {word-spacing:3px;} 文本行中字（单词）间的间隔。（可以使用负值） 字母间隔 p {letter-spacing:3px;} 以上两种的默认值都是normal，和0一样。 字符转换 p {text-transform:none;