///施工中///

选择器

选择器可以合并，要合并的选择器之间用逗号隔开。

通用选择器

1
2
3
4
*
{
    属性:值;
}

元素选择器

1
2
3
4
p
{
    属性:值;
}

id选择器

1
2
3
4
#elementid
{
    属性:值;
}

类选择器

1
2
3
4
5
6
7
8
9
10
/*选择单个类*/
元素名.类名
{
    属性:值;
}
/*选择同时为多个类的元素*/
元素名.类名A.类名B
{
    属性:值;
}

组合选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*选择元素A的所有后代中的元素B*/
元素A 元素B
{
    属性:值;
}
/*选择元素A的儿子中的元素B*/
元素A > 元素B
{
    属性:值;
}
/*选择与元素A同级且邻接的元素B*/
元素A + 元素B
{
    属性:值;
}
/*选择与元素A同级，且在其之后的元素B*/
元素A ~ 元素B
{
    属性:值;
}

伪类选择器

1
2
3
4
元素:伪类
{
    属性:值;
}

伪元素选择器

1
2
3
4
元素::伪元素
{
    属性:值;
}

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*选择设置了指定属性的元素*/
元素[属性]
{
    属性:值;
}
/*选择设置了指定属性及其值的元素*/
元素[属性="值"]
{
    属性:值;
}
/*选择设置了指定属性，且该属性包含指定值的元素*/
元素[属性~="值"]
{
    属性:值;
}
/*同上，但值不一定是完整单词*/
元素[属性*="值"]
{
    属性:值;
}
/*选择设置了指定属性，且以指定值开头的元素*/
元素[属性|="值"]
{
    属性:值;
}
/*同上，但值不一定是完整单词*/
元素[属性^="值"]
{
    属性:值;
}
/*同上，但是以指定值结尾*/
元素[属性$="值"]
{
    属性:值;
}

属性

资源的引用方式：

1
url("资源路径")

背景

背景的简写格式：

1
2
3
4
body
{
    background: background-color background-image background-repeat background-attachment background-position;
}

background-color,background-image 指定元素背景；
background-repeat 设置背景重复方式；
background-position 指定背景图像位置，接受预设参数或x，y两个参数；
background-attachment 指定背景是否固定；
background-size 设定背景尺寸，单参数时保留宽高比缩放宽度；
background-origin 指定背景的开始定位盒子；
background-clip 设定背景的绘制盒子。
背景可以有多个图片，上述属性可接受多个参数，第一个图片是最上层图层，依次设置即可。
opacity 指定整个元素的不透明度。
对 background-image ，可以赋值 linear-gradient 设置渐变：

1
linear-gradient(方向/角度（0deg=to top）,颜色A,颜色B (颜色B比例),...)

也可以用 repeating-linear-gradient 设置重复线性渐变；
可以赋值 radial-gradient 设置径向渐变：

1
radial-gradient(渐变形状 渐变结束位置 at 渐变中心x 渐变中心y,颜色A,颜色B (颜色B比例),...)

同理可用 repeating-radial-gradient 设置重复径向渐变。
box-shadow 设定整个元素的阴影，用法与 text-shadow 一致。

边框

边框的简写格式：

1
2
3
4
p
{
    border: border-width border-style border-color;
}

其中的 border 也可为 border-left 等。
当处理不同数目的参数时：

  • 一个参数：全部应用；
  • 两个参数：先上下再左右；
  • 三个参数：先上，再下，最后左右；
  • 四个参数：由上开始，顺时针遍历。

border-style 指定边框形式，是边框的必需项；
border-width 设定边框厚度；
border-color 设定边框颜色；
border-radius 设定边框圆角半径。
也可以用图像设置边框，这时把 border-color 设为 transparent ：

1
2
3
4
5
p
{
    border: 10px solid transparent;
    border-image: url("border.png") 10 round;
}

边距

设定的边距会拓展原有的宽高。

外边距 margin

在普通文档流的垂直外边距中，当外边距相邻接（或元素包含）时，邻接的边距会发生合并，合并后的边距取二者的最大值。
margin 具有和 border 相同的赋值方式。
设定为 auto 时，令该元素在父容器中水平居中；
设定为 inherit 时，该元素的 margin 继承自父元素。

内边距 padding

padding 也有与 border 相同的赋值方式。
与 margin 一致，padding 可以运用 inherit，但 auto 无效。
当进行如下设定时，padding不会影响元素的预设宽高：

1
2
3
4
div
{
    box-sizing:border-box;
}

宽高

width 和 height 分别用于设定元素宽高；
如此设定的宽高不包括边距。
也可以用 max-width 和 max-height / min-width 和 min-height 指定最大/最小宽高并覆盖前两项。

轮廓

轮廓的简写格式：

1
2
3
4
p
{
    outline: outline-width outline-style outline-color;
}

outline 具有与 border 相同的简写属性及其必要性，且从边框向外绘制，但其不影响元素的宽高。
outline-offset 设定轮廓与边框间的距离。

文本

color 设定文本颜色；
text-align 指定块内文本（水平）对齐方式；
vertical-align 设定行内元素（垂直）对齐方式；
direction 指定文本方向；
text-decoration 设置文本装饰；
text-shadow 用于给文本添加阴影，可以设定多个阴影，格式如下：

1
2
3
4
p
{
    text-shadow: 水平大小 垂直大小 模糊大小 阴影颜色;
}

text-transform 批量转换文本字母；
text-indent 指定文本首行缩进；
letter-spacing 指定文本字符间距（0为标准）；
line-height 指定行距；
white-space 指定元素内部空白的处理方法；
text-overflow 指定溢出文本的处理方法；
word-wrap 使长单词强制换行以适应容器；
word-break 指定换行规则；
writing-mode 指定文本书写方法。

字体

字体的简写格式：

1
2
3
4
p
{
    font: font-style font-variant font-weight font-size line-height font-family
}

font-family 指定文本字体，可接受多个参数，参数之间用逗号隔开，多单词参数用双引号括起来：

1
2
3
4
p
{
    font-family: "Times New Roman",Times,serif;
}

font-style 指定斜体文本；
font-weight 指定字体粗细；
font-variant 指定字体显示是否为小型大写字母；
font-size 设置字体大小。

链接

链接的四个常用伪类：

  1. a:link 未访问链接；
  2. a:visited 已访问的链接；
  3. a:hover 鼠标悬停的链接；
  4. a:active 被点击的链接。

列表

列表的简写格式：

1
2
3
4
ul
{
    list-style: list-style-type list-style-position list-style-image;
}

list-style-type 用于指定列表项标记的类型，对有无序列表有分别的支持；
list-style-image 将图像作为列表项标记；
list-style-position 指定列表项标记位置。

表格

HTML中的表格不自带边框，表格边框也具有和 border 相同的赋值方式，对 table， th，td 分别赋值。
对 table ：
border-collapse 指定边框是否融合。
对 th，td ：
text-align 设定单元格内容水平对齐方式；
vertical-align 设定单元格内容垂直对齐方式；
padding 设定单元格内容与边框距离。
对 tr ：
tr:hover 伪类为鼠标悬停时的表格行；
tr:nth-child(even) 伪类及其参数为所有偶数行。

布局控制

display 用于修改默认布局方式：

  • block 设置为块级；
  • inline 设置为行内；
  • none 从布局中删除元素；
  • inline-block 取消行内元素对宽高设置的无视。

visibility 仅用于修改可见性，不影响布局；
position 指定元素的定位方法，与 top，bottom，right，left 一起使用；
z-index 指定元素的图层关系，当 position 不为 static 时才起作用；
overflow 用于指定内容过多时的处理方式，overflow-x 和 overflow-y 分别指定对左右/上下溢出时的处理方式；
float 指定元素的水平浮动方式，与 position 不同，float 并不会使元素完全脱离文档流；
clear 指定该元素要避开哪些浮动元素，并从此元素开始清除对应的浮动；
用 clearfix 解决元素浮动后父容器高度塌陷：

1
2
3
4
5
6
7
/*在父容器应用clearfix类*/
.clearfix
{
    content:"";
    clear:both;
    display:table;
}

计数器

counter-reset 创建或重置一个计数器变量，同名计数器变量在不同作用域下可以有不同值；
counter-increment 给对应计数器+1；
counter(变量名) 获取单个计数器的值；
counters(变量名,连接符,可选样式) 获取自底向上的所有同名计数器值并用连接符连接；
content 添加预设内容。

transform

2D transform

translate() 接受x，y两个参数，将整个元素向右/下移动对应距离；
rotate() 接受一个角度，旋转整个元素；
scale() 接受两个参数，将整个元素的长/宽拉伸缩放到原来的几倍;
skew() 接受两个角度，按轴线拉伸整个元素。
martix() 组合了 scale() ， skew() ， translate()：

1
transform: martix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());

3D transform

规则

特异性

选择器具有特异性，高特异性的选择器优先应用。
行内样式 <style> 具有最高特异性；
对同一选择器：

  • 若有一个id，特异性+100；
  • 每有一个类/属性/伪类，特异性+10；
  • 每有一个元素名/伪元素名，特异性+1。
    特异性的比较自左向右，直到遇到第一个不一样的值为止。

!important

在属性的最后一个值后添加 !important 进行覆写，多个 !important 采用特异性最高的一个。

字体自定义

使用 @font-face 设置自定义字体后，在其它元素中用 font-family 指定字体：

1
2
3
4
5
6
@font-face
{
    font-family:我的自定义字体;
    /*font-weight: bold*/
    src: url("字体路径");
}

同一自定义字体可以设置多条规则适应不同情况。