CSS是Cascading Style Sheets的缩写，即“层叠式样表”，是专门用于网页格式控制的规则，可以将页面内容与表现形式分开，css规则可以单独存放与一个文件中，也可以包含于某个html文件内，通常位于head标签内。

 

　　分为标签选择器、ID选择器和类选择器，其中类选择器用“。类名”表示，ID选择器用“#ID名”表示，标签选择器则用“标签名”表示，之后用大括号包住编写的CSS语句。

 

　　可以使用Dreamweaver软件可以可视化地生成CSS样式，十分高效，在此我们手动编写CSS。

 

　　选择器还包括伪类选择器，常用在a标签上，表示链接的四种不同状态：未访问链接（link）、已访问链接（visited）、激活链接（active）和鼠标指针停留在链接上（hover）。

 

　　a可以具有一个状态，也可以同时具有两个或者三个状态，如鼠标移到已访问的标签上时便具有三种状态。

 

　　链接样式

 

　　可以将CSS样表单独提出，并写在扩展名为。css的文件中，通过页面的link标签将其链接到页面中，很好的将样式与页面分隔开，实现完全分离，使得前期制作和后期维护十分方便，必须放在head标签中，如下

 

　　若CSS文件和HTML文件不再同一个目录下，可以使用绝对路径或者引用路径。

 

　　导入样式

 

　　相当在初始化时候讲CSS样式导入到HTML文件中，相当于内嵌，而链接样式则是在HTML文件需要CSS样式的时候才会从链接中引入，比如在样式表开始就进行导入操作，导入用法如下

 

　　相关的样式类型属性有

 

　　font-family 字体名称font-size 字体大小color 字体颜色（可以使用十六进制，也可以使用颜色的英文单词）line-height 行高text-align 水平对齐方式（left、right和center）text-indent 缩进

 

　　如下代码可以使我们规范body标签里的字体样式

 

　　font-family属性可以设置多个字体类型，以保证页面可以有正确的预览效果，最基本的最好放在最后。

 

　　font-weight属性设置字体的粗细程度，值有bold、bolder、lighter、normal和100——900，默认是400.

 

　　font-variant属性可以将文本中的小写字母转为大写字母，但是大小比真正的大写字母小一点。

 

　　字体阴影

 

　　使用text-shadow属性为文字设置阴影并赋颜色，还可以设置不透明度。

 

　　属性值如下

 

　　color指定颜色length由浮点数字和单位标识符组成的长度值，可为负值，指定阴影的水平延伸距离opacity由浮点数字和单位标识符组成的长度值，不可为负值，制定模糊效果的作用距离，如果仅仅需要模糊效果，length设为0即可。

 

　　四个属性分别表示：阴影的水平位移（可正可负），垂直位移（可正可负），阴影模糊半径（可选）和阴影颜色（可选）。

 

　　效果如下

 

　　文本溢出效果

 

　　当文本超出框架时用text-overflow属性设置是否显示省略标记，如果不显示则会直接切断，若显示则将多余文本用省略号代替。

 

　　要想实现省略号效果还需设置以下属性

 

　　text-overflow属性有两个值：不显示省略标记单纯简单裁切clip、溢出时显示省略号ellipsis。

 

　　词间隔

 

　　word-spacing属性设置词与词之间的间隔，属性值可为normal也可为指定长度（可正可负），并不用于文字。

 

　　letter-spacing这个属性设置字符间隔，属性值同上。

 

　　文字修饰效果

 

　　text-decoration属性设置文字的修饰属性，如下划线、删除线闪烁等。

 

　　text-decoration:none|underline|blink|overline|line-through

 

　　闪烁效果只有Mozilla和Netscape浏览器支持，IE及其他如Opera则不支持

 

　　CSS中设置颜色的方法有很多，命名颜色、RGB颜色、十六进制颜色、网络安全色。相比以前的版本，CSS新增了HSL、HSLA、RGBA色彩模式。

 

　　命名颜色

 

　　可以直接用英文单词明明与之对应的颜色，非常简单直接，预置了十六种颜色以及其衍生色，这十六钟颜色是CSS规范推荐的，而且主流浏览器都能识别。

 

　　颜色名称颜色名称aqua水绿black黑blue蓝fuchsia紫红gray灰green绿lime浅绿maroon褐navy深蓝olive橄榄purple紫red红silver银teal深青white白yellow黄 使用方法 —— p{color:red} —— 除了这十六中颜色之外还能使用其他CSS预定义颜色，多数浏览器能识别140多种颜色名，如orange、PaleGreen等。 #### RGB 使用三个十进制数表示颜色，分别为R红色、G绿色和B蓝色，通过三个数值结合可以形成不同颜色。 如

 

　　表示绿色，

 

　　表示黑色。 可以使用两种设置方式：百分比和直接用数值设置

 

　　十六进制

 

　　可以使用十六进制颜色和RGB颜色，十六进制基本格式为，其中R表示红色、G表示绿色、B表示蓝色，其中RR、GG和BB最大值为FF，即十进制的255，如表示黄色，如果RR、GG和BB均为两个相同的，则下列两个等价

 

　　颜色对照表如下

 

　　颜色名十六进制值RGB红色#FF0000rgb（255,0,0）橙色#FF6600rgb（255,102,0）黄色#FFFF00rgb（255,255,0）绿色#00FF00rgb（0,255,0）蓝色#0000FFrgb（0,0,255）紫色#800080rgb（128,0,128）紫红色#FF00FFrgb（255,0,255）水绿色#00FFFFrgb（0,255,255）灰色#808080rgb（128,128,128）褐色#800000rgb（128,0,0）橄榄色#808000rgb（128,128,0）深蓝色#000080rgb（0,0,128）银色#C0C0C0rgb（192,192,192）深青色#008080rgb（0,128,128）白色#FFFFFFrgb（255,255,255）黑色#000000rgb（0,0,0）

 

　　HSL色彩模式

 

　　HSL色彩模式是工业界的一种颜色标准，通过对色调（H）、饱和度（S）、亮度（L）三个颜色通道的改变以及它们相互之间的叠加获得各种颜色，这个标准几乎包括了人类视力可以感知的所有颜色，在屏幕上可以重现16777216种颜色，是目前最广泛的颜色系统之一。

 

　　表示语法如下

 

　　属性说明如下

 

　　length：表示色调，衍生于色盘，取值可为任意值，其中0（360或者-360）标示红色，60表色黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红。percentage：表示饱和度，说明该色彩被使用了多少，即颜色的深浅程度和鲜艳成都，取值为0%——100%，0%表示灰度，即没有使用该颜色，100%表示饱和度最高，即颜色最鲜艳。percentage：表示亮度，取值为0%——100%，其中0%最暗，为黑色，50%平均，100%最亮，显示为白色。

 

　　使用方法如下

 

　　HSLA色彩模式

 

　　是CSS新增的色彩模式，HSL色彩模式的扩展，增加了不透明度参数，不透明度取值0——1，如下

 

　　RGBA

 

　　也是CSS新增的色彩模式，是RGB的扩展，增加了不透明度参数，取值0-100%或者0-255，并非所有浏览器支持百分数，使用方法如下

 

　　网络安全色

 

　　网络安全色由216种颜色组成，被认为在任何操作系统和浏览器中都是相对稳定的，216中衍射均是由红、绿、蓝三个基本色从0、51、102、153、204、255这六个值中取值，即6x6x6种颜色。

 

　　增加背景图可以使单调的标签文字网页变得丰富起来，可以使用CSS规则来设置图片样式，相关属性如下

 

　　background-image 背景图的地址（background-image:url（“地址一定要用引号括起来，而且本地地址斜杠为反斜杠，否则无法显示”）background-repeat 图片的平铺方式（repeat-x水平平铺、repeat-y垂直平铺、no-repeat不平铺，默认且repeat水平垂直平铺）background-position 图片相对于容器的位置（水平left、right和center，垂直为top、center和bottom）background-attachment 图片是否随文档滚动（滚动scroll，fixed始终保持在视野内）