CSS (1)

CSS 字体注意事项

1. 普遍14px
2. 尽量用偶数字号，老式浏览器奇数会有bug
3. 字体之间用逗号隔开
4. 中文字体需要加引号，英文字体必须位于中文字体之前
5. 字体名中包括空格，$等符号，则该字体必须加引号

font-weight （粗细）

400：normal 700：bold

font-style

normal italic

（斜体标签 <em> <i> ）

font综合

{font： font-style font-weight font-size/line-height font-family;}

按顺序写

size和family 必须有

链接伪类选择器

顺序：link visited hover active

标签选择器层级一致的时候,从上往下,以下边的为准

a:link必须写了href内容才会在Chrome和Firefox显示

结构伪类选择器

:first-child

:last-child

:nth-child(n) n可以为even和odd 或者2n、2n+1之类的

:nth-last-child(n) 与之前不同的是从最后一个元素开始

目标伪类选择器

选取当前活动的目标元素

:target{
    color:red;
}

优先级

!important > 行内样式>ID选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS specificity

计算贡献值，用四个位的字串表示，从左到右级别递减，没有进位，级别不可跨越

继承或*： 0000

标签：0001

类、伪类：0010

ID：0100

行内：1000

权重可叠加

首行缩进

一般用 em，1em是一个字的宽度，汉字段落就是1个汉字的宽度

text-indent：2em;

CSS3 文字半透明

color:rgba(r,g,b,a); /*a是alpha 取值范围0-1，1不透明*/

CSS3 文字阴影

text-shadow: 水平位置 垂直位置 (模糊距离 即影子虚实) (颜色);

伪元素选择器（双冒号）

p::first-letter

选第一个字

p::first-line

选第一行

p::selection {
    color: pink;
}

按住鼠标拖动，选中的文本

div::before {
    content: "";
}
div::after {
    content: "";
}

盒子内部在头和尾添加文本

调整背景图片在盒子中位置

background-position: ;

可以用两个方位名词去指定，如 left top；

如果只写了一个方位名词，则另一个默认center

也可以用坐标位置调整，如 10px, 30px; 第一个是x坐标，第二个是y坐标

CSS3 背景半透明

div {
    background: rgba(0, 0, 0, 0.5);
}

背景图缩放

设置大小：background-size: 宽 高; 设置一个宽就好了，另一个会等比缩放

设置为 background-size: cover; 自动等比缩放填满区域，可能会超过而缺失一部分

设置为 background-size: contain; 自动等比缩放，但如果继续缩放会超过区域，则停止

多张背景图

可设置多组background，但如果重叠，前一张会覆盖后一张。所以背景色设置在最后一组。

文本装饰

text-decoration: ;

none underline overline line-through

CSS 继承

字体、字号、颜色、行距等文字类属性有继承性、元素可见性：visibility

不具有继承性：边框、盒子模型的属性、背景、定位、元素高属性、display、vertical-align、text-decoration、 text-shadow、white-space