CSS 属性小记

1. 选择器的介绍

普通选择器

标签选择器：p{...}

id选择器：#xiaoming{...}

类选择器：.class{...}

通用选择器: *{...}, 对所有的元素都有效

伪类选择器

LoVe HAte——爱恨原则

link：访问前的样式设置，a:link{...}

visited：访问后的样式设置，a:visited{...}

hover：鼠标悬浮在上面时的样式设置，a:hover{...}

active：鼠标点击时的样式设置，a:active{...}

其中link, visit, active只对a标签有效， hover对所有标签都有效

2. 文本属属性

text-indent：缩进，例如2em

text-decoration：有underline, overline, line-through三个值

line-height：行高

letter-spacing：字符间的距离

word-spacing：英文单词间的距离

text-align：文本的对齐方式

color：颜色属性

3. 盒子模型

在CSS中，每个元素都可以看作是一个盒子，对于一个盒子我们需要注意：

　　1）border：盒子的边框，可以设置线形、粗细、颜色。

　　2）padding：内边距，盒子内容区域与边框的距离，类似word文档中的页边距。

　　3）marging：外边距，盒子边框与相邻边框的距离。块级元素的垂直外边距会被合并；行内元素的左右外边距会叠加，纯行内元素在垂直方向不占据外边；浮动元素外边距会叠加，原因是浮动元素本身是一个行内块元素，它换行的原因是行长度不够，才自动换的行，所以本质上来讲，我们可以把同一个级别、连续的浮动元素都看成在一行。margin可以为负值。

4. 背景属性

background-image

　　 url(...), 背景图片yrl中是背景图片的链接

background-repeat

　　no-repeat, 背景图片的平铺方式是否重复，若背景图片在边缘处无法刚好放下，则多余的将会被裁剪掉

background-position

　　background-position-x: 100px, 绝对值式写法，可以为负值

　　background-position-x: center/right/left, 方位式写法。

　　background-position-x: 30%,b百分比式写法，指的是背景图片的中间处在区域的30%处。