CSS3
CSS3选择器
知识点1.全局选择器
全局选择器：设置所有标签使用同一样式，用*表示。如：*{margin：0；padding：0} 通配符选择器
知识点2.标签选择器
知识点3.类别选择器
一个类别选择器用在多个标签上
一个标签上可以有多个类别选择器
知识点4.Id选择器
知识点5.伪类选择器
:link 默认效果
:visited 访问后效果
:hover 鼠标移过效果
:active 被激活的效果
知识点6.目标伪类选择器
:target 超链接后目标样式
知识点7.元素伪类选择器
:enabled，匹配每个已启用的元素（大多用在表单元素上）
:disabled，匹配每个被禁用的元素（大多用在表单元素上）
:checked，匹配每个已被选中的 input 元素（只用于单选按钮和复选框）
知识点8.结构伪类选择器
:first-child ，匹配属于其父元素的首个子元素
:last-child，匹配属于其父元素的最后一个子元素
:empty ，匹配没有子元素（包括文本节点）的每个元素
:only-child ，匹配属于其父元素的唯一子元素
:nth-child(n)，匹配属于父元素的第n个子元素
知识点9.否定伪类选择器
:not(selector) 匹配非指定元素/选择器的每个元素
知识点10.伪元素
::first-letter 选择器的首字母
::selection 被用户选取的部分
::first-line 选择器的首行
知识点11.内容生成器
::before 在选择器前增加内容
::after 在选择器后增加内容
知识点12.属性选择器
知识点13.属性筛选选择器
[id] 附带 id 属性的元素
p[id] 附带 id 属性的 <p> 元素
p[id][class] 附带 id 属性和class属性的 <p> 元素
p[title="summary"] 附带 id 属性的 <p> 元素，其中title 属性的值为summary
p[class~="myClass"] 附带class 属性的 <p> 元素，其中 class 属性的值是以空格隔开的单词列表，myClass也是单词列表中的一个单词
p[class^="b"] class 属性值以 "b" 开头的所有 <p> 元素
p[class*="b"] class 属性值中包含子串 "b" 的所有 <p>元素
p[class$="b"] class 属性值以 "b" 结尾的所有 <p> 元素
知识点14.群组选择器
知识点15.后代选择器
知识点16.子选择器
知识点17.相邻选择器
知识点18.兄弟选择器
案例
CSS3盒模型
怪异盒模型
box-sizing
border-box怪异模式
width + margin(左右)（即width已经包含了padding和border值）
content-box标准模式（默认模式）
width + margin(左右) + padding(左右) + border(左右)
overflow溢出显示隐藏
overflow属性
visible： -可见 对溢出内容不做处理，内容可能会超出容器。（默认）
hidden：--隐藏 隐藏溢出容器的内容且不出现滚动条。
scroll：--滚动 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。（不论是否内容溢出都会显示）
auto：按需出现滚动条 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。
overflow-x和overflow-y
visible： 对溢出内容不做处理，内容可能会超出容器。
hidden： 隐藏溢出容器的内容且不出现滚动条。
scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。
文本域禁止改变大小
resize: none;
外边线
outline
CSS3多列布局
1.columns
2.column-width
3.column-count
4.column-gap
5.column-rule
CSS边框线
- border-radius
border-radius
border-left-radius
border-top-radius
border-right-radius
border-bottom-radius
- box-shadow
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
- border-image
图片创建边线
div {
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
CSS背景属性
background-clip | 规定背景的绘制区域。 |
| background-origin | 规定背景图片的定位区域。 |
| background-size | 规定背景图片的尺寸。 |
div
{
background-image: url("./img/IMG_20170529_115817.jpg");
width: 800px;
height: 600px;
background-size: 100% 100%;
border: 10px dashed #ccc;
padding: 20px;
}
div:nth-child(1){
background-clip: content-box;
}
div:nth-child(2){
background-clip: padding-box
}
div:nth-child(3){
background-clip: border-box;
background-origin: border-box;
}
CSS文本
hanging-punctuation | 规定标点字符是否位于线框之外。 |
| punctuation-trim | 规定是否对标点字符进行修剪。 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
| text-outline | 规定文本的轮廓。 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 |
| text-shadow | 向文本添加阴影。 |
| text-wrap | 规定文本的换行规则。 |
| word-break | 规定非中日韩文本的换行规则。 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。
CSS3弹性盒模型
知识点1.Flex布局基本概念
Flex布局的好处
display:flex
知识点2.Flex容器属性
第1项.flex-direction：
第2项.flex-wrap
第3项.flex-flow
第4项.justify-content
第5项.align-items
第6项.align-content
知识点3.Flex项目属性
第1项.order
第2项.flex-grow
第3项.flex-shrink
第4项.flex-basis
第5项.flex
第6项.align-self
知识点4.常用应用（居中对齐，自适应导航，移动优先布局）
居中对齐
自适应导航
移动优先布局
CSS3媒体查询
什么是媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
为什么响应式设计需要媒体查询
如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式
如何在CSS文件中引入媒体查询
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式
媒体查询的语法
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
逻辑操作
and，且的关系，当所有的条件满足的时候返回true
@media tv and (min-width:700px) and (orientation:landscape){}
逗号分割列表，或的关系，只要有条件满足就返回ture
@media (min-width:700px),handheld and (orientation:lanscape){}
not，类似于取反，最后参与运算的运算符
only，only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式
设备类型
- screen 计算机屏幕（默认值）
- tty 电传打字机以及使用等宽字符网格的类似媒介
- tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
- projection 放映机
- handheld 手持设备（小屏幕、有限的带宽）
- print 打印预览模式 / 打印页
- braille 盲人用点字法反馈设备
- aural 语音合成器
- all 适合所有设备
媒体查询参数
- width:浏览器可视宽度，
- height:浏览器可视高度，
- device-width:设备屏幕的宽度，
- device-height:设备屏幕的高度，
- orientation:检测设备目前处于横向还是纵向状态，
- aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，
- device-aspect-ratio:检测设备的宽度和高度的比例，
- color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），
- color-index:检查设备颜色索引表中的颜色（他的值不能是负数），
- monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），
- resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，
- grid：检测输出的设备是网格的还是位图设备。
CSS3变换
transform
第1项.transform-origin转换原点
第2项.translate位移
第3项.scale缩放
第4项.Rotate旋转
rotateY
perspective透镜
第5项.Skew倾斜（skewX，skewY）
立方体
CSS过渡动画
过渡动画（transition）
transition-property
none
all
指定样式属性
transition-duration
transition-timing-function
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier
（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.
[获取贝塞尔方法工具](http://cubic-bezier.com/)
transition-delay
transition 简写
百叶窗效果
知识点2.动画（animation ）
第1项.animation 与关键帧
animation 属性
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
ease
linear
ease-in
ease-out
ease-in-out
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
normal
alternate一次前一次后交替效果
animation-fill-mode 结束后不返回
forwards 结束停留在最后一帧
none
关键帧 @keyframes
第2项.animate css插件的使用
1、首先引入animate css文件
<link rel="stylesheet" href="animate.min.css">
2、给指定的元素加上指定的动画样式名
<div class="animated bounceOutLeft"></div>
这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。
3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：
$('#yourElement').addClass('animated bounceOutLeft');
WEB字体
CSS3 @font-face 规则
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
font-weight: bold;
}
div {
font-family: myFirstFont;
}
CSS3 字体描述符
font-family | *name* | 必需。规定字体的名称。 |
| src | *URL* | 必需。定义字体文件的 URL。 |
| font-stretch | normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-expanded/ultra-expanded | 可选。定义如何拉伸字体。默认是 "normal"。 |
| font-style | ormal/italic/oblique | 可选。定义字体的样式。默认是 "normal"。 |
| font-weight | normal/bold/100/200/300/400/500/600/700/800/900 | 可选。定义字体的粗细。默认是 "normal"。 |
| unicode-range | *unicode-range* | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
CSS3渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
linear-gradient(red, blue);
从上到下
linear-gradient(to right, red , blue);
从左到右
linear-gradient(to bottom right, red , blue);
对角
linear-gradient(180deg, red, blue);
角度
linear-gradient(red, green, blue);
使用多个颜色节点
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
使用透明度
repeating-linear-gradient(red, yellow 10%, green 20%);
重复的线性渐变
径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(red, green, blue);
颜色结点均匀分布
radial-gradient(red 5%, green 15%, blue 60%);
颜色结点不均匀分布
radial-gradient(circle, red, yellow, green);
设置形状
radial-gradient(60% 55%, closest-side,blue,green,yellow,black)
size 参数定义了渐变的大小
它可以是以下四个值：
- **closest-side**
- **farthest-side**
- **closest-corner**
- **farthest-corner**
repeating-radial-gradient(red, yellow 10%, green 15%)
重复的镜像渐变
7220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
