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
或?px
em表示相对于当前对象内文本的字体尺寸;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-box
IE盒模型 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 Direction
animation-delay 规定动画开始的延迟。 animation-direction 定动画是向前播放、向后播放还是交替播放。 `normal animation-duration 规定动画完成一个周期应花费的时间。 num s
animation-fill-mode 规定元素在不播放动画时的样式(在开始前、结束后,或两者同时)。 `none animation-iteration-count 规定动画应播放的次数。 `num animation-name 规定 @keyframes 动画的名称。 Name
animation-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 规定元素应划分的列数。 num
column-fill 规定如何填充列。 column-gap 指定列之间的间隙。 num px
column-rule 用于设置所有 column-rule-* 属性的简写属性。 width style color
column-rule-color 规定列之间规则的颜色。 color
column-rule-style 规定列之间的规则样式。 `solid column-rule-width 规定列之间的规则宽度。 num px
column-span 规定一个元素应该跨越多少列。 `all column-width 为列指定建议的最佳宽度。 num px
columns 用于设置 column-width 和 column-count 的简写属性。