CSS3.2
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3.2相关的知识，希望对你有一定的参考价值。
样式表：
简单地说样式表分成三种：外部样式表、嵌入式样式表、内联样式表。
外部样式表：就是创建了一个CSS文档，然后在html文档中使用像 <link rel="stylesheet" href="XXXXXXX" />
将这个外部（相对于使用它的html文档）链接到使用它的html中，然后使得各种样式生效。 外部样式表（按照书中的说法）应该是三种样式表中最提倡使用的
外部样式表的特点在于，对外部样式表进行修改时，所有引用它的页面也会进行自动更新（所以说，类似游戏更新的的意思？）
还有就是，如果浏览器在某个网页加载了这个外部样式表，那么之后引用这个页面时就不需要向Web服务器再加载这个用样式文件了，因为这个外部样式表会被保存到缓存里头，也就是说被保存到我们的计算机里头。可以很好地加快加载该页面，同时，很给力的是，即使这个外部用样式表被修改了，那些修改也会被浏览器下载然后更新已保存在计算机中的原外部样式表。
嵌入式样式表：外部样式表是在通过连接外部加载样式，而嵌入式则是干脆地在内部对样式进行编辑（我是这么理解的，包括内联样式表也是，只不过是直接写在标签里罢了）
嵌入式样式表写在html文档的<head>标签中。在该标签中创建一个style元素，然后就可以开始对所需的样式进行编辑了。
因为嵌入式样式表是写在网页（html）里的，所以它的作用范围也就仅仅只是它所存在的那个网页，绝对不会像外部样式表一样有被多个网页同时应用的可能性（排除丧心病狂地给多个网特编辑相同的嵌入式样式表的可能，因为这样做的意义其实就是创建一个外部样式表大家一起加载）。所以嵌入式也就不会具有外部的那些缓存的优势了，也就是说同同样的页面，在一次次打开的时候，相同的样式需要一次次地加载，有点蛋疼。
这里要提一下样式表对于使用它们的同一个网页的加载顺序（也就是说在不同情况下，到底谁才会被真正使用，谁的效力被覆盖了）。嵌入式写在style里，那么只有在<head>中，style写在外部样式表链接的link后头时，嵌入式才会覆盖外部。
内联样式表：作为CSS中样式使用的最后一种方式，恩，有点经常性被忽视。理由嘛，都说了html显示i的是网页的内容，css负责的是网页的表现形式，那么内容和表现就应该被严格地区别开来，井水不犯河水。所以我也觉得内联有点不清不楚的意思。
内联样式表跟其他两种样式表最大的区别可能就是它只能作用于一个元素，想都不用想。所以外部样式表所具有的有点它也不会有。
然后就是，麻烦，这也是我觉得使用内联样式不可思议的地方，也应该是内联样式不可能在网页中大量存在的最重要的原因。只要想一想，样式全都写在元素标签里，然后修改的时候一个元素一个元素的改过去，额，画面很美所以我不敢看也不想试。但是存在即合理，如果我们希望测试某个样式的话，可以快捷地使用内联的方式。
内联样式表因为是写在标签内部的，所以类似于属性值，双引号是必不可少的。同时，如果要指定字体什么的，对字体名称要用单引号。不能再两个地方使用相同类型的引号。
内联样式表的优先级别高于其他样式表（毕竟是直接写在作用的标签内的）。
栗子：
外部样式表：略
嵌入式样式表：
<html>
<head>
<style>
h1{color:red;}
……
</style>
</head>
</html>
内联样式表：
<h1 style="color:red">XXXX</h1>
样式的层叠和顺序：
在上一块有说过，当head中的style写在link后面时，嵌入式样式表会覆盖外部样式表。那么除此之外呢？
对作用于同一个元素的样式而言，在规则的特属性和其他条件相同的情况下，越晚出现的样式优先级就越高（之前的CSS3.1有提到一丢丢）。
具体的，嵌入式和外部的优先级取决于它们在html中的相对位置，也是谁在后头谁优先级高。
基于越后边优先级越高的原则，因为内联样式表在嵌入式和外部之后（因为是写在<body>内的元素内），所以一般况下，内联的优先级最高。其他有冲突的样式都会被内联样式覆盖。
唯一的例外是 ！important ，只要有这个标识的样式就能拥有最高级别的优先权，但是也因为这个权限级别的特殊性，所以 ！important 能不用就不用。
但是！important 型的样式也不是无法覆盖的，只是一定要这么做的话，需要一个更长的样式规则。（巫师与恶龙，永远创在更强的龙才能打败之前的龙）
与媒体相关的样式表：
在link或者style元素的开始标签中添加 meadia="XXX"，其中XXX可以是output、print、screen、all。
然后就能使用 @media规则 《HTML5与CSS3基础教程》 P147
定义选择器：
样式=选择器（决定样式作用于哪些元素）+声明（被应用的格式）
选择器：
选择器定义有五个不同的标准可以用来选择需要进行格式化的元素：元素的类型或名称（h1{color:red;}）；元素所在的上下文（h1 em{color:red;} 这个栗子中样式值作用于h1元素中的em元素） ；
元素的ID或者类（.error{color:red;} 在这里error是该选择器选择要作用的元素所属的类）；元素的伪类或者伪元素（a：link{color：red;} 在这里被选择的是link伪类的a元素）；
元素是否含有某些属性和值（a[title]{color:red;}在这里，被选择的是含有title属性的a元素）
在编写CSS的过程中，要注意让选择器尽量的简单，仅仅是带有必要的特殊性。同时充分利用样式的层叠性质（就是某些样式可以被祖先元素的后代元素继承）。同时可以将网页中通用的设计元素挑选出来，
然后为它们编写一个专门的选择器（建立一个类或者什么的），从而在很大程度上运用样式的共享特点。这样做的好处还在于修改和更新的便利。（在这里我说的都是面向外部样式表）
按照名称选择元素：这个毫无疑问是最简单的，按照大家的说法就是类型选择器（书上是这么说的），由来应该是因为指定了应用的元素的类型。
通用的样式就是 元素名{属性：属性值；}
如果，我是说如果，我们有不止一个的元素需要同一种样式，例如h1,h2……都要添加同一种贪色，那么问题来了，怎么样可以在编写上进行偷懒？答案就是在不同的元素名间用逗号隔开，其他不变：
h1,h2,h3{color:red;}
按照上下文选择元素：
使用这种构造选择器的方法，需要根据目标元素的祖先或者父元素或者同胞元素（就是拥有同一个父元素）来定位该元素的位置。
例子：
<div>
<article> div article p{color:red;}
<p> ……</p>
</article>
</div>
首先要先写出目标元素的祖先的选择器（最上层的祖先，然后必要的话把接下来的祖先的选择器也一层层写下来），然后是目标元素的选择器，其他不变。注意的是，每两个选择器之间必须要有一个空格间隔。
<article>
<p>……</p> article>p{color:red;}
<article>
这里跟上一个的区别在于目标元素p只有一个祖先，也就是说它只有父元素，所以在这里就不是按照祖先元素选择了，而是按照父元素选择。同时在父元素选择器和子元素选择器之间连接的是 > 符号。
<article class="architect">
<h1>……</h1> .architect h1+p{color:red;}
<p>……</p>
</body>
在这个栗子中，会变成红的的是p元素。这是按照按同胞元素来选择的结果。先找出目标元素与其同胞元素的公共父元素,然后写出直接出现在目标元素之前的元素，然后跟上一个 + 符号（之后有必要的话，重复之前的步骤），最后是目标元素选择器，其他不变。
按照ID或者类选择元素：
类的运用极大地方便了一些样式的编写，尤其是在设计通用的元素时，可以打包格式化。
例子：
<p class="xhb">……</p>
<h1 class="xhb">……</h1> .xhb {color:red;} p.xhb{color:red;}
因为p和h1都拥有类名xhb，所以当他们不要上同一种颜色时，可以用类的选择器来便捷编写（前提含有类名 xhb的元素都需要一直的格式化）。同时，也因为很多元素都能拥有同一个类名，那如果只想给这一类中分某个元素添加样式，就需要像加粗的例子一样将目标元素写在前头，表示它的特殊性。还有就是如果类名不止一个，那就需要都写出来，如：.xhb.XHB{color:red;}
<p id="XHB"> #XHB{color:red;}
根据id来选择元素选择器与类的类似，但是要再次重申的是，类名不止可以在一个网页里可以不止一个，同一个元素也可以拥有不止一个，但是id无论如何在同一个页面中都只能有一个。
在类选择器和id选择器之间，尽可能地选择前者。因为类可以重复使用，而id不能，甚至有人提出完全不使用id选择器。具体见书《HTML5与CSS3基础教程》P155
选择第一个或者最后一个元素：
顾名思义，这一类的选择器就是为了在特殊情况下方便我们选择一组相关元素中的第一个或者最后一个。比如一组的列表元素<li>，这个时候可能就需要选择第一个或者最后一个元素的选择器。
例子：
……
<ul>
<li>……</li> <li>……</li> <li>……</li> <li>……</li>
</ul>
li:first-child{color:red;} li:last-child{color:red;}
注意到这里特别添加了两个伪类 :first-child 和 :last-child 是什么意思都很一目了然，也是凸显了这类语言注重实际意义的一面。具体的编写大概就那样吧，跟类型选择器差别并不是很大。 这里就涉及到一个伪类的概念了。我们知道在属性中添加类名，那么在之后的CSS样式中就可以统一地为拥有相同类名的元素进行格式化。而使用伪类，不再它之前添加别的选择器的话，它也可以做到为某一类元素的某一部分统一进行格式化。大概这就是它被称作伪类的原因吧。《书》P162
这里，伪类选择的是作为第一个的子元素或者最后一个子元素，所以当子元素中又包含同名的子元素时不会出现混乱的情况（<li>中可以其他元素）。
在这里的伪类值得是 :first-child ,last-child。在伪类之前添加其他选择器可以提高该选择器的特殊性。当然伪类前不添加其他选择器没有任何问题，只不过这样的话它的意义就变成了所有可能的元素的第一个子元素或者最后一个子元素被格式化。
选择元素的第一个字母或者第一行：原理上跟选择第一个元素或者最后一个元素相似，只不过伪元素编程了相应的 :first-letter 和 :first-line。
例子：
p:first-letter{color:red;} p:first-line{color:redl;}
一样的，在伪元素前添加选择器也能做到提高特殊性的作用。
只有某些特定的CSS属性才嫩被运用到 :first-letter 上。详见《书》P162
第一个字母前面的标点符号也会被当做第一个字母的一部分，也会被格式化。
按状态选择链接元素：
这里主要涉及元素a。在上网的经验中，一般而言，在一次浏览的过程中（或者之前的浏览记录没有被清除），那么被浏览过的网页的链接就会显示成跟别的（未被浏览过的）不同的颜色。
在这里根据这个条件将链接的状态进行一些分类，额，主要还是按书里说的来：
link：从未被（当前也没有）激活（访问）或者指向的
visited：已访问过的链接
focus： 链接通过键盘选择并且已经准备好要访问（可以通过tab键之类的来选择目标链接），如果该链接处于活跃的状态也会有一样的表现（这个概念不大明白）
hover：当鼠标的光标指向链接时显示的外观
active：访问过的链接的外观（跟visited有区别，主要指的是访问的时候）
此类选择器的编写格式：
a:XXX{color:red;} 这里的XXX就是指上述的五种状态中的一种
这类的选择器当然也可以运用在其他的元素上，而不仅仅是a元素。比如p段落，p:hover{color:red;}就可以使那些被格式化的段落在鼠标指向的时候变色，显得更突出（这个形容差不多吧）
PS：由于链接可以处于多种状态（很好理解）,所以根据样式的可以被覆盖的特性，根据状态选择a元素的样式要严格按照link,visited,focus,hover,active的顺序来定义那些格式。
关于一些触屏设备无法做到判定光标指向链接的状态，所以，这都什么啊，不管了。
按照属性选择元素：
这个就比较简单和容易理解。就是按照拥有特定属性的元素来进行格式化。
这个选择器的基本格式是：
元素名[属性名]{color：red；}
这里的元素名依据实际的应用来确定，属性名的话选择就很多了。就下来就专门对[属性名]的多种形式进行详解：
属性被指定，但是具体是什么属性值没有确定：[attribute]属性名和属性值被完全确定：[attribute="value"]
属性值是以空格分割的多个单词，但是其中有一个是完全匹配的：[attribute~="value"]
属性值是以"value"开头的:[attribute|="value"]
属性值是以"value"开头，其中value是完整的单词或者单词的一部分:[attribute^="value"]
属性值是以"value"结尾，其中value是完整的单词或者是单词的一部分:[attribute$="value"]
属性值是指定属性值得子字符串:[attribute*=“value”]
更多的属性选择器——《书》P166
按照元素组来编写选择器：
这个是用来偷懒的好方法，之前也有提到过，就是对于需要相同的格式化的元素，可以用逗号将他们间隔开，然后其他不变。
组合使用选择器：
《书》P169
以上是关于CSS3.2的主要内容，如果未能解决你的问题，请参考以下文章