CSS 选择器和背景属性
2016-06-07 本文已影响0人
petertou
命名规范
1.起名尽量采用英文单词，便于语义化
2.多个英文单词，中间用“-”隔开，比如 头部logo “header-logo”
常用属性
weight height color background-color font-size font-weight
font-family text-align line-height padding margin
font-family
1.没有为某个元素设定字体名或者字体族名，或者字体名（或字体族名）在本地字体库中没有发现，则使用浏览器默认的字体。
2.如果字体名有空格或者由多个英文单词组成的名字，则用双引号包裹起来。
CSS 选择器
一 基础选择器
1.ID选择器 一般一个网页中ID选择器 不超过5个（header logo content footer)
2.类选择器 可以有多个类作用于同一个元素上，中间用空格分开。优先级只与定义顺序有关与放置顺序无关。
3.标签选择器 一般用于重置属性的时候用到 CSS reset 或者通过派生选择器去使用 div h1{}
4.通用选择器 杀伤力太大 一般不用
5.属性选择器
二 组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分隔，同时匹配元素E或元素F |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| E>F | 子元素选择器，用>分隔，匹配E元素的所有直接子元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F | 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
三 伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
N的取值
1.1，2，3，4，5
2.2n+1, 2n, 4n-1
3.odd, even
伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
CSS 背景
background 是CSS简写属性，用来集中设置各种背景属性。可以用来设置一个或多个属性:background-color
, background-image
, background-position
,background-repeat
, background-size
, background-attachment
。
background 属性值顺序
background属性的值的书写顺序官方并没有强制标准的。 为了可读性，定一个CSS书写规范，规则2.1：background:background-color|background-image|background-repeat|background-attachment |background-position(background 背景图片的优先级是大于背景颜色的，所以有背景图片的话，背景颜色是不起作用的).
默认值：transparent none repeat scroll 0% 0% (百分比是指宽度的百分比)
background-position :
1. 只写一个值 比如 background-position : left （center） 第二个值默认为center。默认值是(0% 0%).
2. 如果以百分比的形式来书写，background-position：10% 10%；是以DIV 为目标对象移动的。
3. 如果以像素来书写，background-position:0px 0px;（相对于包裹它的元素的偏移量）。
