CSS3知识
- 选择器
-
a[class^="abc"]{xxx;}:以“abc”开头的任何字符串类名； -
a[class$="abc"]{xxx;}:以“abc”结尾的任何字符串类名； -
a[class*="abc"]{xxx;}:以包含"abc"的任何字符串类名； -
[attribute]{xxxx}:代表包含attribute属性的元素设置样式； -
[attribute=value]{xxx}:代表属性名为attribute，属性值为value的元素设置此样式；
-
- 相邻兄弟选择器
- 符号为“+”;
- 适用场景：需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
- 代码：
input[type="text"]+span{xxx:xxx}；
- 自定义字体引入font-face
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ } - CSS3变形transform
-
transform:rotate():旋转； -
transform:scale():缩放； -
transform: skew():扭曲； -
transform: translate():位移； -
transform-origin:原点设置； - 注意：变形均对块状元素和内联块状元素有效，内联元素无效；
-
- CSS3动画之过渡transition
- transition-property: 过渡属性；
- transition-duration: 过渡总时间；
- transition-timing-function:过渡函数；
- transition-delay:过渡延迟时间；
- 过渡的设置步骤：
1）设置过渡属性的初始值；
2）设置改变属性值的事件；
3）事件触发后设置的改变后新的值； - 注意：哪个元素设置过渡功效，就将transition添加到此元素中，与初始值设置在一起；
- CSS3动画之运动animation
- keyframes:关键帧，用于设置运动动画名称；
@keyframes around{ 0%{ transform: translateX(0); } 25%{ transform: translate(180px,0); } 50%{ transform: translate(180px,180px); } 75%{ transform: translate(0,180px); } 100%{ transform: translateY(0); } }- animation-name:关键帧设置的运动名称；
- animation-duration：运动总时间；
- animation-timing-function:运动函数；在关键帧中设置的每个阶段的运动形式；
- animation-delay:运动延迟时间；
- animation-iteration-count:
infinite|<number>:infinite（无限次）; - animation-direction: normal/alternate(轮流)；其中：alternate指的是，奇数次从0%-100%运动，偶数次从100%-0%运动；
- animation-play-state: running（播放）/paused（暂停）;暂停的时候停在原地，在播放时从停下的位置继续运动；
- animation-fill-mode:none/forwards/backwards/both;
- 作用：定义动画开始之前和动画结束之后的操作；
- none:默认值；指的是：
1）动画在开始时，从初始位置迅速到达第一帧的位置，即0%设置的位置；然后开始；需注意的是，在延迟时间之后发生，即延迟时间过后，迅速到达第一帧的位置，然后开始运动；
2）动画结束后，迅速从最后一帧位置（即100%设置出）,回到初始位置； - forwards:指动画开始时，从初始位置迅速到达第一帧的位置，然后开始经过延迟时间，然后开始运动；区别在于，在延迟时间之前就到达第一帧的位置；动画结束后同none;
- backwards:指动画结束后，停留在最后一帧的位置；不会到原始位置；动画开始前同none；
- both:指同时具有forwards和backwards两个效果；
- CSS3多列布局-Columns
- columns:
<column-width>||<column-count>；简写：column:200px 5- column-width:主要用来定义多列中每列的宽度；
- column-count:主要用来定义多列中的列数；
- column-gap:normal/length:用来设置列与列之间的间距;
- column-rule:
<column-rule-width>|<column-rule-style>|<column-rule-color>：用来定义列与列之间的边框宽度、边框样式和边框颜色；类似于border; - column-span:
none|all：用来定义一个分列元素中的子元素能跨列多少；
- columns:
- CSS3盒子模型
- box-sizing:
content-box|border-box|inherit- content-box:默认值；即设置的width/height设置的是内部内容宽高；
- border-box:设置的width/height为盒子的总宽高，即内容的宽高+padding+border；即元素的可视尺寸；
- inherit：使元素继承父元素的盒模型；
- box-sizing:
- CSS3伸缩布局Flexbox布局
- 定义：具有很大的功能，减少使用浮动或固定宽度+百分比来进行布局；
- 创建一个flex容器，为此元素设置display属性值为flex;需注意的是在Safari浏览器中，需要添加前缀-webkit；
- flex-direction:row/column/column-reverse/row-reverse;默认值row，用来定义沿主轴和侧轴方向排列；
- justify-content:用来表示可伸缩项目在主轴方向上的对齐方式；取值：flex-start/flex-end/space-between,space-around;
- align-items:用来表示可伸缩项目在侧轴方向上的对齐方式；取值：flex-start/flex-end/center/baseline/stretch;
- 媒体查询 Media Queries
- 使用方法：
@media 媒体类型 and (媒体特性){ 选择器：{xxx:xxx} } - 注：如果没有明确指定媒体类型，那么默认为all;
- 媒体特性取值：
-
max-width：指媒体类型小于或等于指定的宽度时，样式生效；- 代码：
@media screen and (max-width) { .ads{ display: none; } -
min-width：指媒体类型大于或等于指定的宽度时，样式生效； - 多个特性同时使用，通过and将多个媒体特性连接起来；
- 屏幕在600px-900px之间，使body背景色为红色；
@media screen (min-width: 600px) and (max-width: 900px) { body{ background-color: red; } } - 设备屏幕的输出宽度Device Width
- 定义：在智能设备上，例如iPhone,iPad等，可以根据屏幕设备的尺寸来设置相应的样式，同样对于屏幕设备同样可以使用"max/min"对应参数，如
min-device-width或max-device-width； - 代码：指的是"iphone.css"样式适用于最大设备宽度为480px，比如说在iphone设备上显示，"max-device-width"指的是设备的实际分辨率，也就是指可视面积分辨率；
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> - 定义：在智能设备上，例如iPhone,iPad等，可以根据屏幕设备的尺寸来设置相应的样式，同样对于屏幕设备同样可以使用"max/min"对应参数，如
- not关键词
- 定义：用来排除某种指定的媒体类型；
- 代码：表示除了打印设备和设备宽度小于等于1200px下的所有设置中生效；
@media not print and (max-width: 1200px) { body{ background-color: red; } } - only关键词：
- 定义：用来排除不支持媒体查询的浏览器；很多时候用来对不支持Media Query但支持Media Type的设备隐藏样式表的；
- 解读：1）支持媒体特性的设备，正常调用样式，此时就当only不存在；2）不支持媒体特性但又支持媒体类型的设备，不会读取样式；3）不支持Media Queries的浏览器，不论是否支持only,样式不会被采用；
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="adn.css" /> - 使用多条语句来将同一样式应用到不同的媒体类型和媒体特性中；
- 代码：代表style.css样式应用到宽度小于或等于500px的手持设备上，或被用于屏幕宽度大于等于900px的设备上；
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width: 500px), screen and (min-width: 900px)" />
-
- 兼容性：除了IE6-8浏览器不支持，其余浏览器都支持，无需添加前缀；
- 使用方法：
- CSS3外轮廓属性
- 特点：
- 在页面中呈现的效果和边框border呈现的效果极其相似；
- 与边框完全不同，外轮廓线不占据网页布局空间；
- 外轮廓的内边缘紧贴边框的外边缘；
- 只有元素获取到焦点或者被激活时呈现；
- 语法：
outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit - 解读：
- outline-color,outline-style,outline-width三个属性与border属性相同；
- outline-offset:定义轮廓边框的偏移位置的数值；
- 正值：表示轮廓边框向外偏离的像素值；
- 负值：表示轮廓边框向内偏离的像素值；
- 0：不偏移，指轮廓内边缘与边框外边缘重合；
- 特点：
- CSS生成内容content属性
- 伪类：
:after和before；伪元素：::before和::after - content配合伪类生成内容，但这个属性对于img和input元素不起作用；
- 语法：
content: none || attr || url || string- attr("属性名")：插入标签身上属性名的属性值；
- url():使用指定的绝对或相对地址插入一个外部资源；
- string：字符串，可以是空字符串，常用于清除浮动；
- 实例：通过伪类在a便签后，插入一段内容，内容值为a便签身上的title的属性值；
- 代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>content</title> <style> a{ font-size: 24px; color: red; text-decoration: none; } a:after{ content: attr(title); padding-left: 100px; } </style> </head> <body> <a href="#" title="这是插入的内容值">链接</a> </body> </html>
- 伪类：
- css3学习链接： css3入门教程
