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和obliquefont-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-heightcolor属性
十六进制方法表示颜色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:activecss设置鼠标形状
default 默认光标 pointer 超链接的额指标wait 指示程序正忙 <div>标签的用法 网页布局 排版网页内容 语法 <div>网页内容...</div>#header{ width: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-colorborder-widthborder-style
dorder-width
thin medium thick 像素值试列border-top-width:5px;border-rigth-width:10px;border-bottom-width:8px;border-left-width:22px;border-width:5px;border-width:20px 2px;.... border-style none hidden dotted solid double ......示例border-top-style:solip; 同时设置边框的颜色、粗细和样式示例border-bottom marginmargin-topmargin-rightmargin-bottommargin-leftmargin
padding
padding-left padding-right padding-top padding-bottom padding 外边距margin:10px内边距padding:5px内容宽度width: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)；