一、css3前导
1-1、css3新特性
1) 完善的选择器；
2） 完善的视觉效果；（圆角、阴影、渐变背景、半透明度、边框等）；
3） 完善的背景效果；（background-origin、background-clip、background-size）
4） 完善的盒子模型
5）增强背景功能；
6） 增加阴影效果；
7） 增加多列布局和弹性盒子模型布局
8） 完善的Web字体和Web Font图标
9）增加动画和交互效果
10）完善媒体特性和响应式（Responsive）布局
1-2、css3属性的私有前缀
- IE 浏览器 `-ms-`
- firefox 浏览器 `-moz-`
- chrome 浏览器 `-webkit-`
- Safari 浏览器 `-webkit-`
- opera 浏览器 `-o-`
二、CSS3基础
2-1、新增长度单位
1) em 本元素字体大小的倍数；
2）rem 根元素字体的倍数，只跟根元素字体有关；
3）vw 视口宽度的百分之多少；（10vw 就是宽度的百分之十）
4）vh 视口高度的百分之多少；（10vh 就是高度的百分之十）
5）vmax 视口宽高中大的那个百分之多少；
6）vmin 视口宽高中小的那个百分之多少；
2-2、新增颜色属性
1) rgba 透明度；
2）HSL 颜色
3）HSLA 透明度
2-3、选择器
2-3-1、选择器-基本选择器（6）
1) * 通配符
2) 元素/标签
3） ID
4） class
5） 群组选择器
6） 交集选择器
2-3-2、选择器-层级选择器（4）
1) 空格 后代选择器
2） > 子选择器
3） + 紧挨的下一个兄弟选择器
3） ~ 后面的所有兄弟们
2–3-3、属性选择器（7）
1) 语法： E[属性]
E[class] 选择所有带class属性的E元素；
2） 语法： E[属性='值']
E[class=val] 选择所有class属性且属性值为val的E元素；
3） 语法： E[属性^='值']
E[class^='val'] 选择所有classs属性且值以val开头的E元素
4） 语法： E[属性$='值']
E[class$='val'] 选择所有class属性且属性值以val结尾的E元素
5） 语法： E[属性*=:'值']
E[class*='val'] 选择所有class属性且属性值中含有val的E元素
6） 语法： E[属性~='值']
E[class~='val'] 选择所有class属性且属性值val为字词列表中的某一个并且之间用空格隔开的E元素
7) 语法： E[属性|='值']
E[class|='val'] 选择所有class属性且属性值val为字词列表中的某一个并且之间用-隔开
2-3-4、伪类选择器-动态伪类选择器（4）
1) :link 链接初始状态的样式
2） :visited 链接被访问过的样式；
3） :hover 当鼠标光标在该元素之上未点击时的样式；
4） :active 当鼠标点击并未松开时的样式
2-3-5、伪类选择器-目标伪类选择器（1）
1) :target 当锚点指向哪个元素时该样式应用到哪个元素上；
2-3-6、伪类选择器-语言伪类选择器（1）
1) :lang(en) 定义指定语言的样式；
2-3-7、伪类选择器-UI伪类选择器（3）
1) :disabled 定义元素不可用时的样式；
2） :enabled 定义元素可用时的样式；
3） :checked 定义元素被选中时的样式
2-3-8、伪类选择器-结构伪类选择器（12）
1) :root 选择的跟标签
2) :empty 识别的空标签 如果有空格也当作文本
3） :fist-child 第一个子元素
4） :last-child 最后一个子元素
5） :only-child 找到的是只有一个子元素的那个元素
6） :nth-child() 从1开始从前往后依次递增
7） :nth-last-child() 从1开始从后往前依次递增
8) :fist-of-type 第一个该类型的元素
9） :last-of-type 最后一个该类型的元素
10） :only-of-type 找到只有一个子元素的那个元素
11） :nth-of-type() 从1开始从前往后依次递增
12) :nth-last-of-type() 从1开始从后往前依次递增
总结：
oftype 可以找到同类型的数据
child 是找到所有类型的数据，如果前面的数据不是你想要的那个标签则不生效
但是在实际企业级开发中我们不会遇到不同标签的情况，所以都可以使用，建议使用child
2-3-9、伪类选择器-否定伪类选择器（1）
1) :not(选择器) 除了某一个元素之外的所有的元素都变成某一样式
2-3-10、伪元素选择器（6)
1) :first-letter 第一个字母
2） :first-line 第一行
3） ::before 在元素的前面添加内容
4） ::after 在元素的后面添加内容
5） ::placeholder 提示文字的样式
6） ::selection 选择元素时的样式
2-4、新增盒子模型
2-4-1、box-sizing
属性:
box-sizing 定义盒子模型的尺寸解析方式
语法:
box-sizing: content-box; 默认值
box-sizing: border-box; 盒子的计算方式被修改
2-4-2、resize
属性：
resize:属性值; 允许用户缩放调节大小
属性值：
none 不允许用户调节元素大小
both 用户可以调节元素的宽度和高度；
horizontal 用户可以调节元素的宽度
vertical 用户可以调节元素的高度
** 注：输入类的元素设置resize时直接设置，而其它元素设置该属性时需结合overflow:hidden使用 **
2-4-3、盒子阴影
属性：
box-shadow
属性值：
1） h-shadow 必须填写，水平阴影的位置，可以为负值；
2） v-shadow 必须填写，垂直阴影的位置，可以为负值；
3） blur 可选值，模糊距离
4） spread 可选值，阴影的尺寸
5） color 可选值，阴影的颜色
6） inset 可选值，将外部阴影改为内部
默认值：box-shadow:none 表示没有阴影
语法：box-shadow:h-shadow v-shadow blur spread color insert
2-4-4、盒子不透明度
属性：
opacity 设置透明度
属性值： 0~1
兼容性：
对于尚不支持该属性的IE浏览器可以使用IE私有的滤镜来实现与该属性相同的效果
filter:alpha(opacity=透明值)
2-5、新增的背景属性
2-5-1、background-origin
属性：
background-origin 背景图片原点
属性值：
padding-box(默认值) 从padding区域含（padding）开始显示背景图像。
border-box:从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像
2-5-2、background-clip
属性：
background-clip 指定对象的背景图像向外裁剪的区域
属性值：
border-box：（默认值）从border区域（不含border）开始向外裁剪背景；
padding-box：从padding区域（不含paddding）开始向外剪裁背景
content-box：从content区域开始向外剪裁背景
text：从背景内容的形状（比如文字）作为剪裁区域向外剪裁，如此即可实现使用背景作为填充色之类的遮罩效果；
当浏览器不支持时需用私有前缀；
2-5-3、background-size
属性：
background-size 背景图像的尺寸
属性值：
lenght 用长度指定背景图像的大小
percentage 用百分比指定背景图像的大小
cover 将背景图像等比例缩放到完全覆盖容器，有可能超出容器
contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内；
auto 背景图像的真实大小
2-5-4、背景复合属性写法
background:bg-color bg-image bg-repeat bg-attachment bg-position / bg-size bg-orign bg-clip
【cirap so酷c】
2-5-5 、多背景图
2-6、新增边框
2-6-1、边框圆角
属性：
border-radius
属性值：
length
precentage
border-top-left-radius：设置左上角的圆角半径；一个值正圆半径，两个值分别是椭圆的x半径和y半径。
border-top-right-radius：设置右上角的圆角半径 一个值正圆半径，两个值分别是椭圆的x半径和y半径。
border-bottom-right-radius设置右下角的圆角半径一个值正圆半径 两个值分别是椭圆的x半径和y半径。
border-bottom-left-radius设置左下角的圆角半径一个值正圆半径，两个值分别是椭圆的x半径和y半径。
2-6-2、边框外轮廓
属性：
outline-width 外轮廓的宽度
outline-color 外轮廓的颜色
outline-style 外轮廓的风格
outline-offset 外轮廓的偏移量
2-7、新增文本
2-7-1、文本对齐
1）属性：
text-align 文本水平对齐方式
属性值：
left： 内容左对齐。
center： 内容居中对齐。
right： 内容右对齐。
justify： 内容两端对齐。
start： 内容对齐开始边界。（CSS3） （CSS3中规定的默认值）
end： 内容对齐结束边界。（CSS3）
2）属性：
text-align-last 文本最后一行对齐方式（如果文本只有一行那么即是第一行也是最后一行）
属性值：
- auto： 无特殊对齐方式。 (默认值)
- left： 内容左对齐。
- center： 内容居中对齐。
- right： 内容右对齐。
- justify： 内容两端对齐。
- start： 内容对齐开始边界。
- end： 内容对齐结束边界。
3）属性：
vertical-align 文本在行框内的垂直对齐方式
属性值：
- baseline： 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐 (默认值)
- sub： 把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
- super： 把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
- text-top： 把当前盒的top和父级的内容区的top对齐
- text-bottom： 把当前盒的bottom和父级的内容区的bottom对齐
- middle： 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
- top： 把当前盒的top与行盒的top对齐
- bottom： 把当前盒的bottom与行盒的bottom对齐
- <percentage>： 把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。
- <length>： 把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。
2-1-2、文本阴影
属性：
text-shadow 该属性将阴影应用于文本
属性值：
h-shadow 水平方向的阴影位置
v-shadow 垂直方向的阴影位置
blur 阴影的模糊距离
color 阴影的颜色
默认值：text-shadow:none 表示没有阴影
2-7-3、文本换行
属性：【该属性常用】
white-space 设置元素是否保留文本间的空格、换行、指定文本超出边界是否换行；
属性值：
normal 默认处理方式，会将系列中的空格合并为一个，内部是否换行由换行规则决定（默认值）
nowrap 与normal一样，不同的是会将文本强制在一行显示。
pre 原封不动的保留输入时的状态并且文字遇到边界不会换行
pre-wrap 与pre一致，不同的是文字遇到边界会换行
pre-line 与normal一致，不同的是会保留文本输入时的换行
【不常用的文本换行属性】
属性1：
word-wrap/overflow-wrap 设置文字超过指定容器边界是否换行
属性值：
normal 允许文字溢出/顶开指定容器（默认值）
break-word 内容在容器内换行
属性2：
word-break 文本的字内换行
属性值：
normal 默认的换行规则
keep-all 文本不允许在字符内换行
break-all 文本允许在任意字符内发生换行
break-word 与break-all一样，不同的地方在于他要求一个没有断行破发点的词必须保持为一个单位；
2-7-4、文本溢出
属性：
text-overflow 设置文本内容溢出容器时的状态
属性值：
clip 当内联内容溢出容器时，将溢出部分裁掉
ellipsis 当内联内容溢出时将溢出部分替换为····
注意：
要使得 `text-overflow` 属性生效，块容器必须显式定义 `overflow` 为非 `visible` 值， `white-space` 为 `nowrap` 值。
2-7-5、文本装饰
属性：
text-decoration CSS3变成了复合属性
语法：
text-decoration：text-decoration-line || text-decoration-style || text-decoration-color
属性：
text-decoration-line 设置文本装饰线的位置
属性值：
none： 指定文字无装饰 （默认值）
underline： 指定文字的装饰是下划线
overline： 指定文字的装饰是上划线
line-through： 指定文字的装饰是贯穿线
blink： 指定文字的装饰是闪烁。
属性：
text-decoration-style 文本装饰线条的形状
属性值：
solid： 实线 （默认）
double： 双线
dotted： 点状线条
dashed： 虚线
wavy： 波浪线
属性：
oration-color 本装饰线条的颜色
2-7-6、文本描边
【字描边功能仅 webkit 内核浏览器支持】
属性：
text-fill-color 定义文字填充色
属性值：
webkit-text-stroke-width 设置文字描边的宽度，取长度单位。
webkit-text-stroke-color 设置文字描边的颜色，取颜色单位。
webkit-text-stroke 复合属性，设置文字描边宽度和颜色。
【注意】
> 若同时设置 `-webkit-text-fill-color` 和 `color` 属性，`-webkit-text-fill-color` 定义的颜色将覆盖 `color` 定义。
3、CSS3渐变
可以使用 CSS 代码创建一个渐变，渐变会被 CSS 当做图片。 要使用渐变必须通过使用图片的 CSS 属性，如 `background-image`。
3-1、线性渐变
属性：
linear-gradient()、
线性渐变需要设置的值有：
渐变方向；
渐变颜色；
渐变的每个颜色的位置；
基本使用：
/* 多个颜色之间的渐变， 默认从上到下渐变 */
linear-gradient(red, green);
linear-gradient(red, yellow, green);
/*设置线性渐变的方向*/
/* 使用关键字 to left、to top、 to right、to bottom、to left top、to right bottom ....*/
background-image: linear-gradient(to bottom, red, yellow, green);
background-image: linear-gradient(to right, red, yellow, green);
background-image: linear-gradient(to left, red, yellow, green);
background-image: linear-gradient(to left top, red, yellow, green);
/* 使用角度设置方向， 0deg 丛上到下的， 随着角度增大，方向会顺时针旋转*/
background-image: linear-gradient(10deg, red, yellow, green);
/*设置颜色的位置， 指定颜色从哪里开始渐变，没有渐变的地方显示纯色*/
background-image: linear-gradient(90deg, red 100px, green 200px);
background-image: linear-gradient(90deg, #369 10%, cyan 70%, pink 90%);
3-2、径向渐变
属性：
radial-gradient()
渐变的圆心位置
- 渐变的形状（正圆或椭圆）
- 渐变半径
- 渐变的颜色
- 渐变的每个颜色设置。
案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
margin: 20px 0;
width: 300px;
height: 100px;
border: 2px solid #000;
}
.box01 {
background-image: radial-gradient(red, green);
background-image: radial-gradient(red, yellow, green);
}
.box02 {
background-image: radial-gradient(at left top,red, yellow, green);
background-image: radial-gradient(at 100px 40px,red, yellow, green);
}
.box03 {
background-image: radial-gradient(circle at center center,red, yellow, green);
}
.box04 {
background-image: radial-gradient(circle 20px at center center,red, yellow, green);
}
.box05 {
background-image: radial-gradient(circle 50px at center center,red 10px, yellow 40px, green);
}
</style>
</head>
<body>
<div class="box box01"></div>
<div class="box box02"></div>
<div class="box box03"></div>
<div class="box box04"></div>
<div class="box box05"></div>
</body>
</html>
3-3、重复渐变
属性：
repeating-linear()
repeating-linear-gradient() 重复线性渐变 参数同linear-gradient()
repeating-radial-gradient() 重复径向渐变 参数同radial-gradient()
.box02 {
background-image: radial-gradient(at left top,red, yellow, green);
background-image: radial-gradient(at 100px 40px,red, yellow, green);
}
.box03 {
background-image: radial-gradient(circle at center center,red, yellow, green);
}
.box04 {
background-image: radial-gradient(circle 20px at center center,red, yellow, green);
}
.box05 {
background-image: radial-gradient(circle 50px at center center,red 10px, yellow 40px, green);
}
</style>
</head>
<body>
<div class="box box01"></div>
<div class="box box02"></div>
<div class="box box03"></div>
<div class="box box04"></div>
<div class="box box05"></div>
</body>
</html>
4、web字体和字体图标的使用
字体网址：
<https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index> 阿里Web字体
字体图标网址：
<http://www.iconfont.cn/> 阿里图标
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
