选择器

伪元素

伪元素名称说明
::first-letter用来选择文本块的第一个字母,除非在同一行中包含一些其他元素。
::first-line用来匹配元素的第一行文本, 可以应用一些特殊的样式。
::before不是指存在于标记中的内容,而是可以插入额外内容的位置。
::after不是指存在于标记中的内容,而是可以插入额外内容的位置。
::selection用来匹配突出显示的文本。常用属性background | color

属性选择器

选择器说明
E[attr]选择匹配具有属性attr的E元素,其中E可以省略,表示选择定义了attr属性的任意类型元素。
E[attr=val]选择匹配具有属性attr的E元素,并且attr的属性值为val,同样E元素省略时表示选择定义了attr属性值为val的任意类型元素。
E[attr|=val]选择匹配E元素, 且E元素定义了属性attr, attr属性值是一个具有val或者以val- 开始的属性值, 常用于lang属性(例如 lang="en-us")
E[attr~=val]选择匹配E元素, 且E元素定义了属性attr, attr属性值具有多个空格分隔的值,其中一个值等于val。
E[attr*=val]选择匹配E元素, 且E元素定义了属性attr, 其属性值任意位置包含了 “val”。
E[attr^=val]选择匹配E元素, 且E元素定义了属性attr, 其属性值以val开头的任何字符串
E[attr$=val]选择匹配E元素, 且E元素定义了属性attr, 其属性值以val结尾的任何字符串

CSS3 边框

属性说明 语法及参数
border-width设置元素边框的粗细
border-color设置元素边框的颜色
border-style设置元素边框的类型
border-image设置元素边框的背景图片
border-radius设置元素边框的圆角效果
border-shadow设置元素边框的阴影box-shadow: none | [inset x-offset y-offset blur-radius spread-radius color], [inset x-offset y-offset blur-radius spread-radius color]

边框类型

属性说明示例代码效果
none定义无边框.elm{border: none}none
hidden与none相同,应用于表格时除外,对于表格,hidden用于解决边框冲突.elm{border:hidden;}hidden
dotted定义点状边框.elm{border:3px dotted red;}
dotted
dashed定义虚线边框.elm{border:3px dashed red;}
dashed
solid定义实线边框.elm{border:3px solid red;}
solid
double定义双线。 双线的宽度等于border-width的值.elm{border:3px double red;}
double
grovve定义3D凹槽边框,其效果取决于border-color的值.elm{border:3px groove red;}
groove
ridge定义3D垄状边框,其效果取决于border-color的值.elm{border:3px ridge red;}
ridge
inset定义3D inset边框,其效果取决于border-color的值.elm{border:3px inset red;}
inset
outset定义3D outset边框, 其效果取决于border-color的值.elm{border:3px outset red;}
outset
inherit继承父元素边框的样式

CSS 背景

属性说明语法
background-color设置元素的背景颜色backgroud-color: [color][rgb][hls][16进制]
background-image设置元素的背景图片background-image: none || url
background-repeat设置背景图片在元素中的铺放格式background-repeat: repeat || repeat-x || repeat-y || no-repeat
background-attachment设置背景图片是否固定或随着页面滚动background-attachment: scroll || fixed
background-position设置背景图片的位置background-position: % || length || [left | center | right] [, top | center | bottom]
background-origin设置绘制背景图片的起点(决定背景图片是边框,padding内外开始显示)background-origin: padding-box || border-box || content-box
background-clip设置背景图片的显示范围background-clip: border-box || padding-box || contnt-box || text
background-size设置背景图片的尺寸大小background-size: auto || length || % || cover || contain
background-break设置内联元素的背景图片进行平铺式的循环方式background-break: bounding-box || each-box || continuous:

从CSS3开始,设计师可以在单一容器中使用符合的背景图片了。CSS3的多背景语法和原来的语法基本没有变化, 只是在给容器添加的多背景之间必须使用逗号分开。

CSS 文本

属性说明语法
font-family定义字体的类型
font-style定义字体样式font-style: normal || italic || oblique
font-weight定义字体粗细 100~900font-weight: normal || bold || bolder || lighter
font-size-adjust定义是否强制对文本使用同一尺寸
font-stretch定义是否横向拉伸变形字体
font-variant定义字体大小写
font字体的复合型属性
word-spacing定义词与词之间的间距normal(默认值), length(设置词与词之间的距离值,可以为负数)
letter-spacing定义字符之间的间距normal(默认值), length(设置字符之间的间距,可以为负数)
vertical-align定义文本的垂直对齐方式baseline(默认值), sub(上标对齐), super(下标对齐), bottom(行框底端对齐), text-bottom(行内文本底端对齐), top(顶端对齐), middle(居中对齐), 百分比数字,长度
text-decoration定义文本的修饰线none(默认值), underline(下划线), overline(上划线), line-through(删除线)和blink(闪烁线)
text-indent定义文本首行缩进长度和百分比
text-align定义文本水平对齐方式left(左对齐), center(水平居中), right(右对齐), justify(两端对齐)
line-height定义文本行高normal(默认值), 长度, 百分比,数字
text-transform定义文本大小写normal(默认值), length(设置字符之间的间距,可以为负数)
text-shadow定义文本阴影效果text-shadow: 颜色 x轴 y轴 模糊半径, *
white-space定义文字之间和文本之间的空白符间距normal(默认值), nowrap(空白符合并,换行符忽略), pre(空白符,换行符保留), pre-wrap(空白符,换行符保留), pre-line(空白符合并,换行符保留)
direction控制文本流入的方向ltr(默认值), rtl(文本从右到左流入), inherit(文本流入方向由继承获得)
text-overflow控制文本溢出,截取字符串clip(裁切不显示省略标记...), ellipsis(文本溢出时显示省略标记)为了实现效果还需要white-space:nowrap; overflow:hidden;来配合
word-wrap实现长单词与URL地址的自动换行normal (默认值), break-word(将内容在边界内换行) pre 和 table中没有效果
word-break实现在恰当的断字点进行换行normal (默认值), break-all(强行截断单词), keep-all(不允许字断开)

CSS 颜色

属性说明语法
opacity设置元素的背景透明效果取值范围0 ~1 例如:opacity: 0.5

从CSS3开始,增加了RGBA, HSL, HSLA 颜色模式

  1. rgba(红色值, 绿色值, 蓝色值, 透明度)
  2. hsl(色调(-360~360), 饱和度(0~100%), 亮度(0~100%))
  3. hsla(色调(-360~360), 饱和度(0~100%), 亮度(0~100%), 透明度(0~1))

CSS 盒模型

伸缩流概念
属性说明语法
box-sizing设置盒模型属性content-box(默认值)|| border-box( 为元素设定的宽度和高度决定了元素的边框盒。固定好大小后,设置内边距,边框等都不会影响元素大小)|| inherit(继承父元素的盒模型模式)
overflow设置元素的溢出属性visible(默认值)|| auto(在需要时剪切内容并添加滚动条)|| hidden(内容溢出时,溢出部分将会被隐藏,不显示滚动条)|| scroll(不管内容是否溢出,都会显示滚动条)|| no-display(当内容溢出时不显示元素)|| no-content(当内容溢出时不显示内容)
overflow-x, overflow-y设置元素的溢出属性visible(默认值)|| auto(在需要时剪切内容并添加滚动条), hidden(内容溢出时,溢出部分将会被隐藏,不显示滚动条)|| scroll(不管内容是否溢出,都会显示滚动条)|| no-display(当内容溢出时不显示元素)|| no-content(当内容溢出时不显示内容)
resize设置用户是否可以调整元素尺寸none(用户不可以修改尺寸)|| both(用户可以拖动元素调整尺寸,高宽都可以调整)|| horizontal(用户可以调整元素的宽度)|| vertical(用户可以调整高度)|| inherit(继承父元素的resize值)
outline为元素设置轮廓线outline-color(颜色) outline-style(样式) outline-width(宽度) outline-offset(边框偏移)
display(box)伸缩流概念将元素设置为伸缩容器
display(inline-box)将元素设置为内联级伸缩容器
box-orient设置元素的伸缩流主轴horizontal(伸缩项目在容器中从左到右排列)|| vertical(伸缩项目在容器中从上到下排列) || inline-axis(伸缩项目沿着内联轴排列)|| block-axis(伸缩项目沿着块轴排列)
box-direction设置元素伸缩流方向normal(正常显示顺序)|| reverse(反向显示)
box-lines设置伸缩容器项目是单行还是多行显示single(伸缩容器一行或一列显示)|| multiple(伸缩容器多行或多列显示)
box-pack设置伸缩容器当前伸缩项目在主轴方向的对齐方式start(向一行的起始位置靠齐)|| end(向结束位置靠齐)|| center(向中间位置靠齐)|| justify(平均分布)
box-align设置伸缩容器的当前行的侧轴上的对齐方式start(伸缩项目的顶部边缘放置在伸缩项目容器的顶端)|| end(伸缩项目底部边缘放置在伸缩项目容器底端)|| center(伸缩项目紧靠在一起,垂直居中于伸缩容器)|| baseline(伸缩项目根据他们的基线对齐)|| stretch(伸缩项目填充整个伸缩容器)
box-flex控制伸缩项目在伸缩容器中的显示空间(溢出部分,或是多余部分调整比例)数值(整数或小数)
box-ordinal-group设置伸缩项目在页面中的显示顺序数值(排序顺序)
display(flexbox || inline-flexbox)混合版Flexbox模型flexbox(设置元素为块级伸缩容器 ) || inline-flexbox(设置元素为内联块伸缩容器)
flex-direction设置元素的伸缩布局主轴row(默认值)|| row-reverse(伸缩项目从右向左排列)|| column(伸缩项目按照从上到下的顺序排列)|| column-reverse(伸缩项目从下到上排列)
flex-wrap设置溢出伸缩容器的伸缩项目自动换行到下一行或下一列nowrap(默认值)|| wrap(伸缩容器无法容纳时自动换行换列)|| wrap-reverse(伸缩容器无法容纳时,反方向自动换行换列)
flex-flow设置伸缩布局中伸缩流方向与伸缩项目的换行(flex-direction和flex-wrap的简写版本)flex-flow: flex-direction | flex-wrap
flex-pack设置伸缩容器当前伸缩项目在主轴方向的对齐方式start(向一行的起始位置靠齐)|| end(向结束位置靠齐)|| center(向中间位置靠齐)|| justify(平均分布)|| distribute(伸缩项目平均分布在同一行里)
flex-align设置伸缩容器的当前行的侧轴上的对齐方式start(伸缩项目的顶部边缘放置在伸缩项目容器的顶端)|| end(伸缩项目底部边缘放置在伸缩项目容器底端)|| center(伸缩项目紧靠在一起,垂直居中于伸缩容器)|| baseline(伸缩项目根据他们的基线对齐)|| stretch(伸缩项目填充整个伸缩容器)
flex-line-pack由于技术内容至今未实现停止说明

CSS3 多列布局

属性说明语法
columns复合属性设置多列布局的列宽及列数column-width(定义列宽)|| column-count(定义列的个数)
column-width定义列的宽度auto(默认值), length(固定值来设定列的宽度)
column-count指定元素想要的列数和允许的最大列数auto(默认值)| 数值(正整数,定义元素的列数)
column-gap设置元素分列的列间距normal(默认值)| length(数字和单位组成的长度值)
column-rule设置列与列之间额边框宽度,样式及颜色column-rule-width(边框的宽度)| column-rule-style(边框的样式)| column-rule-color(边框的颜色)
column-span设置跨列元素和跨多少列none(默认值)| all(元素跨所有列)
column-fill设置多列中的每一列的高度是否统一auto(默认值)| balance(各列的高度会根据内容最多的一列的高度进行统一)

CSS3 渐变

属性说明语法
linear-gradient设置线性渐变起点(关键字【to top | to left | to bottom | to right | to top left | ...】或deg【度】), 起点颜色, | 【多色】| 终点颜色
radial-gradient设置径向渐变shape(定义径向渐变的形状circle | ellipse), position(定义径向渐变的圆心位置length | % | left |center ... 如: 圆心位置在200px, 150px 半径为 50px. 150px 写法为 50px 150px at 200px 150px, 颜色), size(定义结束形状的大小 closest-side | closest-corner | farthest-side | farthest-corner), color-stop(渐变线上的停止颜色)
repeating-linear-gradient重复线性渐变语法参数如linear-gradient
repeating-radial-gradient重复径向渐变语法参数如radial-gradient

CSS3 变形

属性说明语法
transform让元素在一个坐标系统中变形,包含一系列变形函数,可以移动,旋转和缩放元素none(默认值)| transform-function
transform-origin指定元素的中心点位置% | length | left | center | right | top | bottom (x轴, Y轴, z轴)
transform-style3D空间中的重要属性,指定嵌套元素如何在3D空间中呈现flat(默认值所有子元素在2D平面呈现), preserve-3d(所有子元素在3D空间中呈现)
perspective设置视距none | 数值
perspective-origin决定perspective属性的源点角度% | length | left | center | right | top | bottom
backface-visibility决定元素旋转背面是否可见visible(默认值,反面可见)| hidden(反面不可见)

transform-function的函数

函数说明语法
translate()移动元素, 可以根据X轴和Y轴坐标重新定位元素位置扩展函数 translateX() , translateY()
scale()缩小或放大元素扩展函数 scaleX(), scaleY()
rotate()旋转元素
skew()倾斜元素扩展函数 skewX() , skewY()
matrix()定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置
translate3d()移动元素,用来指定一个3D变形移动位移量
translateZ()指定3D位移在Z轴的位移量
scale3d()缩放一个元素
scaleZ()指定Z轴的缩放量
rotate3d()指定元素具有一个三维旋转的角度
perspective()指定一个透视投影矩阵
matrix3d()定义矩阵变形

CSS3 过度

属性说明语法
transition复合属性,创建CSS3动画过渡transition-property(指定过渡或动态模拟的CSS属性) transition-duration(指定完成过度所需要的时间) transition-timing-function(指定过渡函数[ease 由快到慢, linear 始终恒速, ease-in 速度逐渐加速, ease-out 速度逐渐减速, ease-in-out 加速再减速]) transition-delay(指定过渡开始出现的延迟时间)

CSS3 动画

animation属性通过@keyframes构建一些transition的动画效果, animation属于复合属性,它包含众多的子属性

属性说明
animation-name指定一个关键帧动画的名字,这个动画名称必须对应一个@keyframes规则
animation-duration设置动画播放所需的时间,单位为秒
animation-timing-function设置动画的播放方式。ease | linear | ease-in ...
animation-delay指定动画开始时间,单位为秒(延迟,提前)
animation-iteration-count指定动画播放的循环次数(infinite无限循环)
animation-direction制定动画的播放方向 normal(向前播放)| alternate(偶数向前播,奇数反方向播放)|
animation-play-state控制动画的播放状态 running(播放)| paused(暂停)
animation-fill-mode设置动画的时间外属性 none(按预期进行和结束)forwards(动画结束后继续应用最后关键帧的位置) backwards(向元素应用动画样式时迅速应用动画的初始帧) both (同时具有forwards和 backwards效果)

animation-name: moveten; aniamtion-duration: 1s; animation-time-function: steps(10, end); animation-iteration-count: infinite; animation-direction: alternate; animation-delay: 3s; animation-fill-mode: backwards

@keyframes的语法
命名是由@keyframes开头,后面紧跟着 动画的名称 加上一对花括号"{....}",括号中是不同时间段的样式规则。多由百分比组成,也可以由frome to组合创建动画属性