1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使得页面布局更加灵活
4.减少网页的代码量，增加网页的浏览速度，
节省网络宽带
5.运用独立于页面的css，有利于网页被探索引擎收录
css基本语法结构
语法
选择器{声明1；
声明2；
......}
h1{font-size:12px；
color:#F00；}
h1《选择器》
font-size《属性》
12px《值》
font-size:12px；color:#F00《声明》
style标签
<style type="text/css">
h1{
font-size:12px；
color:#F00；
}
</style>
标签选择器
html标签作为标签选择器的名称
<h1>...<h6>,<p>,<img/>
语法
p{font-size:16px;}
类选择器
语法
.class{font-size:16px；}
class《类名称》/《类选择器》 font-size《属性》 16px《值》
<标签名 class="类名称">标签内容</标签名>
ID选择器
语法
#id{font-size:16px;}
id《id名称》/《id选择器》 font-size《属性》 16px《值》
行内样式
使用style属性引入css样式
试列
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">
直接在html标签中设置的样式</p>
内部样式表
css代码写在<head>的<style>标签中
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离不够彻底
外部样式表
css代码保存在扩展名为.css的样式表中
html文件引用扩展名为.css的样式表，有两种方式
链接外部样式表
语法
<head>
......
<link herf="style.css"rel="stylesheet"type="text/css">
......
</head>
style《文件路径》 stylesheet《使用外部样式表》
内行样式
使用style属性引入css样式
试列
<h1 style="color:red;">style
优先顺序
行内样式>内部样式>外部样式表
ID选择器>类选择器>标签选择器
font-family属性
p{font-family:verdana,"谐体"}
body{font-family：Times,"Times New Roman","谐体"}
字体风格
font-style属性
normal、italic和oblique
font-weight的属性
normal 默认值，定义标准的字体。
bold 粗体字体。
bolder 更粗的字体
lighter 更细的字体。
100、200、300、400、500、600、700、800、900 定义由粗到细的字体。
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
试列
p span{font:oblique bold 12px"谐体";}
文本属性
color 设置文本颜色 color;#00C；
text-align 设置元素水平对齐方式 text-align：right；
text-indent 设置首行文本的缩进 text-indent：20px；
line-height 设置文本的行高 line-height
color属性
十六进制方法表示颜色
color：#FFFFFF;
color：#000000;
color: FF0000;
color：#A983D8;
color: #95F141;
color：#339966;
水平对齐方式
text-align属性
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
水平对齐方式
文本装饰
tsxt-decoration属性
none 默认值，定义的标准文本
underline 设置文本的下划线。
overline 设置文本的上画线
line-through 设置文本的删除线
blink 设置文本闪烁。此值只在firefox浏览器中有效，在IE中无效。
文本装饰
text-decoration属性
垂直对齐方式
vertical-align属性:middle、top、bottom
超链接伪类
伪类样式
语法 标签名{声明；}
a:hover{
color:#B46210;
text-decoration:underline;
}
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited{color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hovoer{color:#ff7300;}
a:active 鼠标按住未释放超链接样式 a:active{color:#999;}
设置伪类的顺序a:link->a:visited->a:hover->a:active
css设置鼠标形状
default 默认光标
pointer 超链接的额指标
wait 指示程序正忙
<div>标签的用法
网页布局
排版网页内容
语法
<div>网页内容...</div>
#header{
200px;
height:280px;
}
......
<div id="header">网页内容...</div>
背景颜色
background-color 背景颜色值：十六进值方法表示 transparent
背景图像
background-image属性
背景重置方式
background-repeat属性
背景定位
background-position属性
Xpos Ypos 单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键词 水平方向的关键词：left、cent、right、
背景属性
background属性
试列
title{
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url()
盒子模型
边框（border）
外边框(margin)
内边框（padding）
高(height)
宽（width）
中间（网页素材）
边框
border-color
border-width
border-style
dorder-width
thin
medium
thick
像素值
试列
border-top-5px;
border-rigth-10px;
border-bottom-8px;
border-left-22px;
border-5px;
border-20px 2px;
....
border-style
none
hidden
dotted
solid
double
......
示例
border-top-style:solip;
同时设置边框的颜色、粗细和样式
示例
border-bottom
margin
margin-top
margin-right
margin-bottom
margin-left
margin
padding
padding-left
padding-right
padding-top
padding-bottom
padding
外边距
margin:10px
内边距
padding:5px
内容宽度
70px
盒子模型总尺寸=border-width+padding+margin+内容宽度
标准文档流组成
快级元素(block level)
<h1>...<h6>、<p>、<div>、列表
内联元素(inline)
<span>、<a>、<img/>、<strong>...
控制元素的显示和隐藏
块级元素与行级元素的转变
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值，元素会被显示为内联元素，该元素前后会带有换行符
float属性
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置
clear属性
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
overflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
网页定位元素
position属性
stati：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
relativ属性值
相对自身原来的位置进行偏移
偏移设置：top，left，right，bottom。
设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。
设置相对定位的盒子仍在标准流中，它对父级盒子和相邻的盒子都没有影响。
absolute属性值
偏移设置：top，left，right，bottom。
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基础进行偏移。
如果没有已经定位的祖先元素，那么会以浏览器窗口为基础进行定位。
绝对定位的元素从标准文档中脱离，这意味着它们对其他元素的定位不会造成影响。
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
这个性质在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的
位置。
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方
css设置元素透明度
opacity:x x值为0~1，值越小越透明 opacity:0.4；
filter:alpha(opacity=x) x值为0~100，值越小越透明 filter:alpha(opacity=40)；