css基本使用

CSS 的选择器

CSS 每一条样式规则由三部分构成：
选择器（selector）、属性（properties）和属性值（value)

选择器（selector)也被称为选择符，它不只是 HTML 5 文档中的元素标记，还可以是类、ID或是元素的某种状态。
根据 CSS 选择器的用途可以把选择器分为

标签选择器（标签名）
类选择器（.类名）
ID选择器（#ID）
全局选择器（*）
组合选择器
伪类选择器

CSS中的属性

颜色单位
1）名字颜色，如gray、blue等
2）RGB颜色，如 p{color: rgb(255,0,0)}
3）十六进制颜色，如 #FF0000
4) RGBA颜色，a为不透明度， 如 p{color: rgb(255,0,0,0.8)}
5) HSL颜色：色相（Hue，0-360），饱和度（Saturation，取值0-100）和明度（Lightness，取值0-100），如 HSL(120, 80%, 80%)
//rgb与rgba颜色都是用rgb(),只是参数不同。

长度单位
1）绝对单位：英寸in，厘米cm，毫米mm，磅pt（印刷标准，72磅为1英寸）等
2）相对单位：
em，相对于当前对象内文本的字体尺寸，如 h1{font-size: 20pt} h1{margin-left: 1em}
ex，一个字体的 x-height (通常是字体尺寸的一半)
px，像素 (计算机屏幕上的一个点)，最为常用

超级链接属性，通过伪类选择器实现，包括：

a:link 定义a对象在未被访问前的样式
a:hover 定义a对象在鼠标悬停时的样式
a:active 定义a对象被用户激活时的样式
a:visited 定义a对象在链接地址已被访问过时的样式

带有提示信息的超级链接：通过Tips方式为这个链接加上的介绍性信息。
可以在代码中添加一个描述标记title来达到这个效果。

设置超级链接的背景图

超级链接里还可以添加图片作为背景图，来增加超连接的显示效果，通常使用background-image来实现。

设置超级链接的按钮效果

按钮效果就是，当鼠标指针移动到一个超级链接上的时候，超级链接的文字或图片会有一种凹陷的效果。
利用CSS中的a:hover，当鼠标经过链接时，将连接向下、向右各移一个像素，就可以达到这种效果

a:hover{
color:#821818;
padding:5px 8px 3px 12px;
background-color:#e2c4c9;
border-top:1px solid #717171;
border-left:1px solid #717171;
border-bottom:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
}

使用CSS3美化鼠标特效

CSS3 中，鼠标的箭头样式可以通过cursor属性实现。

设置表格的样式

设置表格边框的样式
在显示表格数据时，通常都带有表格边框，用来界定不同单元格的数据。
当table表格的描述标记 border 值大于0时，显示边框，如果 border 的值为0，则不显示边框。
边框显示后，可以使用CSS3的border-collapse属性对边框进行修饰。

在CSS中，可以使用 border-width 属性来设置表格边框的宽度

设置表格边框的颜色

在CSS中，通常使用 color 属性来设置表格中的文本颜色，使用 background-color 属性来设置表格的背景色。
如果为了突出表格中的某一个单元格，还可以使用 background-color 属性来设置某一个单元格的颜色。