(精选)CSS指层叠样式表(CascadingStyleSheets)

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;}

aaaaa

注：类选择器的第一个字符不能是数字。

td.fancy {

color: #f60;

background: #666;

}

作为派生选择器，指类名为fancy的表格单元都是灰色背景的橙色。

如何插入样式表3种方法

①外部样式表

注：外部样式表mystyle.css不包含任何html标签。

②内部样式表

③内联样式

注：同一属性在不同样式表中被同样选择器定义，属性值将从更具体的样式表中被继承过来。（内部样式比外部具体）

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;}

背景图像固定，不会随其他滚动。（就是你可以一直看到背景，它不会动）

可以将所有背景属性放在一个声明中：

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;}