第四章 CSS3概述

1.CSS3新增常用选择器
（1）结构性伪类选择器
:root 文档根元素 :nth-child(n) 第N个子元素
"first-child 第一个元素 :kast-child 最后一个子元素

（2）UI元素状态伪类选择器
:link 未访问状态 :hover鼠标悬浮状态
:active激活状态（点击未释放） :visited已访问状态
:focus 获得焦点状态 :checked已选中状态

（3）其他
::selection 有内容被选择（浏览器专属属性）
:not() 满足前面，不满足后面的选择
:target 选择锚点
-------------------------------------------------------------------------------------------------------------------------
CSS 选择器： 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
-------------------------------------------------------------------------------------------------------------------------
element 选择所有 <element > 元素。
.intro 选择 class="intro" 的所有元素。
#firstname 选择 id="firstname" 的所有元素。
-------------------------------------------------------------------------------------------------------------------------
* 选择所有元素
-------------------------------------------------------------------------------------------------------------------------element1,element2 选择所有 <element11 > 元素和所有 <element2> 元素。
element1 element2 选择 <element1> 元素内部的所有 <element2> 元素。
element1>element2 选择父元素为 <element1> 元素的所有 <element2> 元素。
element1+element2 选择紧接在 <element1> 元素之后的所有 <element2> 元素。
element1~element2 选择前面有 <element1> 元素的每个 <element2> 元素。
-------------------------------------------------------------------------------------------------------------------------
[attribute] [target] 选择带有 target 属性所有元素。
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
-------------------------------------------------------------------------------------------------------------------------
:link a:link 选择所有未被访问的链接。
:visited a:visited 选择所有已被访问的链接。
:active a:active 选择活动链接。
:hover a:hover 选择鼠标指针位于其上的链接。
:focus input:focus 选择获得焦点的 input 元素。
:first-letter p:first-letter 选择每个 <p> 元素的首字母。
:first-line p:first-line 选择每个 <p> 元素的首行。
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
:before p:before 在每个 <p> 元素的内容之前插入内容。
:after p:after 在每个 <p> 元素的内容之后插入内容。
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。
-------------------------------------------------------------------------------------------------------------------------
2.CSS3新增属性
（1）字体相关属性：
字体的阴影text-shadow:X轴偏移度 Y轴偏移度 阴影模糊半径 阴影颜色；
服务器字体@font-face{ font-familly:自定义字体名;src:url(字体路径) format("字体格式");} 【支持TrueType和OpenType】

（2）文本相关属性：
文本溢出 text-overflow:clip裁剪\ellipsis裁剪并显示溢出标记；
自动换行 word-break:keep-all不允许\break-all允许

（3）颜色相关属性：
css3支持的颜色表示：颜色吗，十六进制，rgb(r,g,b)、rgba(r,g,b,透明度)、hsl（色调，饱和度，亮度控制），hsla（色调，饱和度，亮度控制，透明度）
——————————————————————————————————————————
CSS 颜色值：十六进制色、RGB 颜色、RGBA 颜色、HSL 颜色、HSLA 颜色、预定义/跨浏览器颜色名
（1）CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。
对光源进行设置的最低值可以是 0（十六进制 00），最高值是 255（十六进制 FF）。
十六进制值使用三个双位数来编写，并以 # 符号开头。
——————————————————————————————————————————
十六进制— RGB
#000000=rgb(0,0,0) #FF0000=rgb(255,0,0) #00FF00=rgb(0,255,0) #0000FF=rgb(0,0,255) #FFFF00=rgb(255,255,0) #00FFFF=rgb(0,255,255)
#FF00FF=rgb(255,0,255) #C0C0C0=rgb(192,192,192) #FFFFFF=rgb(255,255,255)
——————————————————————————————————————————
（2）网络安全色 有216个跨浏览器调色板被创建的目的是确保当计算机运行
256 色调色板时能够正确地显示颜色：
000000、000033、000066、000099、0000CC、0000FF、003300、003333、003366、
003399、0033CC、0033FF、006600、006633、006666、006699、0066CC、0066FF、
009900、009933、009966、009999、0099CC、0099FF、00CC00、00CC33、00CC66、
00CC99、00CCCC、00CCFF、00FF00、00FF33、00FF66、00FF99、00FFCC、00FFFF、
330000、330033、330066、330099、3300CC、3300FF、333300、333333、333366、
333399、3333CC、3333FF、336600、336633、336666、336699、3366CC、3366FF、
339900、339933、339966、339999、3399CC、3399FF、33CC00、33CC33、33CC66、
33CC99、33CCCC、33CCFF、33FF00、33FF33、33FF66、33FF99、33FFCC、33FFFF、
660000、660033、660066、660099、6600CC、6600FF、663300、663333、663366、
663399、6633CC、6633FF、666600、666633、666666、666699、6666CC、6666FF、
669900、669933、669966、669999、6699CC、6699FF、66CC00、66CC33、66CC66、
66CC99、66CCCC、66CCFF、66FF00、66FF33、66FF66、66FF99、66FFCC、66FFFF、
990000、990033、990066、990099、9900CC、9900FF、993300、993333、993366、
993399、9933CC、9933FF、996600、996633、996666、996699、9966CC、9966FF、
999900、999933、999966、999999、9999CC、9999FF、99CC00、99CC33、99CC66、
99CC99、99CCCC、99CCFF、99FF00、99FF33、99FF66、99FF99、99FFCC、99FFFF、
CC0000、CC0033、CC0066、CC0099、CC00CC、CC00FF、CC3300、CC3333、CC3366、
CC3399、CC33CC、CC33FF、CC6600、CC6633、CC6666、CC6699、CC66CC、CC66FF、
CC9900、CC9933、CC9966、CC9999、CC99CC、CC99FF、CCCC00、CCCC33、CCCC66、
CCCC99、CCCCCC、CCCCFF、CCFF00、CCFF33、CCFF66、CCFF99、CCFFCC、CCFFFF、
FF0000、FF0033、FF0066、FF0099、FF00CC、FF00FF、FF3300、FF3333、FF3366、
FF3399、FF33CC、FF33FF、FF6600、FF6633、FF6666、FF6699、FF66CC、FF66FF、
FF9900、FF9933、FF9966、FF9999、FF99CC、FF99FF、FFCC00、FFCC33、FFCC66、
FFCC99、FFCCCC、FFCCFF、FFFF00、FFFF33、FFFF66、FFFF99、FFFFCC、FFFFFF
——————————————————————————————————————————
（3）透明度：所有内容变透明，包括文字和背景。opacity:0.2; 整体透明修改
background-color:rgba(0,0,0,0);/*红，绿，蓝，透明度（颜色0-255，,透明度0-1）
——————————————————————————————————————————

（4）背景相关属性
背景图片固定background-attachment:fixed;
背景大小设置background-size:auto长度\百分比;
——————————————————————————————————————————
属性 描述
background 在一个声明中设置所有的背景属性。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-size 规定背景图片的尺寸。
——————————————————————————————————————————

（5）边框相关属性：
渐变边框 border-color:#555 #777 #999 #bbb;
圆角边框 border-radius:10px 20px 30px 40px;
——————————————————————————————————————————
CSS 边框属性（Border 和 Outline）
属性 描述
border 在一个声明中设置所有的边框属性。
border-bottom 在一个声明中设置所有的下边框属性。
border-bottom-color 设置下边框的颜色。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-color 设置四条边框的颜色。
border-bottom-left-radius 定义边框左下角的形状。
border-bottom-right-radius 定义边框右下角的形状。
border-image 简写属性，设置所有 border-image-* 属性。
border-image-outset 规定边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-slice 规定图像边框的向内偏移。
border-image-source 规定用作边框的图片。
border-image-width 规定图片边框的宽度。
border-radius 简写属性，设置所有四个 border-*-radius 属性。
border-top-left-radius 定义边框左上角的形状。
——————————————————————————————————————————
（6）大小，定位，轮廓属性：
改变大小 resize:none\both\horizontal\横向\vertical\垂直\inhenit\继承;
定位属性position:static静态\fixed固定\relative相对、absolute绝对
轮廓属性outline:线性 线宽 颜色;

（7）变形属性Transform(旋转中心transform-origin:方向\长度\百分比;)
translate(tx,ty) 移动的距离（10px）
scale(sx,sy) 缩放比例（1,0.8）
rotate（角度） 旋转 （90deg）
skew(sx,sy) 倾斜（0,45deg）
-------------------------------------------------------------------------------------------------------------------------
过度属性Transition
transition:指定属性 持续时间 渐变速度 延迟时间； 【all属性所有】
例如：transition: background-color 4s linear 1s;
-------------------------------------------------------------------------------------------------------------------------
（8）CSS3 动画属性（Animation）
属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定动画何时开始。
animation-iteration-count 规定动画被播放的次数。
animation-direction 规定动画是否在下一周期逆向地播放。
animation-play-state 规定动画是否正在运行或暂停。
-------------------------------------------------------------------------------------------------------------------------
CSS 属性组：动画、背景、边框轮廓、可伸缩框、字体、超链接、行框、列表、外边距、内边距、文本。
-------------------------------------------------------------------------------------------------------------------------
CSS 尺寸属性（Dimension）
属性 描述
height 设置元素高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
-------------------------------------------------------------------------------------------------------------------------
CSS 字体属性（Font）
属性 描述
font 在一个声明中设置所有字体属性。
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-size-adjust 为元素规定 aspect 值。
font-stretch 收缩或拉伸当前的字体系列。
font-style 规定文本的字体样式。
font-variant 规定是否以小型大写字母的字体显示文本。
font-weight 规定字体的粗细。
-------------------------------------------------------------------------------------------------------------------------
Hyperlink 属性
属性 描述
target 简写属性，设置target-name、target-new以及target-position属性。
target-name 规定在何处打开链接（链接的目标）。
target-new 规定目标链接在新窗口还是在已有窗口的新标签页中打开。
target-position 规定在何处放置新的目标链接。
-------------------------------------------------------------------------------------------------------------------------
CSS 列表属性（List）
属性 描述
list-style 在一个声明中设置所有的列表属性。
list-style-image 将图象设置为列表项标记。
list-style-position 设置列表项标记的放置位置。
list-style-type 设置列表项标记的类型。
marker-offset CSS 外边距属性（Margin）
-------------------------------------------------------------------------------------------------------------------------
CSS 文本属性（Text）
属性 描述 CSS
color 设置文本的颜色。 1
direction 规定文本的方向 / 书写方向。 2
letter-spacing 设置字符间距。 1
line-height 设置行高。 1
text-align 规定文本的水平对齐方式。 1
text-decoration 规定添加到文本的装饰效果。 1
text-indent 规定文本块首行的缩进。 1
text-shadow 规定添加到文本的阴影效果。 2
text-transform 控制文本的大小写。 1
unicode-bidi 设置文本方向。 2
white-space 规定如何处理元素中的空白。 1
word-spacing 设置单词间距。 1
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3