CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为 .css。
1、建立html文档更加方便，不需考样式
2、提交了网页开发的效率，
3、独立性与灵活性：html文档与样式分离后，文档与样式之间就具有了独立性，当更改内容时，在结构文档中进行更改，如果更改样式在样式文件中进行更改。
4、样式代码的重复利用：一个html文档可以应用多种样式，这样就可以快速更改网页样式。多个html文档可以应用同一个样式，这些文档就可以实现相似的效果与风格。
CSS的作用
- CSS2.0是目前众多浏览器支持最为完善样式，新的浏览也是以2.0css为支持原型进设计，css2.0样式在众多平台和浏览表现的效果也最为一致。
- css可以实现页面标签精确的位，可以支持全部的字体，字号，样式和完美的模型设置和简单的交互设计。
样式的结构：内容 结构(Structure) 表现(presetation) 行为(Behavior)
内容是一个人 头部，身体，四肢(结构) 头部身体四肢上的衣服饰，饰品(样式) 头部，身体，四脚动作(行为)
CSS文件的引入方式
第一种：行内样式 在html标签内使用style属性书写的样式
<span style=”color:red”>行内样式</span>
第二种：内部样式(内嵌样式) 内嵌样式是书写在<style>标签中
如：
<style type="text/css">
span{
color:red;
}
</style>
第三种：引入样式 在style标签中使用@import url(样式文件名)
<style type="text/css">
@import url(import.css);
</style>
第四种：外部样式 使用HTML的link标签引入的样式
<link ref=”stylesheet” type=”text/css” href=”css文件名”/>
CSS的语法：
CSS样式表中由若干个样式规则组成
每一个样式规则由以下组成
选择器(符)：选择器的作用，一是选中html标签,二将样式应用给选中的标签,选择器的名子不能以数字开头。
选择器的种类：
- 标签选择器
span{
color:red;
}
- 类选择器
类选择器以 “.”开头
.a1{
color:blue;
}
- id选择器
ID选择器以”#”开头
#a3{
background:silver;
}
- 层级选择器
每一个选择器之间使用空格分开
E F G{样式}
EFG是选择器的名字
a.whitewine{color:yellow;}
- 分组选择器
E,F,G{样式}
EFG是选择器名字，可以是任何选择器的名字
<style type="text/css">
span,label,.c3{color:red;border:1px solid red;background:yellow;margin:20px;}
</style>
<script type="text/javascript"></script>
</head>
<body>
<span>分组选择器1</span>
<label>分组选择器2</label>
<h2 class="c3">分组选择器3</h2>
</body>
- 组合选择器
将以上各种选择器组合使用逗分隔而成的选择器
计算时先以”,”号将每组分开，再进行相应计算
#box div label,#id1 .l1{color:red;}
//相当于 #box div label{color:red;};
#id1 .l1{color:red;}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="box">
<div>
<span class="c1">类选择器</span>
<br/>
<label>标签选择器</label>
</div>
</div>
<div id="id1">
ID选择器
<label class="l1">标签选择器</label>
</div>
</body>
- 通用选择器：
*{样式} 选中文档中所有的标签
在IE低版本中不支持
- 伪类选择器
一般是用于a链接的不同状态，以下四种状态
:link a链接正常显示状态
:visited a链接访问后的状态
:hove r 鼠标悬浮于a链接上的状态
:active 当鼠标在a链接上按下(并未抬起鼠标)后的状态
联想记忆： LVHA Love(爱) Hate(恨)
常用写法：
a:link,a:visted{text-decoration:none;color:silver;}
a:hover{text-decoration:none;color:red;}
属性的书写规范：
- 属性与属性值之间用”:”分开
- 属性与属性之间用”;”分开
CSS中的注释
/*注释内容*/ 可以单行注释，也可以多行注释
CSS属性详解：
- 尺寸属性
width: 设置标签的宽度 取值：数值 单位：非零数值必须px
height: 设置标签的高度 取值：数值 单位：非零数值必须px
- 字体属性
color: 设置文字颜色 named color、十进制RGB(255,200,100) 十六进制(#00ff00)
font-size: 设置文字大小 单位px 12px;
font-family: 设置字体 宋体,黑体
font-weigth: 设置字体是否加粗
font-style: 设置字体是否斜体
line-height: 设置行高
font: 复合属性
示例：span{font:bold italic 13px 华文行楷;}
字体与字体大小属性是必须
- 文本属性
text-transform: 设置文本在小写 capitalize uppercase lowercase只适用于英文
text-decoration: 设置文字装饰线 underline、overline、line-through、normal
text-align: 设置文字或被包含行内元素水平对齐方式 left、center、right
vertical-align: 设置文字或被包含行内元素垂直对齐方式top、middle、bottom
text-indent: 设置文字首先缩进 单位:px像素
letter-spacing: 设置字符间距
word-spacing: 设置词间距 一般用于英文
- 边框属性
border-width: 设置边框粗细 单位:px
broder-style: 设置边框样式
取值:solid实线、dashed虚线段、dotted点虚线、inset、ouset
broder-color: 设置边框颜色 三种
border: 复合属性
border:red 1px solid;
border-left-width: 单独设置左边的粗细
border-left-color: 单独设置左边的颜色
border-left-style: 单独设置左边的样式
border-left: 左边的复合属性
border-left:red solid 1px;
border-left-style:dashed;
border-left-width:1px;
border-left-color:red;
border-top-style:dotted;
border-top-width:2px;
border-top-color:blue;
border-right-style:outset;
border-right-width:3px;
border-right-color:yellow;
- 背景属性
background-color: 设置背景颜色 三种颜色方式
background-image: 设置背景图片 url
background-image:url(图片地址);
background-position: 设置背景图片的位置
top 居上对齐
center 居中对齐
left 靠左对齐
right 靠对齐
center 居中对齐
bottom 向下对齐
background-repeat: 设置背景图片的平铺方式
取值: repeat-x水平方向平铺
repeat-y垂直方向平铺
no-repeat 不平铺
background-attachment: 设置背景是否随内容滚动
取值：fixed背景固定 scroll背景随内容滚动
background: 背景图片的复合属性
background:red;
background:url(tiger1.jpg) 0 0 scroll no-reapt;
<font size=”” color=”” face=””>
