CSS3主要内容
一、CSS选择器
CSS3选择器规范地址: https://www.w3.org/TR/2011/RE…
CSS3最新选择器规范: https://www.w3.org/TR/selectors
!—问题—!
1.CSS的全称是什么?
Cascading Style Sheets
2.样式表的组成:
CSS选择器 + CSS声明块:(一个个CSS声明:属性名+属性值)
3.浏览器读取编译CSS的顺序?
CSS选择器的解析顺序:从右往左。这样做是为了减少无效匹配次数,从而匹配快、性能更优。
1.基本选择器*
,html
,.
,#
,空格
,>
,+
,~
,,
- (1)通配符选择器:
* {}
- (2)元素选择器:
body {}
任何一个HTML元素 - (3)类选择器:
.
.list {}
- (4)ID选择器:
#
#list {}
- (5)后代选择器:空格
.list li{}
- (6)选择器的分组:用逗号
,
隔开各个选择器h1,h2,h3{color: pink;}
此处的逗号我们称之为结合符 - 基本选择器扩展
- (7)子元素选择器:
>
,也可称为直接后代选择器,此类选择器只能匹配到直接后代,不能匹配到深层次的后代元素。#wrap > .inner {color: pink;}
- (7)子元素选择器:
- (8)相邻兄弟选择器:
+
,它只会匹配紧跟着的兄弟元素。#wrap #first + .inner {color: #f00;}
- (8)相邻兄弟选择器:
- (9)通用兄弟选择器:
~
,它会匹配所有的兄弟元素(不需要紧跟)。#wrap #first ~ div { border: 1px solid;}
- (9)通用兄弟选择器:
2.属性选择器
(1)存在 和 值 属性选择器
[attr]
:该选择器选择包含 attr
属性的所有元素,不论 attr
的值为何。
[attr=val]
:该选择器仅选择 attr
属性被赋值为 val
的所有元素。
[attr~=val]
:该选择器仅选择 attr
属性的值(以空格间隔出多个值)中有包含 val
值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。
(2)子串值属性选择器
[attr|=val]
: 选择attr
属性的值是val
(包括val
)或以val-
开头的元素。
[attr^=val]
: 选择attr
属性的值以val
开头(包括val
)的元素。
[attr$=val]
: 选择attr
属性的值以val
结尾(包括val
)的元素。
[attr*=val]
: 选择attr
属性的值中包含字符串val
的元素。
3.伪类与伪元素选择器
(1)链接伪类: 注意:link
,:visited
,:target
是作用于链接元素的!
:link
: 表示作为超链接,并指向一个未访问的地址的所有锚 。
:visited
:表示作为超链接,并指向一个已访问的地址的所有锚 。
:target
: 代表一个特殊的元素,它的id
是URI
的片段标识符 。
(2)动态伪类 : 注意:hover
,:active
基本可以作用于所有的元素!
:hover
: 表示悬浮到元素上。
:active
: 表示匹配被用户激活的元素(点击按住时)。
由于a
标签的:link
和:visited
可以覆盖了所有a
标签的状态,所以当:link
,:visited
,:hover
,:active
同时出现在a
标签身上时 :link
和:visited
不能放在最后!!!
隐私与:visited
选择器:只有下列的属性才能被应用到已访问链接: color
background-color
border-color
(3)表单相关伪类
:enabled
: 匹配可编辑的表单
:disable
: 匹配被禁用的表单
:checked
: 匹配被选中的表单
:focus
: 匹配获焦的表单
(4)结构性伪类
index
的值从1开始计数!!!!
index
可以为变量n
(只能是n
)
index
可以为even
、 odd
#wrap ele:nth-child(index)
:表示匹配#wrap
中第index
的子元素 这个子元素必须是ele
#wrap ele:nth-of-type(index)
:表示匹配#wrap
中第index
的ele
子元素
除此之外:nth-child
和:nth-of-type
有一个很重要的区别!!:nth-of-type
以元素为中心!!!
:nth-child(index)
系列:first-child
:last-child
:nth-last-child(index)
-
:only-child
(相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)
系列:first-of-type
:last-of-type
:nth-last-type(index)
-
:only-of-type
(相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)) - :not
- :empty(内容必须是空的,有空格都不行,有attr没关系)
(5)伪元素
::after
::before
::firstLetter
::firstLine
::selection
4.CSS
声明的优先级
(1)选择器的特殊性
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0
一个选择器的具体特殊性如下确定:
- 1.对于选择器中给定的ID属性值,加 0,1,0,0
- 2.对于选择器中给定的各个类属性,属性选择,或伪类,加 0,0,1,0
- 3.对于选择器中的给定的各个元素和伪元素,加0,0,0,1
- 4.通配符选择器的特殊性为0,0,0,0
- 5.结合符对选择器特殊性没有一点贡献
- 6.内联声明的特殊性都是1,0,0,0
- 7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势
注意区分:id选择器和属性选择器div[id="test"]
(0,0,1,1) 和 #test
(0,1,0,0)
(2)重要声明
- 有时某个声明比较重要,超过了所有其他声明,css2.1就称之为重要声明,并允许在这些声明的结束分号之前插入
!important
来标志。 - 必须要准确的放置
!important
否则声明无效。 -
!important
总是要放在声明的最后,即分号的前面。 - 标志为
!important
的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。 - 实际上所有的重要声明会被浏览器分为一组,重要声明的冲突会在其内部解决。
- 非重要声明也会被分为一组,非重要声明的冲突也会在其内部解决。
- 如果一个重要声明与非重要声明冲突,胜出的总是重要声明。
(3)继承
- 继承没有特殊性,甚至连
0
特殊性都没有。 -
0
特殊性要比无特殊性来的强。
(4)来源
CSS样式的来源大致有三种:
- 创作人员
- 读者
- 用户代理
权重:
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理的声明
(5)层叠
- 1.找出所有相关的规则,这些规则都包含一个选择器。
2.计算声明的优先级
- 先按来源排序
- 再按选择器的特殊性排序
- 最终按顺序
二、自定义字体
-
@font-face
:允许网页开发者为其网页指定在线字体。 - 通过这种作者自备字体的方式,可以消除对用户电脑字体的依赖。
-
font-family
:所指定的字体名字将会被用于font
或font-family
属性。 -
src
:字体资源。
注意:不能在一个 CSS
选择器中定义@font-face
。
三、新的UI方案
1.文本新增样式
(1)opacity
-
opacity
属性指定了一个元素的透明度。 - 默认值:
1.0
,不可继承。
(2)新增颜色样式rgba
(3)文字阴影(text-shadow
)
-
text-shadow
用来为文字添加阴影,而且可以添加多层,阴影值之间用逗号隔开。(多个阴影时,第一个阴影在最上边) - 默认值:
none
,不可继承 。
(4)文字描边(-webkit-text-stroke
)
- 只有
webkit
内核才支持:-webkit-text-stroke
(准确的来说不能算是CSS3
的东西,但需要知道)。
(5)文字排版
-
direction
:控制文字的方向,一定要配合unicode-bidi:bidi-override;
来使用。 text-overflow
:确定如何向用户发出未显示的溢出内容信号。- 它可以被剪切,
- 显示一个省略号(’…’)
2.盒模型新增样式
(1)盒模型阴影box-shadow
-
box-shadow
以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。 如果元素同时设置了border-radius
,阴影也会有圆角效果。多个阴影时和多个text-shadows
规则相同(第一个阴影在最上面)。 - 默认值:
none
, 不可继承。
(2)倒影-webkit-box-reflect
-
-webkit-box-reflect
设置元素的倒影(准确的来说不能算是CSS3
的东西,但需要知道)。 - 默认值:
none
,不可继承。
(3)resize
-
resize
CSS 属性允许你控制一个元素的可调整大小性。
(一定要配合overflow:auto
使用) - 默认值:
none
, 不可继承。
(4)box-sizing
-
box-sizing
属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。 - 默认值:
content-box
, 不可继承。
3.新增UI样式
(1)圆角border-radius
border-radius
- 默认值:
0
, 不可继承。
(2)边框图片border-image
-
border-image
:CSS
属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单,使用border-image
时,其将会替换掉border-style
属性所设置的边框样式。 默认值: 不可继承
border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: none
border-image-repeat: stretc
(3)背景background
(4)渐变
-
CSS
渐变 是在CSS3 Image Module
中新增加的图片类型;使用CSS
渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片,可以加快页面的载入时间、减小带宽占用。同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活、便捷的调整页面布局。 浏览器支持两种类型的渐变:
- 线性渐变 (linear),通过
linear-gradient
函数定义 - 径向渐变 (radial),通过
radial-gradient
函数定义.
- 线性渐变 (linear),通过
四、布局扩展
1.flex
布局
CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行/列。对于许多应用程序,弹性盒子模型提供了对块模型的改进,因为它不使用浮动,flex容器的边缘也不会与其内容的边缘折叠。
弹性盒模型,分老版与新版:
老版本的我们通常称之为`box `
新版本的我们通常称之为`flex`
主轴 与 侧轴
由`flex-direction`/`-webkit-box-orient`确定
有了新版本后,为什么还需要老版本?(新版本比老版本要强大的很多)
很多移动端浏览器内核版本都超低。
(1)老版
容器设置display
为webkit-box
(注意:项目永远是在主轴上排列的)
-webkit-box-orient
属性本质上确定了主轴是哪一根-
horizontal
:x轴 -
vertical
:y轴
-
(注意:项目永远是沿着主轴的正方向排列的)
-webkit-box-direction
属性本质上改变了主轴的方向-webkit-box-direction: normal;
-webkit-box-direction: reverse;
富裕空间的管理(主轴)
start
end
center
justify
-
-webkit-box-pack:start;
不会给项目区分配空间,只是确定富裕空间的位置
富裕空间的管理(侧轴)
start
end
center
-
-webkit-box-align:center;
不会给项目区分配空间,只是确定富裕空间的位置
弹性空间的管理:将富裕空间按比例分配到各个项目上
-webkit-box-flex: 1;
- 默认值:
0
, 不可继承
(2)新版
容器的布局方向
flex-direction: row;
flex-direction: column;
容器的排列方向
flex-direction:row-reverse;
flex-direction:column-reverse;
更强大的富裕空间的管理(主轴)
justify-content: flex-start;
flex-start
flex-end
center
space-between
space-around(box 没有的)
更强大的富裕空间的管理(侧轴)
align-items: stretch;
flex-start
flex-end
center
baseline(box 没有的)
stretch(box 没有的)
弹性空间的管理
flex-grow: 1
2.新版flex
布局详解
https://developer.mozilla.org…
3.响应式布局核心:媒体查询选择器
CSS3媒体查询是响应式方案核心。
(1)媒体类型
-
all
: 所有媒体 -
braille
: 盲文触觉设备 -
embossed
: 盲文打印机 -
print
: 手持设备 -
projection
: 打印预览 -
screen
: 彩色屏幕 -
speech
: “听觉”类似的媒体设备 -
tty
: 不适用像素的设备 -
tv
: 电视
(2)媒体特性(媒体属性)
-
width
(可加max min前缀) -
height
(可加max min前缀) -
min-width
:分辨率宽度大于设置值的时候识别 -
max-width
:分辨率宽度小于设置值的时候识别 -
device-width
(可加max min前缀) -
device-pixel-ratio
:像素比(可加max min前缀,需要加webkit前缀) -
orientation:portrait
:竖屏 -
orientation:landscape
:横屏
(3)操作符、关键字
and
: 连接媒体特性- 连接媒体属性 、连接媒体类型
- 对于所有的连接选项都要匹配成功才能应用规则
or
: 和and
相似- 对于所有的连接选项只要匹配成功一个就能应用规则
-
not
: 排除指定媒体类型 only
: 指定某种特定的媒体类型- 防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式。
@media only screen and (min-width:800px ){
规则;
规则
}
@media screen and (min-width:800px ){
规则;
规则
}
- 在老款的浏览器下
-
@media only
—> 因为没有only
这种设备,规则被忽略。 -
@media screen
—> 因为有screen
这种设备而且老浏览器会忽略带媒体属性的查询。
- 建议在每次书写
media query
的时候带上only
。
- 建议在每次书写
4.多列布局(分栏布局)
(1)栏目宽度
-
column-width
指定每一栏的宽度(这是多列布局的第一种分法)
(2)栏目列数
-
column-count
指定要多少栏(这是多列布局的第二种分法)
(3)栏目距离
column-gap
(4)栏目间隔线
column-rule