标签：
二.CSS
CSS-层叠样式表(Cascading Style Sheet)
CSS的优势
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使页面布局更加灵活
4.减少网页的代码量，增加网页的浏览速度，节省网络宽带
5.运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS语法规则
<style>选择器</style>样式 外部样式表不用写<style>
CSS注释的写法:/*版面1开始*/版面1/*版面1结束*/
/*选择器*/
1.标签选择器:选择器写法和标签是一致的，所有的这些标签会使用统一的样式。
<style>标签选择器{属性:值;属性:值;属性:值;}</style>
<style>h1{font-size:12px;color:#FF0000;}</style>=<style>h1{字体大小:12像素;颜色:红色;}</style>
2.类选择器:定一类样式，想用的标签代入类选择器名。类选择器声明必须以.开头，用的时候不用写。
<style>.red{color:#FF0000;}</style>
<h1 class="red"></h1>
<p class="red"></p>
3.ID选择器:只能让网页中的一个标签使用这个样式,ID选择器声明必须以#开头，用的时候不用写。
<style>#red{color:#FF0000;}</style>
<h1 id="red"></h1>
/*选择器*/
/*CSS-样式表style的使用*/
1.内部样式表:只能在当前页面使用
<style></style>写在<head></head>里面
2.内联样式:直接在标签后使用
<h1 style="color:#ff0000;">style的使用</h1>
3外部样式表:创建一个外部的CSS文件*.CSS，把样式写在这个文件中，不写<style></style>，谁想用就引入这个CSS文件。
外部样式表引入方法：
1.链接式引入
在<head></head>里写<link rel="stylesheet"href="CSS样式路径"/>
rel="stylesheet"=引入一个样式表
2.导入式引入
在<head>里写<style>@import"css/style.css"</style>地址斜杠反着写
3.链接式和导入式的区别
·<link/>标签属于XHTML，@import是属于CSS2.1。
·使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示。
·使用@import导入的CSS文件，客户端先显示HTML结构，再把CSS文件加载到网页当中。
·@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。
/*CSS-样式表style的使用*/
优先级
ID选择器>类选择器>标签选择器
内联样式>内部样式>外部样式
颜色 color
1.使用英文单词:red green blue yellow
2.使用十六进制数字表示:0-9 A B C D E F
RGB=Red红 Green绿 Blue蓝
字体样式 带汉字的页面编码模式用UTF-8
属性 含义 示例
font-style 设置字体风格 font-style:italic; 斜体 不能变更成斜体的字，可以使用倾斜。
font-weight 设置字体的粗细 font-weight:bold; 粗体 也可以是固定的数值。
font-size 设置字体大小 font-size:12px;
font-family 设置字体类型 font-family:"隶书"; 页面中既有英文又有中文的写法 font-family:cursive,a,b,c,"微软雅黑","隶书"; 用逗号隔开，
英文字体类型写在前面，写后面不生效。写字体类型集合浏览器会优先选系统里有并靠前的。
font 简写，在一个声明中设置所有字体属性 font:italic bold 12px "隶书"; 要按顺序设置属性style weight size family，中间用空格隔开。
文本样式
属性 含义 示例
color 设置文本颜色 color:#FF0000;
text-align 设置元素水平对齐方式 text-align:center; center居中，left居左，right居右
text-indent 设置首行文本的缩进 text-indent:20px; 20px=20像素，2em=2个中文字符
line-height 设置文本的行高 line-height:25px; 行间距
text-decoration 设置文本的装饰 text-decoration:underline; underline=下划线，line-through中横线穿过，none关闭所有装饰
边框 border:1px solid red; 1像素 实线 红色。
宽 width:100px;
高 height:100px;
超链接样式
伪类语法
标签名:伪类名{声明;}
a:hover{color:#FF0000;text-decoration:underline;}
伪类
a:link 未单击访问时超链接的样式
a:visited 单机访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
CSS设置鼠标形状 属性cursor:wait;
default 默认光标
pointer 超链接的指针
wait 是等待的效果
help 指示可用的帮助
text 指示文本
crosshair 鼠标呈现十字状
背景属性
背景颜色 ">背景图像
-图像路径 background-image:url(../img/123.jpg);
-重复方式 background-repeat:no-repeat; no-repeat,repeat,repeat-x,repeat-y=不重复、横向纵向重复、横向重复、纵向重复。
-背景定位 background-position:10px 15px; 向右10px，向下15px, left、center、right=左中右，top、center、bottom=上中下。
背景颜色、背景图像同时存在时，背景图像会覆盖背景颜色。
背景属性合写在一个声明中，属性没有先后顺序 background:#FF0000 url(../img/123.jpg) no-repeat 10px center;
列表
有序列表
无序列表
自定义列表
标签：
原文地址：http://www.cnblogs.com/zchbky/p/5618346.html
