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%处。