CSS3学习总结

在 CSS3 中，并没有采用总体结构，而是采用了分工协作的模块化结构

选择器

属性选择器：

[att*=val]
[att^=val]
[att$=val]

伪类和伪元素

a:link
a:visited
a:hover
a:active

:first-line
:first-letter
:after
:before

:root
:not()
:empty
:target

:first-child (css2)
:last-child (css3)
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:only-child

:hover
:active
:focus

:enabled
:disabled
:read-only
:read-write
:checked

::selection

使用选择器在页面中插入内容

利用 before 伪元素和 after 伪元素的 content 属性插入内容

插入文字

h2:before {
  content: 'COLUMN';
  color: #fff;
  background: orange;
  font-family: 'Comic Sans MS', Helvetica, sans-serif;
  padding: 1px 5px;
  margin-right: 10px;
}

指定个别元素不进行插入：none 属性和 normal 属性

插入图像文件

h2:before {
  content: url(https://www.baidu.com/img/bd_logo1.png);
}

content: attr(name);
img:after {
  content: attr(alt);
}
a:after {
  content: '(' attr(href) ')';
}

使用 content 属性来插入项目编号

指定编号的种类

h1 {
  counter-increment: mycounter;
}
h1:before {
  content: counter(mycounter, upper-roman) '.';
  color: blue;
  font-size: 42px;
}

编号嵌套：

h1 {
  counter-increment: mycounter;
  counter-reset: subcounter;
}
h1:before {
  content: counter(mycounter) '.';
}
h2 {
  counter-increment: subcounter;
}
h2:before {
  content: counter(mycounter) '-' counter(subcounter) '.';
}

在字符串两边添加嵌套文字符号

h1 {
  quotes: '(' ')';
}
h1:before {
  content: open-quote;
}

h1:after {
  content: close-quote;
}

文字与字体

阴影：text-shadow

多个阴影：

div {
  text-shadow: 5px 5px 5px gray, 10px 10px 5px red, 15px 15px 5px blue;
  font-size: 50px;
}

word-break

当 word-break 属性为 break-all 时，对于西文来说，允许在单词内换行，对于标点符号，实测在 Firefox 中允许标点符号位于行首，其他浏览器不允许。

word-wrap

word-wrap:break-word;
word-wrap 是用来决定允不允许英文单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。
而 word-break:break-all 则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句

@font-face

font-size-adjust

font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。字体的小写字母 “x” 的高度与”font-size”高度之间的比率被称为一个字体的 aspect 值。

盒相关的样式

display

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。
list-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）

box-shadow

box-sizing(IE8+)

背景和边框相关的样式

背景

background 在一个声明中设置所有的背景属性。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。
background-clip 规定背景的绘制区域。css3 默认为 border-box
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸。

border-radius

border-image

JavaScript 语法：object.style.borderImage=”url(border.png) 30 30 round”
border-image-repeat: repeat/round/stretch

CSS3 中的变形处理

translate()
rotate()
scale()
skew()
matrix()
transform 向元素应用 2D 或 3D 转换
transform-origin 允许你改变被转换元素的位置

注意：这些方法只对 block 水平元素有效

过渡与动画

过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长

动画

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长

多列

column-count
column-gap
column-rule

弹性盒子

A Complete Guide to Flexbox
Properties for the Parent(flex container):
display: flex; /_ or inline-flex _/
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Properties for the Children(flex items):
1)order: integer;
2)flex-grow: number; /_ default 0 /
设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间.3
3)flex-shrink: number; / default 1 /
flex-shrink 的默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。
4)flex-basis: length | auto; / default auto _/
auto：无特定宽度值，取决于其它属性值
length：用长度值来定义宽度。不允许负值
percentage：用百分比来定义宽度。不允许负值
5)flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
6)align-self: auto | flex-start | flex-end | center | baseline | stretch;
Note that float, clear and vertical-align have no effect on a flex item.

媒体查询

CSS 2
实际上在很早之前，CSS 就支持媒体查询了
页面有些部分需要在打印的时候隐藏或者变大，这时候可以使用 media 使某些 style 只在打印的时候生效

@media print {
  /* 适用于印刷的样式 */
}

常用的媒体类型有

1. all（所有），适用于所有设备。
2. handheld（手持），用于手持设备。
3. print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。
4. projection（投影），用于投影演示文稿，例如投影仪。
5. screen（屏幕） ，主要用于计算机屏幕。

在使用的时候可以在样式表直接书写 @media 指令+空格+媒体类型（多个逗号隔开）

@media print {
  body {
    font-size: 10pt;
  }
}
@media screen {
  body {
    font-size: 13px;
  }
}
@media screen, print {
  body {
    line-height: 1.2;
  }
}

CSS 3
但是 CSS 2 的媒体类型应用场景极为有限，CSS3 大大拓展了这一能力

@media screen and (max-width: 990px) {
  .container {
    background: orange;
  }
}

当媒体类型匹配且表达式为真的时候，对应 style 就会其作用，除非使用 not 或者 only 操作符，否则媒体类型不是必需的，默认代表所有媒体类型。

操作符

1)and
and 操作符用于将多个 media feature 组合成一个查询，同时用于组合 media type 和 media feature，一个基本的 media query 类似这样，一个 meidia feature 作用于所有 media type

@media (min-width: 700px) { ... }

但是如果只想在横向显示时应用就可以使用 and 操作符把 media type 和 media feature 结合起来
@media (min-width: 700px) and (orientation: landscape) { … }
这样上面的 media query 只有在可视窗口（viewport）最小是 700px 并且是横向显示的时候才返回 true，如果还想进一步限制设备为 tv 可以这样
@media tv and (min-width: 700px) and (orientation: landscape) { … } 2)逗号分隔的列表
在使用逗号分隔的查询列表中每个查询都被视为一个独立的查询，任何本查询中的作用符不影响其他查询，只要有一个查询返回 true，style 就会被作用。
举例来说，如果希望特定 style 在 viewport 最小宽度为 700px 或手持式设备上生效，可以这么写：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

3)not
not 操作符作用域整个查询，所以只有在整个查询返回 false 的情况下使用 not 后才会返回 true。当使用逗号分隔的列表的时候 not 作用于邻近的查询，而不会作用于每个查询

@media not all and (monochrome) { ... }

查询其实会这样起作用

@media not (all and (monochrome)) { ... }

而不是这样

@media (not all) and (monochrome) { ... }

对于逗号分隔的列表

@media not screen and (color), print and (color)

查询是这样子的

@media (not (screen and (color))), print and (color)

4)only
only 操作符用于阻止不支持带有 media feature 的 media queries 的浏览器应用特定 style

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

media features

有以下常用的 media feature
width：浏览器宽度
height：浏览器高度
device-width：设备屏幕分辨率的宽度值
device-height：设备屏幕分辨率的高度值
orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为 portrait，否则为 landscape
aspect-ratio：比例值，浏览器的纵横比
device-aspect-ratio：比例值，屏幕的纵横比
color：设备使用多少位的颜色值，如果不是彩色设备，值为 0
color-index：色彩表的色彩数
monochrome：单色帧缓冲器每个像素的字节
resolution：分辨率值，设备分辨率值
scan：电视机类型设备扫描方式，progressive 或 interlace
grid：只能指定两个值 0 或 1，是否基于栅格的设备

如何引入 media

有两种常用的引入方式
link 方法引入

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

@media 引入

@media screen and (min-width: 600px) and (max-width: 800px){
    选择器{
        属性：属性值；
    }
}

CSS3 其他

颜色相关的样式

1)增加 rgba、hsl、hsla
alpha 通道和 opacity 属性区别：使用 alpha 通道时，可以单独针对元素的背景色和文字样式等指定透明度，而 opacity 只能指定整个元素的透明度。 2)指定颜色值为 transparent
CSS2 中，可以在 background-color、border-color 属性中指定 transparent 值，在 CSS3 中，可以在一切指定属性值的属性中指定 transparent 值。

用户界面相关

1)outline 与 outline-offset
CSS3 如何实现圆角的 outline 效果
offset 支持负值
2)resize
与 overflow：auto 或 overflow：hidden 配合使用。