一.Css规则主要由两部分组成 1.选择器 2.一条或多条声明
a. 选择器主要作用是为了确定需要改变样式的HTML元素
b. 每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开,多条声明用分号(;)隔开.
例如：form {width: 200px;margin: 20px auto;}
二.选择器有id，类，元素（标签），属性，伪类，通用选择器
前几个大家大概都清楚，写一下伪类选择器：
css伪类用于向某些选择器添加特殊效果。
下面我们介绍一下锚伪类。
在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00}/* 已访问的链接 */
a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */
注意:
1.在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2.在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
3.伪类名称对大小写不敏感。
优先级id>伪类 >类 >元素>通用
三.值的单位
%百分比
in英寸
cm厘米
mm毫米
em能自动适应用户所使用的字体
pt磅 (1 pt 等于 1/72 英寸)
pc12 点活字 (1 pc 等于 12 点)
px像素 (计算机屏幕上的一个点)
(颜色名)颜色名称 (比如 red)
rgb(x,x,x)RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb十六进制数 (比如 #ff0000)
四.导入CSS
最常用的就是外部和内部样式表
1.内部样式表
在head标签中加入style标签，然后在style的标签体中再对多个标签的样式进行修改。
例如:
<style type="text/css">
div{
border:1px dashed #ff00ff;
}
</style>
2.外部样式表
通过head标签里的link标签,导入myStyle.css文件
例如:
<link rel="stylesheet" href="myStyle.css" type="text/css">
除此之外标签中也可以加入，style属性来写样式
五.CSS属性
1.字体
Css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母)
常用属性:
font:简写属性，作用是把所有针对字体的属性设置在一个声明中。
格式：{font :风格 异体 粗细 尺寸/行间距 字体系列}
例如：{ font: italic bold 12px/20px arial,sans-serif}
font-family:定义字体系列
•具体字体的名称，例如：font-family:隶书。
•通常字体系列名称：例如 font-family:"serif","sans-serif","cursive","fantasy","monospace"
“,”的意思是指如果本地没有该字体系列，再使用下一个
font-size:定义字体的尺寸 例如 font-size:40px
font-style:定义字体风格 例如 font-style:italic
2.文本
CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等.
常用属性
color:定义文本颜色 例如 color:#ffff00
text-align:定义文本对齐方式 例如:text-align:center
text-decoration 向文本添加修饰。例如text-decoration:underline(下划线)
letter-spacing:定义字符间隔
word-spacing:定义字间隔
3.背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。
常用属性:
background:简写属性，作用是将背景属性设置在一个声明中
格式：{background: 颜色 url(图片路径) 重复 滚动 位置}
例如: {background: #00FF00 url(bgimage.gif) no-repeat fixed top}
background-color:定义背景颜色
background-image:定义背景图片 background-image:url(xx.jpg)
background-position:定义背景图片的起始位置 background-position:10% 5%;
background-repeat:定义背景图片是否重复及如何重复 background-repeat:no-repeat
4.尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。
常用属性:
width:设置元素的宽度
height:设置元素的高度
5.列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
常用属性:
list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
格式:{list-style : 图片 类型 位置}
例如:{list-style : url(liebiao.jpg) square inside}
list-style-type:定义列表项标志的类型
list-style-position:定义列表项标志的位置 常用值:inside ,outside
list-style-image:定义列表项标志为图象
6.表格
CSS 表格属性可以帮助您极大地改善表格的外观
常用属性:
border-collapse:定义是否把表格边框合并为单一的边框。常用值:collapse,separate
border-spacing:定义分隔单元格边框的距离
caption-side:定义表格标题的位置常用值:top,bottom
7.轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性:
outline:在一个声明中设置所有的轮廓属性
格式:{outline:颜色 样式 宽度}
例如:{outline:#00FF00 dotted thick;}
outline-style:定义轮廓的样式 常用值:solid(实线) ,dashed(虚线) ,double(双线)...
outline-color:定义轮廓的颜色
outline-width:定义轮廓的宽度 常用值:thin ,thick ,14px...
8.定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
常用属性:
position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
absolute:绝对 相对于父元素
relative:相对 相对于自己应该出现的位置
fixed:相对于浏览器
top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
9.分类
CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
常用属性
float:定义元素在哪个方向浮动
clear:设置一个元素的侧面是否允许其它的浮动元素
cursor:当指向某元素之上时显示的指针类型
display:定义是否显示及如何显示元素 常用值 none和inline 消失
visibility:定义元素是否可见或不可见。 常用值 hidden和visible占位隐藏
山不拒微土而成擎天之势，水不择细流终会汹涌之波！
css伪类用于向某些选择器添加特殊效果。
下面我们介绍一下锚伪类。
在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */注意:
u 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
u 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
u 伪类名称对大小写不敏感。
- 还没有人评论，欢迎说说您的想法！
客服
