CSS 3
CSS 3基础
概述
-
用途
用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面布局和外观显示样式，美化HTML，布局网页
-
内容及模块
盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
-
新增特性
新增CSS选择器、新增颜色制式和透明设置、新增多栏布局、新增多背景设置、新增文字阴影效果、新增网络字体类型模块、新增圆角模块、新增边框背景图片、新增盒子阴影、新增媒体查询等
-
基本语法
selector{ declaration1; declaration2; …… property:value }由选择器（执行某一任务样式规则的部分）和一条或多条声明构成
选择器通常是需改变样式的HTML元素
每条声明由一个属性和一个值组成。
select{property:value}CSS对大小写不敏感，但对class和id名称大小写敏感
CSS 3选择器
基本选择器
元素选择器
-
又称标签选择器
-
用HTML标签名称作为选择器
-
语法
Element{ property1:value1; property2:value2; }快速为页面中同类型的标签统一设置样式;
不能设计差异化样式，仅能选择全部相同标签;
id选择器
-
选择出特定id的任意类型的HTML元素
-
语法
<标签名 id="id名"></标签名>#id{ property1:value1; property2:value2; }样式
#定义，结构id调用，仅能使用一次
类选择器
-
选择出特定class属性值的任意类型的多个HTML元素
-
语法
<标签名 class="类名1 类名2"></标签名>.class1{ property1:value1; } .class2{ property2:value2; }样式
.定义，结构class调用，一个或多个； -
区别
类选择器可以被多次使用，被多个标签使用；
id选择器仅能使用一次，被一个标签使用；
分组选择器
-
选择多个选择器匹配的元素
-
语法
selector,selector2,…,selectorN{ property1:value1; }
通配选择器(*选择器)
-
选择所有HTML元素
-
语法
*{ property1:value1; }不需要调用，自动给所有元素使用样式；
层次选择器
后代选择器
-
可以选择某元素后代的元素
-
语法
Element1 Element2{ property1:value1; property2:value2; }选择元素1里面的所有元素2（后代元素）；
样式
(空格)定义；元素1是父级，元素2是子级，最终选择的是元素2；
元素2是元素1的后代即可；
可以任意的基础选择器；
子选择器
-
选择作为某元素的最近一级子元素
-
语法
Element1>Element2{ property1:value1; }只选择子元素
样式
>定义；元素1是父级，元素2是子级，最终选择的是元素2；
元素2是元素的最近一级子代；
相邻兄弟选择器
-
选择紧接着另一元素后的元素（二者有相同的父亲）
-
语法
Element1+Element2{ property1:value1; }
通用选择器
-
选择所有相同父元素中位于元素1后的所有元素2
-
语法
Element1~Element2{ property1:value1; }主流浏览器都支持通用选择器，但IE8中需要声明
<!DOCTYPE>
伪类选择器
动态伪类选择器
-
E:link–链接伪类选择器，选择所有未被访问的链接-
语法
a:link { property1:value1; }
-
-
E:visited–链接伪类选择器，选择所有已被访问的链接-
语法
a:visited { property1:value1; }
-
-
E:hover–用户行为伪类选择器，选择鼠标指针位于其上的链接-
语法
a:hover { property1:value1; }
-
-
E:active–用户行为伪类选择器，选择活动链接（鼠标按下未弹起的链接）-
语法
a:active{ property1:value1; }
-
-
E:focus–用户行为伪类选择器，选取获得焦点（光标）的表单元素-
语法
input:focus{ property1:value1; }
-
UI元素伪类选择器
E:checked–选择用户界面处于被选中状态的元素EE:enabled–选择用户界面处于可用状态的元素EE:disabled–选择用户界面处于被禁用状态的元素E
目标伪类选择器
结构伪类选择器
属性选择器
伪元素选择器
CSS 高级特性
层叠性
-
解决问题
层叠性解决相同选择器下相同样式覆盖冲突的问题
-
遵循原则
j就近原则，离结构近的样式被执行；
继承性
-
简述
-
可继承内容
-
样式继承
text-类，font-类，line-类及color类 -
行高继承
可以继承原数值，也可以继承原数值的倍数；
-
-
优点
简化代码，降低CSS样式的复杂性
优先性
-
解决问题
对同一个元素指定多个选择器，就会产生哪个选择器优先的问题
-
原则
选择器相同，遵从层叠性，执行就近选择器；选择器不同，执行高权重的选择器
-
选择器权重
选择器 选择器权重 继承或* 0,0,0,0 元素选择器，伪元素选择器 0,0,0,1 类选择器，属性选择器，伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式，即 style=""1,0,0,0 !important∞ 权重计算
- 无进位情况；
- 从左向右比较；
- 继承父类的子类权重永远为0；
权重叠加
对于复合选择器需要进行权重叠加才能计算权重
CSS 3字体、文本与颜色设置
字体
-
字体样式属性
属性 允许取值 描述 font-size字号大小?em或?pxem表示相对于当前对象内文本的字体尺寸；px表示像素 font-family字体字体?font-weight字体粗细normal或border或ligthter或数值100~900标准字体粗细；粗体；更粗体；更细体；100~900，由粗到细，400=normal font-style字体风格normal或italic或oblique标准字体；斜体；倾斜 word-wrap长单词或URL自动换行normal或break-word允许断点处换行；自动换行 字体复合属性：
font: font-style font-weight font-size/line-height font-family; -
字体属性复写
-
以
font属性对字体样式进行综合 -
语法
font: font-style font-weight font-size/line-height font-family;属性顺序固定，各个属性用空格隔开，必须保留
font-size和font-family属性
-
-
web字体图标——font-awesome的应用
-
解决字体使用图片模式交互带来的不便，采用图标字体化方式。
-
步骤
-
下载font-awesome并解压
font-awesome.min.css文件，拷贝到项目中 -
使用
<link rel="stylesheet" href="css/font-awesome.min.css"> <i class="">
-
-
文本
-
文本样式属性
属性 值 描述 text-indent ?px或?em检索或设置对象中的文本缩进 line-height ?pm检索或设置对象的行高，即字体最底端与字体内部顶端之间的距离 text-decoration none或underline或overline或line-through无装饰线（默认）；下划线；上划线；删除线 letter-spacing ?px检索或设置对象中文字之间的间隔，即字母间距 word-spacing ?px检索或设置对象中单词之间插入的空格数 white-space nowrap检索或设置对象内空格的处理方式； normal，为默认值，表示自动换行；nowrap表示禁止换行direction 检索或设置文本流的方向 vertical-align baseline或top或middle或bottom检索或设置对象内容的垂直对齐方式； baseline，默认，元素放置在父级元素的基线上；top，把元素的顶端与行中最高元素顶端对齐；middle，把此元素放置在父级元素的中部；bottom，把元素顶端与行中最低元素顶部对齐；- em，表示相对当前元素的文字大小；
- 行间距=上间距+文本高度+下间距；
颜色
-
预定义颜色
color:colorWord; -
十六进制颜色
color:#000000~#ffffff; -
RGB颜色
color: rgb(red,green,blue); -
RGBA颜色
color:rgba(red,green,blue,alpha);
CSS 3新增内容
字体
颜色
- @font-face规则
- 多列布局
- 新增的字体和颜色属性
CSS 3边框与背景设置
边框设置
包含属性：边框颜色、边框图片、圆角边框、边框样式、边框阴影
| 属性 | 值 | 描述 |
|---|---|---|
| border-width | thin或medium或thick或?px | 四条边框粗细；thin=1px；medium=3px；thick=5px |
| border-color | 预设值；十六进制；RGB；RGBA | 四条边框颜色 |
| border-image | 边框使用图像来填充 | |
| border-image-source | 边框是否用图像定义样式或图像来源路径 | |
| border-image-slice | 边框背景图的分割方式 | |
| border-image-width | 边框厚度 | |
| border-image-outset | 边框背景图的扩展 | |
| border-image-repeat | 边框图像的平铺方式 | |
| border-radius | 主对角线值 副对角线值;或左上角值 右上角值 右下角值 左下角值; | 使用圆角边框 |
| border-top-left-radius | ?px | 左上角圆角边框 |
| border-top-right-radius | ?px | 右上角圆角边框 |
| border-bottom-left-radius | ?px | 左下角圆角边框 |
| border-bottom-right-radius | ?px | 右下角圆角边框 |
| border-style | solid或dashed或dotted等 | 边框样式，包含实线边框、虚线边框、点线边框； |
| box-shadow | h-shadow v-shadow [blur spread color inset]; | 边框阴影。h-shadow水平阴影位置，允许负值；v-shadow竖直阴影位置，允许负值；blur模糊距离；spread阴影尺寸；color阴影颜色；inset将外部阴影改为内部阴影；（默认外阴影） |
| border-collapse | collapse | 将相邻的边框合并到一起； |
复合写法：
border:size color style;无顺序要求；分开写法：种类划分
border-width|border-style|border-color; 边数划分
border-top/bottom/left/right圆角边框：
- 原理：（椭）圆与边框交集形成圆角效果；
- 数值，指边框与长度为length的圆相切/百分比
- 几个特殊值：设置成圆–正方形，数值修改为高度的一半/50%；设置成弧度矩形–矩形，数值设置成高度的一半；
背景设置
包含属性：背景颜色、背景图片、背景图片位置
| 属性 | 值 | 描述 |
|---|---|---|
| background-color | 预设值；十六进制；RGB；RGBA | 背景颜色 |
| background-image | none或url() | 无背景图；使用绝对或相对地址指定背景图像； |
| background-repeat | repeat或no-repeat或repeat-x或repeat-y | 默认为平铺；不平铺；沿横向平铺；沿纵向平铺； |
| background-position | length或position | 设置背景图片的开始位置；length设置百分数或有浮点数字和单位标识符组成的长度值；position设置方位值，如top、center、left等 |
| background-attachment | scroll或fixed | 背景图像随对象内容滚动（默认）；固定 |
| backgroup-clip | 规定背景绘制区域 | |
| backgroup-origin | 规定背景图片的定位区域 | |
| backgroup-size | 规定背景图片的尺寸 |
复合写法：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;方位名词：指定两个值时无前后顺序；指定一个时省略的默认居中对齐；
精确单位：前x值后y值；若只指定一个数值一定为x坐标，另一个默认垂直居中；
混合单位：精确单位和方位名词混合使用，前x值后y值；
盒子模型
简述
封装周围HTML元素的盒子，包括：边框、外边距、内边距和实际内容；
- 内容 - 框的内容，其中显示文本和图像。
- 内边距- 清除内容周围的区域。内边距是透明的。
- 边框 - 围绕内边距和内容的边框。
- 外边距 - 清除边界外的区域。外边距是透明的。
border（边框）
-
边框
会影响盒子实际大小
边框宽度、边框样式、边框颜色
border-width|border-style|border-color; -
属性及意义
属性 意义 border-width 定义边框粗细，单位是px； border-style 边框样式；（solid 实线边框、dashed虚线边框、dotted点线边框） border-color 边框颜色； -
复合写法
border:2px pink solid;无顺序要求；
分开写法：
border-top/border-bottom/border-left/border-right -
表格细线边框
border-collapse: collapse;将相邻的边框合并到一起；
content（内容）
-
盒子模型
box-sizing: content-box; box-sizing: border-box; box-sizing: inherit; -
属性及意义
属性 描述 值 content-box标准盒模型（默认） width border-boxIE盒模型 width+padding * 2+border * 2
padding（内边距）
-
内边距
设置内边距，即边框与内容之间的距离；会影响盒子实际大小
-
属性及意义
类型 意义 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 -
复合写法
代表上下左右都为5像素内边距；
/* 代表上下左右都为5像素内边距； */ padding：5px; /* 代表上下内边距为5像素，左右内边距为10像素； */ padding：5px 10px; /* 代表上边距为5像素，左右内边距为10像素，下边距为20像素 */ padding：5px 10px 20px; /* 代表上内边距为5，右内边距为10，下内边距20，左边距30 顺时针 */ padding：5px 10px 20px 30px;margin（外边距）
-
外边距
设置外边距，即控制盒子与盒子之间的距离
-
属性及意义
属性 意义 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 -
复合写法
/* 代表上下左右都为5像素外边距 */ margin：5px; /* 代表上下外边距为5像素，左右外边距为10像素 */ margin：5px 10px; /* 代表上外边距为5像素，左右外边距为10像素，下外边距为20像素 */ margin：5px 10px 20px; /* 代表上外边距为5，右外边距为10，下外边距20，左外边距30 顺时针*/ margin：5px 10px 20px 30px;块状盒子水平居中对齐：盒子必须指定宽度，左右外边距都设置为auto
行内元素或行内块元素水平居中对齐：在父元素添加text-align:center;
行内元素仅设置左右内外边距，而不设置上下内外边距。但转化为块级和行内块元素就可以。
-
圆角边框
-
语法
border-radius: length;radius半径（圆的半径）原理：（椭）圆与边框交集形成圆角效果；
length:指边框与长度为length的圆相切/百分比；
-
例子
-
设置成圆
正方形，数值修改为高度的一半/50%；
-
设置成弧度矩形
矩形，数值设置成高度的一半；
-
设置成不同的圆角
-
两个数值
主对角线值 副对角线值
-
四个数值
左上角值 右上角值 右下角值 左下角值
-
-
-
属性及意义
属性 意义 border-top-left-radius: ; 左下圆角 border-top-right-radius: ; 右上圆角 border-bottom-right-radius: ; 右下圆角 border-bottom-left-radius: ; 左下圆角
盒子阴影
-
语法
box-shadow: h-shadow v-shadow blur spread color inset;盒子阴影不占用空间，不影响其他盒子排列；
-
属性及意义
属性 必要性 意义 h-shadow 必需 水平阴影位置，允许负值； v-shadow 必需 竖直阴影位置，允许负值； blur 可选 模糊距离； spread 可选 阴影尺寸； color 可选 阴影颜色； inset 可选 将外部阴影改为内部阴影；（默认外阴影）
文字阴影
-
语法
text-shadow: h-shadow v-shadow blur color; -
属性及意义
属性 必要性 意义 h-shadow 必需 水平阴影位置，允许负值； v-shadow 必需 竖直阴影位置，允许负值； blur 可选 模糊距离； color 可选 阴影颜色；
网页布局
普通流
-
排序方式
标签按照规定好默认方式排列；
-
形式
块级元素独占一行，从上到下顺序排列；
行内元素按顺序从左到右顺序排列，碰到父元素边缘则自动换行；
浮动
-
排序方式
改变元素标签默认排列方式；让多个块级盒子一行没有缝隙排列显示，多用于横向排列盒子；
-
经典应用
多个块级元素一行内排列显示；即，纵向排列选择标准流，横向排列选择浮动；
-
语法
float:none|left|right;浮动用于创建浮动框，将其移动到一边，知道左边缘或右边缘及包含快活另一个浮动框的边缘；（任何元素都可以浮动）
属性值及描述
属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动 -
特性
-
脱标：浮动元素会脱离标准流
脱离标准流的控制（浮），移动到指定位置（动）；浮动的盒子不再保留原来的位置；
浮动元素会压住下面标准流盒子，但不会压住下面标准流盒子文字；
应用：文字环绕图片效果/图片；
-
无缝隙：浮动元素会一行内显示并且元素顶部对齐
多个盒子都设有浮动，他们安装属性值一行内显示并且顶端对齐排列；
浮动元素互相贴靠在一起；如果父级宽度装不下这些浮动盒子，多出盒子另起一行；
-
具备行内块元素特性
元素添加浮动后具有行内块元素相似特性；
块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，大小根据内容决定；
一个元素浮动，其余兄弟元素也会浮动；
浮动盒子只会影响后面的标准流，而不影响前面的标准流；
-
-
清除浮动
-
父盒子不方便给定高度，但子盒子又不占有位置，最后导致父盒子高度为0，致使下面的标准流盒子受到影响；
-
意义
浮动元素不再占用原文档流的位置，对后面的元素排版产生影响；而清除浮动后，父级就会根据浮动的子盒子自动检测高度，不会再影响下面的标准流；
-
本质
清除浮动元素造成的影响；
-
语法
clear:left|right|both;属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动影响） right 不允许右侧有浮动元素（清除右侧浮动影响） both 同时清除左右两侧浮动影响 策略
闭合浮动；（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子）
-
使用方法
-
额外标签法（隔墙法）
-
在浮动元素末尾添加一个空标签；新添加的标签必须是块级标签；
-
优缺点
优：通俗易懂、书写方便；
缺：添加多余标签，结构化较差；
-
-
父级添加overflow属性
-
在父级上添加overflow属性，属性值设置为hidden、auto或scroll；
-
语法
overflow:hidden|auto|scroll; -
优缺点
优：书写简单；
缺：溢出隐藏；
-
-
父级添加after伪元素
-
:after方式是额外标签法的升级版； -
语法
.clearfix:after{ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ /* 专用IE 6、7 */ *zoom:1; } -
优缺点
优：构语义化正确；
缺：兼容性问题；
-
-
父级添加双伪元素（闭合）
-
在父级添加after伪元素，再在父类上调用clearfix类；
-
语法
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } -
优缺点
优：构语义化正确；
缺：兼容性问题；
-
-
-
定位
常见网页布局
-
上下式（标准流）
-
上下左右结合式（浮动式）
浮动和标准流的父盒子搭配；
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置；
-
上下通栏式
CSS3新特性
2D转换
-
基本语法
transform: translate(x,y)|rotate(deg)|scale(Xn,Yn)|skew(Xdeg,Ydeg) transform: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())函数及意义
函数 描述 matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。 translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n)定义 2D 转换，沿着 X 轴移动元素。 translateY(n)定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n)定义 2D 缩放转换，改变元素的宽度。 scaleY(n)定义 2D 缩放转换，改变元素的高度。 rotate(angle)定义 2D 旋转，在参数中规定角度。 skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。 skewX(angle)定义 2D 倾斜转换，沿着 X 轴。 skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。
颜色渐变
-
基本语法
background-image: linear-gradient(); -
分类
-
线性渐变（向下/向上/向左/向右/对角线）
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction
direction 方向描述 从上到下（默认）的线性渐变 to right从左到右的线性渐变 to bottom right/to bottom left从左上角开始到右下角（从右上角开始到左下角）的线性渐变 ? deg值 0deg 等于向上（to top）值 90deg 等于向右（to right）值 180deg 等于向下（to bottom） -
径向渐变（由其中心定义）
background-image: radial-gradient(shape size at position, start-color, ..., last-color);默认地，shape 为椭圆形，size 为最远角，position 为中心
-
动画
-
基础内容
动画使元素逐渐从一种样式变为另一种样式。
CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！
首先为动画指定一些关键帧（关键帧包含元素在特定时间所拥有的样式）。
-
规则
@keyframes example{ from{} to{}; 0%{} 100%{}; } div{ animation-name: example; animation-duration: 4s; } -
属性及意义
属性 描述 值 @keyframes 规定动画模式。 @keyframes anName{}animation 设置所有动画属性的简写属性。（复合属性） animation:Name Duration TimingFunc Delay IterationCount Directionanimation-delay 规定动画开始的延迟。 animation-direction 定动画是向前播放、向后播放还是交替播放。 `normal animation-duration 规定动画完成一个周期应花费的时间。 num sanimation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。 `none animation-iteration-count 规定动画应播放的次数。 `num animation-name 规定 @keyframes 动画的名称。 Nameanimation-play-state 规定动画是运行还是暂停。 animation-timing-function 规定动画的速度曲线。 `ease
多列
-
基础内容
-
使用
div { column-count: 3; column-gap: 40px; column-rule-style: solid; column-rule-width: 1px; column-rule-color: lightblue; column-rule: 1px solid lightblue; column-span: all; column-width: 100px; } -
属性及意义
属性 描述 值 column-count 规定元素应划分的列数。 numcolumn-fill 规定如何填充列。 column-gap 指定列之间的间隙。 num pxcolumn-rule 用于设置所有 column-rule-* 属性的简写属性。 width style colorcolumn-rule-color 规定列之间规则的颜色。 colorcolumn-rule-style 规定列之间的规则样式。 `solid column-rule-width 规定列之间的规则宽度。 num pxcolumn-span 规定一个元素应该跨越多少列。 `all column-width 为列指定建议的最佳宽度。 num pxcolumns 用于设置 column-width 和 column-count 的简写属性。
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
