CSS3

CSS3

---

一、概念

Cascading Style Sheets 层叠样式表，用来展现HTML、XHTML的页面标签的外观风格

二、CSS的作用

用来美化页面元素 - 美化外观
用来布局页面元素 - 布局定位
用来实现内容和外观的分离 - 方便维护和修改

三、CSS三种基础选择器

3.1 选择器分类

元素选择器：用于设置相同标签的共性风格
类选择器：用于设置不同标签的共性风格
ID选择器：用于设置特定元素的风格（因为id选择器的权重过高，尽量少用甚至不用）

3.2 选择器优先级

ID选择器 > 类选择器 > 元素选择器
同样优先级的选择器选中同样的目标，后面的会覆盖前面的

四、CSS样式属性

4.1 字体

font-size 字体大小

单位	说明
px	绝对单位，像素
em	相对单位，基准点为父节点字体大小，如果自身定义了font-size，按自身来计算
rem	相对单位，基准点为html字体的大小
%	相对单位，基准点为父节点对应属性的大小

font-weight 字体粗细

可选值	说明
normal 400	默认值，定义标准的字体
bold 700	粗体
bolder	更粗的字体
lighter	更细的字体

font-style 字体风格

可选值	说明
normal	正常字体
italic	斜体(使用字体本身的斜体)
oblique	倾斜字体(强制倾斜)

font 字体所有属性

示例：font: italic bold 24px Consolas,'宋体',sans-serif;
顺序不能调整

4.2 文本

color 文本颜色

可选值	样例
系统自带值	如：red、blue等
十六进制	如：#fff为白 #000为黑
rgb	如：rgb(0,0,0) 为黑色 三个值分别对应红、绿、蓝，取值为0~255
rgba	如：rgb(0,0,0,0) 相较于rgb多了一个alpha透明度，取值为0~1

text-align 文本水平对齐方式

可选值	说明
left	默认值 文本左对齐
right	文本右对齐
center	居中
justify	将最后一行以上的文本两端对齐

text-decoration 文本修饰线
可选值 | 说明
none | 默认值
无
underline | 下划线
overline | 上划线
line-through | 删除线
text-indent 文本缩进

示例：text-indent:2em;
所有单位都可以使用，但一般只使用em表示缩进几个字的宽度

line-hei|ght 文本行高

示例：line-height:1.5em;
所有单位都可以使用，但一般使用em，一般默认为1.35em，推荐使用1.5em

vertical-align 行级元素垂直方向对齐线

可选值	说明
baseline	基线
top	顶部
middle	中线
bottom	底部

white-space 文本卷行处理方式

可选值	说明
normal	默认值 换行，空白会被浏览器略过
nowrap	强制不换行，直到遭遇<br/>

text-overflow 文本溢出处理方式

示例：text-overflow:ellipsis;
多余文本使用省略号显示

五、常用伪类样式

** :hover**

鼠标悬停在元素上的效果

** :active**

元素处于激活状态时的效果（单击未释放的超链接样式）

** :focus**

元素获得焦点时

** ::placeholder**

输入框提示文本

** ::before**

在元素内部的最前面添加一个文本节点

p::before {
	content: '';
}

** ::after**

在元素内部的最后面添加一个文本节点

p::after {
	content: '';
	display: 'block';
	clear:both;
}

六、尺寸属性

1. width
2. min-width
3. max-width
4. height
5. min-height
6. max-height

尺寸属性只对块级元素及行块级元素起效果
对行级元素无效

补充尺寸单位

单位	说明
vw	可视区域宽度 100vw代表一个可视区的宽度
vh	可视区域高度 100vw代表一个可视区的高度

七、显示属性

设置元素的显示布局方式

值	说明
block	块级元素显示方式
inline	行级元素显示方式
inline-block	行块级元素显示方式 显示为行级，但具有盒子模型特性
flex	弹性布局
none	不显示

八、背景属性

background-color 背景颜色

可选值和color属性一致
特殊值：transparent 默认值，透明

background-image 设置背景图像

示例：background-image:url('./img/bg.jpg');
相对地址为css文件的地址

background-repeat 背景平铺方式

常用值	说明
repeat	沿水平和垂直两个方向平铺 如果图片过大会自动裁切 如果太小会复制
no-repeat	不平铺
repeat-x	只沿水平方向平铺
repeat-y	只沿垂直方向平铺

background-position 背景偏移值或位置

可使用此功能实现大图片裁切小图片的功能

background 复合属性

background: #000 url("") 205px 10px no-repeat
顺序可调整

opacity 透明度

0~1
0表示完全透明
1表示完全显示

九、盒子模型

盒子模型结构：

content 内容
border 边框
padding 内边距
margin 外边距

border-color 边框颜色
border-width 边框宽度
border-style 边框样式

可选值	说明
none	无边框
hidden	隐藏
dotted	点线
dashed	虚线
solid	实线

border 边框复合属性
padding 内边距
margin 外间距

可利用margin设置块级元素居中显示

margin-left: auto;
margin-right: auto;

以上的属性都可以单独设置某个方向

十、CSS3 新特性

text-shadow 文本阴影效果
text-shadow: none | <length> <length> <length> <color>[,<more-shadow>];

第一个：用于设置元素的阴影水平偏移值，可以为负值
第二个：用于设置元素的阴影垂直偏移值，可以为负值
第三个：用于设置元素的阴影模糊值，不可以为负值
color：用于设置阴影的颜色
常用的尺寸单位：px，em，rem
more-shadow是多个阴影的意思，需要用逗号进行分隔

box-shadow 边框阴影
box-shadow: none | <length> <length> <length> <length> <color> inset[,<more-shadow>];

第一个length：用于设置元素的阴影水平偏移值，可以为负值
第二个length：用于设置元素的阴影垂直偏移值，可以为负值
第三个length：用于设置元素的阴影模糊值，不可以为负值
第四个length：用于设置元素的阴影外延值，不可以为负值，可以省略
color：用于设置阴影的颜色
inset：用于设置阴影为内阴影，可以省略，若省略则为外阴影
常用单位：px、em、rem
more-shadow是多个阴影的意思，需要用逗号隔开

border-radius 边框圆角
border-radius: <length>;

• 第一个length：用于设定水平半径，一共4个参数，参数数量可以是1个、2个、3个、4个
  • 若只有1个参数，那么数值作用于4个角
  • 若只有2个参数，那么第一个作用于上左、下右，第二个作用于上右、下左
  • 若只有3个参数，那么第一个作用于上左，第二个作用于上右、下左，第三个作用于右下
  • 若有4个参数，那么分别作用于上左、上右、下右、下左
  • 常用单位：px、em、rem、%
  • 第二个length：用于设定垂直半径，可以省略，若省略，大小与水平半径一致（一般都不会设置）

background-size 背景图大小
background-size: auto | cover | contain | <length>;

默认值为auto
cover：设定背景图像等比缩放到完全覆盖容器，背景图像可能超出容器（图片显示不全）
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

linear-gradient 背景颜色线性渐变
linear-gradient(position,color1,color2,...);

• position：设定渐变的角度，以deg为单位。也可以设置预设的方向值（默认to bottom）
  • to bottom:从上至下
  • to left：从右至左
  • to right：从左至右
  • to top left：从右下至左上
  • to top right：从左下至右上
  • to bottom left：从右上至左下
  • to bottom right：从坐上至右下
• color1：起点颜色
• color2等等：中间以及终点颜色

渐变色参考网址

box-sizing 盒子模型
box-sizing: content-box | border-box | inherit;

content-box：默认值 盒子的实际占位宽度 = 左右外边距 + 左右边框宽度 + 左右内边距（填充宽度） + 内容宽度
border-box：盒子的宽度或高度等于元素内容的宽度或高度。（盒子的实际占位宽度 = 左右外边距 + width；盒子的实际占位高度 = 上下外边距 + height）
inherit: 此值使元素继承父元素的盒子模型模式

transform 2D变换

translate 位移
scale 缩放
rotate 旋转

transition 过渡效果

其是一个复合属性：transition: [transition-property transition-duration transition-timing-function transition-delay]
transition-property 过渡属性

可用逗号间隔选中多个，但如果多个中有transform，则无效

transition-duration 过渡时间
transition-timing-function 过渡动画函数

可选值	说明
ease	默认值 渐慢
linear	匀速
ease-in	渐快
ease-out	渐慢
ease-in-out	由慢到快再到慢

transition-delay 过渡延迟时间

正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断（用的少，甚至不用）
0：默认值，元素过渡效果立即执行

animation 动画

@keyframes IDENT {
    from {/*CSS样式写在这里*/}
    percentage {/*CSS样式写在这里*/}
    to {/*CSS样式写在这里*/}
}

@keyframes IDENT {
    0% {/*CSS样式写在这里*/}
    percentage {/*CSS样式写在这里*/}
    100% {/*CSS样式写在这里*/}
}

IDENT是一个动画名称，可以取一个任意定义的动画名称，当然语义化一点会更好，使用小写，单词之间使用-分割

animation 属性

animation-name 动画名称
animation-duration 持续时间
animation-delay 延迟时间
animation-iteration-count 播放次数

可选值	说明
数字	次数
infinite	无限次

animation-direction 播放方向

可选值	说明
normal	正常播放
alternate	反向播放

animation-play-state 设定动画的状态为运行/暂停（由CSS来控制）

可选值	说明
paused	暂停
running	播放

animation-fill-mode 播放前后 动画效果是否可见

可选值	说明
none	默认值
forwards	动画完成后，保持最后一个属性值
backwards	保留动画显示前delay所指定的时间内值
both	向前和向后填充模式都被应用

animation-timing-function 设定动画速度曲线

可选值	说明
ease	默认值 渐慢
linear	匀速
ease-in	渐快
ease-out	渐慢
ease-in-out	由慢到快再到慢
steps(n,start)	使用阶跃函数设定帧的过渡效果

十一、高级选择器

关系选择器

E F 包含选择器
E>F 包含选择器
E+F 相邻选择器
E~F 兄弟选择器

属性选择器

E[attr] 具有attr属性的E元素
E[attr=val] attr属性等于val的E元素
E[attr=val] attr属性包含val的E元素*
E[attr^=val] attr属性开头为val的E元素
E[attr$=val] attr属性结尾为val的E元素

伪类选择器

** seleter:first-child 第一个子元素**
** seleter:last-child 最后一个子元素**
** seleter:nth-child(n) 第n个子元素**
** seleter:first-of-type 既是第一个子元素 又符合前面选择器**
** seleter:last-of-type 既是最后一个元素 又符合前面选择器**
** seleter:nth-of-type(n) 既是第n个子元素 又符合前面选择器**

选择器权重比较规则

第一等：代表内联样式，如: style=””，权值为1,0,0,0
第二等：代表ID选择器，如：#content，权值为0,1,0,0
第三等：代表类，伪类和属性选择器，如.content，权值为0,0,1,0
第四等：代表元素和伪元素选择器如div p，权值为0,0,0,1
通配符、子选择器、相邻选择器等如*、>、+,权值为0,0,0,0
继承的样式没有权值
!important为强制优先（破坏权重，慎用）

十二、字体图标

其底层是一个字体，其内部不是英文或者中文，而是一个个小图标
我们可以通过名称，来获取对应的图标
因为其本质是字体，因此我们可以通过font-size控制大小、color控制颜色等
通常我们使用i标签来实现字体图标
常用的字体图标FontAwesome地址