自学WEB前端-2（CSS3）

一、 CSS3简单介绍

CSS3是在CSS2的基础上添加了新的语法和新的属性，就是对CSS2进行了扩充、删减和优化。
增加了圆角，阴影，渐变，过渡或动画，以及新的布局（例如多列布局，弹性盒子布局模型或网格布局）等等

二、 W3C推荐标准

1.1 color的创建和opacity的添加

添加opacity属性和hsl()、hsla()、rgba()和rgb()函数来创建color值。
CSS3还将currentcolor关键字定义为有效颜色，currentcolor关键字表示该元素的color属性值。
transparent是完全透明的颜色（因为对alpha通道的支持），实际上就是rgba(0,0,0,0.0)。
rgb 就是reg green blue alpha的首字母，意思分别是红色通道，绿色通道，蓝色通道，alpha通道
通过给这四个通道赋值来获得一个准确的颜色，alpha控制透明度。
CSS3淘汰了不应在生产环境中使用的system-color关键字。

color可以通过以下任意一种方式定义：

• 使用关键字（例如blue或transparent）
• 使用RGB三次坐标系（通过＃十六进制或rgb()和和rgba()功能符号）
• 使用HSL圆柱坐标系（通过hsl()和hsla()功能符号）

1.2 CSS命名空间

通过使用’ '语法定义CSS限定名称的概念|并添加@namespaceCSS规则，从而增加了对XML命名空间的支持。
@namespace是一个规则，用于定义要在CSS 样式表中使用的XML名称空间。
定义的名称空间可用于将通用类型和属性选择器限制为仅选择该名称空间内的元素。
该规则通常仅在处理包含多个名称空间的文档时才有用，例如带有内联SVG或MathML的HTML5或混合多个词汇的XML。

1.3 扩展选择器

CSS3添加了：

• 子串匹配的属性选择，E[attribute^=“value”]，E[attribute$=“value”]，E[attribute*=“value”]。（E为元素名）
• 新的伪类：:target，:enabled和:disabled，:checked，:indeterminate，:root，:nth-child和:nth-last-child，
  :nth-of-type和:nth-last-of-type，:last-child，:first-of-type和:last-of-type，:only-child和:only-of-type，:empty和:not。
  现在伪元素的特征在于两个冒号而不是一个冒号，
  :after变成::after，:before变成::before，
  :first-letter变成::first-letter，:first-line变成::first-line。
• 新的通用同级组合器（h1~pre）。

:target 			表示一个唯一元素（目标元素），其ID与URL的片段匹配。
:enabled 			表示任何已启用的元素。 如果可以激活（选择，单击，键入等）元素或接受焦点，则该元素已启用。 元素还具有禁用状态，在该状态下无法激活或接受焦点。
:disabled 			表示任何禁用的元素。 如果某个元素无法激活（选中，单击，键入等）或接受焦点，则将其禁用。 元素还具有启用状态，可以在其中激活或接受焦点。
:checked 			表示选中的任何单选（<input type =“ radio”>），复选框（<input type =“ checkbox”>）或选项（＜select>中的＜option>）元素或切换到开启状态。
:indeterminate 		表示状态不确定的任何表单元素。
:root 				与表示文档的树的根元素匹配。 在HTML中：root表示＜html>元素，并且与选择器html相同，不同之处在于它的特异性更高。
:first-child		匹配一组元素的同级中的第一元素
:last-child			匹配一组元素的同级元素的最后一个元素。
:nth-child()		匹配一组元素的同级中的位置。（括号中的值可可以为一个数字，例如2，表示匹配该元素的同级中从前往后的第2个元素，也可以为n（或-n）加（或减）一个数，例如，-n+2,表示该元素同级中从前往后第2个元素开始向前匹配所有元素，数字表示元素的位置，第一个元素为数字1，第二个元素为2，n为正，表示从前往后，n为负，表示从后往前）
:nth-child(even)	匹配一组元素的同级中的奇数位置。
:nth-child(odd)		匹配一组元素的同级中的偶数位置。
:nth-last-child()	匹配一组元素在同级兄弟中的位置（从末尾开始计数）来元素。（括号中的值可可以为一个数字，例如2，表示匹配该元素的同级中从后往前的第2个元素，也可以为n（或-n）加（或减）一个数，例如，-n+2,表示该元素同级中从后往前第2个元素开始向后匹配所有元素，数字表示元素的位置，最后一个元素为数字1，倒数第二个元素为2，n为正，表示从后往前，n为负，表示从前往后）
:nth-of-type()		根据元素在一组同级元素中的位置来匹配给定类型的元素。
:nth-last-of-type()	根据元素在一组同级兄弟中的位置（从末尾开始）来匹配给定类型的元素。
:last-child 		表示一组同级元素中的最后一个元素。
:first-of-type 		表示一组兄弟元素中其类型的第一个元素。
:last-of-type 		表示一组同级元素中该类型的最后一个元素。
:only-child 		表示一个没有任何同级元素的元素,即该元素是其父元素的独生子。 这与：first-child：、last-child或：nth-child（1）、：nth-last-child（1）相同，但特异性较低。
:only-of-type 		表示一个元素，该元素没有相同类型的兄弟姐妹。
:empty 				表示没有子元素的任何元素。 子级可以是元素节点，也可以是文本（包括空格）。 注释，处理说明和CSS内容不会影响元素是否为空。
:not()				表示与选择器列表不匹配的元素。 由于它会阻止选择特定项目，因此称为否定伪类。
::after				创建一个伪元素，它是所选元素的最后一个子元素。它通常用于向具有content属性的元素添加外观内容。

1.4 媒体查询（Media queries）

media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
将以前的媒体类型( print, screen, … ) 扩展为一种完整的语言，允许对设备媒体功能only screen and (color)进行查询。
媒体查询不仅用于CSS文档，还用于HTML元素的一些属性，如＜link>元素的媒体属性。
其中定义并允许作为该属性的值，如print，screen，aural，braille。HTML5将此扩展到了任何类型的媒体查询。
<link media="value">

1.4.1 link中的rel

此属性命名链接文档与当前文档的关系。该属性必须是以空格分隔的链接类型值列表。

• 预加载
  ＜link rel="preload">

<link href="style.css" rel="stylesheet">

1.4.2 link中的sizes

此属性定义资源中包含的视觉媒体的图标大小。
仅当rel包含一个值icon或非标准类型（例如Apple的）时，它才必须存在apple-touch-icon。
它可能具有以下值：

• any，表示该图标可以按矢量格式缩放为任意大小，例如image/svg+xml。
• 由空格分隔的大小列表，每种格式或。这些大小中的每一个都必须包含在资源中。
  <width in pixels>x<height in pixels><width in pixels>X<height in pixels>

1.4.3 link中的title

该title属性在＜link>元素上具有特殊的语义。
当用于<link rel="stylesheet">时，它定义首选样式表或备用样式表。
错误地使用它可能会导致样式表被忽略。

/*提供替代样式表*/
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

1.4.4 link中的type

此属性用于定义链接到的内容的类型。
该属性的值应为MIME类型，例如text / html，text / css等。
此属性的常见用法是定义所引用的样式表的类型（例如text / css）
但是鉴于CSS是网络上使用的唯一样式表语言，不仅可以省略该type属性，而且现在推荐练习时使用。
它还用于rel="preload"的链接类型，以确保浏览器仅下载其支持的文件类型。

/*样式表加载事件*/
<script>
var myStylesheet = document.querySelector('#my_stylesheet');

myStylesheet.onload = function() {
   console.log("样式表已经加载"); 
}

myStylesheet.onerror = function() {
  console.log("错误加载");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my_stylesheet">

1.5 CSS背景和边框

添加：

• 在后台支持任何类型的<image>，不仅支持已uri()定义的。
• 支持多个背景图像。
• background-repeat(背景重复)的space和round 属性值以及此CSS属性的2-value语法。
• background-attachment的local属性值
• CSS的background-origin(背景原点)，background-size(背景大小)和background-clip(背景剪辑)属性。
• 支持弯曲的边框角，具有 border-radius，border-top-left-radius，border-top-right-radius，border-bottom-left-radius，和border-bottom-right-radius属性。
• 支持使用的<image>作为border-image（边框图像），border-image-source（边框图像源），border-image-slice（边框图像切片），border-image-width（边框图像宽度），border-image-outset（边框图像开始），和border-image-repeat（边框图像重复）的属性。
• 支持通过box-shadow属性支持元素的阴影。

1.5.1 background-clip (背景裁剪)

background-clip设置元素的背景是扩展到其边框、填充框还是内容框之下。

If the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference.
如果元素没有 background-image或 background-color，则此属性仅在边框具有透明区域或部分不透明区域（由于边框样式或边框图像的原因）时才具有视觉效果

background-clip 的四个属性：
border-box	背景延伸到边界的外部边缘（但在边界的下方按z顺序排列）。

padding-box	背景延伸到填充的外边缘。边界下面没有背景。

content-box	背景在内容框中绘制（剪裁到内容框中）。

text 		背景是在前景文本中绘制的。

1.6 多列布局

添加简单多列布局的支持
属性columns,column-count, column-fill, column-gap, column-rule,column-rule-color, column-rule-style, column-rule-width, column-span, column-width, break-after,break-before, and break-inside

																							中文解释
column 				设置元素的列宽和列数。														列
column-count 		将元素的内容分为指定的列数。													列计数
column-fill  		控制将元素分成几列时如何平衡元素的内容。										列填充
column-gap 			设置元素的列之间的间距（装订线）的大小。										列间距
column-rule 		设置多列布局中列之间绘制的线条的宽度，样式和颜色。								列规则
column-rule-color 	设置多列布局中列之间绘制的线条的颜色。										列规则颜色
column-rule-style 	设置多列布局中各列之间绘制的线条的样式。										列规则样式
column-rule-width 	设置多列布局中各列之间绘制的线条的宽度。										列规则宽度
使用column-span		将元素的值设置为all时将其跨所有列。											列跨度
column-width 		在多列布局中设置理想的列宽。													列宽度
break-after 		设置页面、列或区域分隔符在生成框之后应如何表现。 如果没有生成的框，则忽略该属性。		打断后
break-before		设置页面、列或区域分隔符在生成框之前应如何表现。 如果没有生成的框，则忽略该属性。		打断前
break-inside 		设置页面、列或区域分隔符在生成的框内应如何表现。 如果没有生成的框，则忽略该属性。		打断中

1.7 Flexible Box Layout Module（弹性盒子布局模型）

向CSS display属性添加flexbox布局，并添加几个新的CSS属性来控制它：flex、flex align、flex direction、flex flow、flex item align、flex line pack、flex order、flex pack和flex wrap。

1.8 Grid Layout（网格布局）

添加网格布局
display属性和几个新的CSS属性来控制它：
grid，grid-area，grid-auto-columns，grid-auto-flow，grid-auto-position，grid-auto-rows，
grid-column，grid-column-start，grid-column-end，grid-row，grid-row-start，grid-row-end，
grid-template，grid-template-areas，grid-template-rows，和grid-template-columns。

grid  					是一种简写属性，用于设置所有显式网格属性（grid-template-rows，grid-template-columns和grid-template-areas）以及所有隐式网格属性（grid-auto-rows，网格自动列和网格自动流）
grid-area  				是grid-row-start，grid-column-start，grid-row-end和grid-column-end的简写属性，通过添加一行来指定网格项的大小和在网格内的位置，跨度，或者没有（自动）到其网格位置，从而指定其网格区域的边缘。
grid-auto-columns  		指定隐式创建的网格列轨道或轨道模式的大小。
grid-auto-flow  		控制自动放置算法的工作方式，准确指定自动放置的项目如何流入网格。
grid-auto-position
grid-auto-rows  		指定隐式创建的网格行轨迹或轨迹模式的大小。
grid-column  			是grid-column-start和grid-column-end的简写属性，通过为其网格位置贡献线，跨度或不进行任何设置（自动）来指定网格项在网格列内的大小和位置，从而指定其网格区域的inline-start和inline-end边缘。"
grid-column-start  		通过在网格位置中添加线条，跨度或不添加任何内容（自动）来指定网格项目在网格列内的开始位置。 该起始位置定义了网格区域的块起始边缘。
grid-column-start  		通过在网格位置中添加线条，跨度或不添加任何内容（自动）来指定网格项目在网格列内的开始位置。 该起始位置定义了网格区域的块起始边缘。
grid-column-end  		通过在网格位置中添加线条，跨度或不添加任何内容（自动）来指定网格项在网格列中的最终位置，从而指定其网格区域的块端边缘。
grid-row  				是grid-row-start和grid-row-end的简写属性，通过为其网格位置贡献线，跨度或不添加任何内容（自动）来指定网格项在网格行中的大小和位置，从而指定其网格区域的inline-start和inline-end边缘。
grid-row-start  		通过在网格位置上放置线条，跨度或不添加任何内容（自动）来指定网格项目在网格行中的开始位置，从而指定其网格区域的内联开始边缘。
grid-row-end  			通过在网格位置上放置线条，跨度或不添加任何内容（自动）来指定网格项目在网格行中的末端位置，从而指定其网格区域的行内末端边缘。
grid-template  			是用于定义网格列，行和区域的简写属性。
grid-template-areas 	指定命名的网格区域。
grid-template-rows  	定义了网格行的行名和轨道大小调整功能。
grid-template-columns  	定义了网格列的行名和轨道大小调整功能。

1.9 hadow阴影

1.9.1 text-shadow(文本阴影)

将阴影添加到文本中。它接受以逗号分隔的阴影列表，以应用于文本及其任何装饰。每个阴影由元素的X和Y偏移、模糊半径和颜色的某种组合来描述。

/* offset-x(x轴偏移即水平阴影) | offset-y(Y偏移即垂直阴影) | blur-radius(模糊半径) | color (阴影颜色)*/
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;


/* Use defaults for color and blur-radius
使用阴影颜色和模糊半径的缺省值(即不设置阴影颜色和模糊半径)*/
/* offset-x | offset-y*/
text-shadow: 5px 10px;
/* 当给出多个阴影时，阴影从前到后应用，第一个指定的阴影在顶部*/
text-shadow:1px 2px 2px black,1px 3px 5px white;

1.9.2 box-shadow(盒子阴影)

给盒子周围的边框加阴影效果。设置多个效果，以逗号分隔。box-shadow 由相对于元素的X和Y偏移，模糊和扩散半径以及颜色的组合来描述。
如果在具有框阴影的元素上指定了边框半径，则框阴影采用相同的圆角。多个box-shadow的z轴顺序与多个text-shadow相同（第一个指定的阴影位于顶部）。
阴影z轴位置 如果未指定（默认值），则阴影被假定为投影阴影（就像将框抬高到内容上方）。
inset将阴影在框架内更改为一个阴影（就像在框内按下内容一样），绘制在边框内（甚至透明的阴影），在背景上方，但在内容下方。

box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x(x轴偏移即水平阴影) | offset-y(Y偏移即垂直阴影) | blur-radius(模糊半径) | color (阴影颜色)*/
box-shadow: 10px 5px 5px black;

/* offset-x(x轴偏移即水平阴影) | offset-y(Y偏移即垂直阴影) | blur-radius(模糊半径) |spread-radius(扩散半径)| color (阴影颜色)*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset(内部阴影) | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* 多个阴影设置，以逗号分隔*/
box-shadow: 3px 3px red, -1em 0 0.4em olive;


box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

1.10 transition(过渡)

通过将CSS允许的两个属性值之间的过渡效果的定义transition，transition-delay，transition-duration，transition-property，和transition-timing-function特性。

transition 						过渡属性，过渡持续时间，过渡计时功能和过渡延迟的简写属性。
transition-delay 				指定属性值更改时开始属性过渡效果之前要等待的持续时间。
transition-duration 			设置完成过渡动画所需的时间。 默认情况下，该值为0s，表示不会发生动画。
transition-timing-function 		CSS属性设置了如何计算受过渡效果影响的CSS属性的中间值。
transition-property				指定CSS属性的特定效果（transition-property将启动指定的CSS属性的变化）。
提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。
注意：始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

	div
	{
		width:100px;
		height:100px;
		background:red;

		transition-property:width,height;
		transition-duration:2s;
	}

	div:hover  /*悬停*/
	{
		width:300px;
		height:300px;
	}

1.11 animation (动画)

通过添加CSS允许的动画效果的定义animation，animation-delay，animation-direction，animation-duration，animation-fill-mode，animation-iteration-count，animation-name，animation-play-state，和animation-timing-function性质，以及该@keyframes@规则。

animation					在样式中设置动画
animation-delay 	 		动画延迟，立即开始或在动画中途开始。
animation-direction 		设置动画是向前播放，向后播放还是来回交替播放。
animation-duration 			设置动画完成一个周期所需的时间。
animation-fill-mode 		设置CSS动画在执行之前和之后如何将样式应用于其目标。
animation-iteration-count 	设置在停止之前应播放动画循环的次数
animation-name 				设置一个或多个要应用于元素的动画。 每个名称都是一个@keyframes规则，该规则设置动画序列的属性值。
animation-play-state 		设置动画是运行还是暂停
animation-timing-function 	设置动画在每个周期的持续时间内如何进行



@keyframes 					CSS规则通过定义动画序列中关键帧（或航点）的样式来控制CSS动画序列中的中间步骤。