CSS学习总结

CSS元素选择器最全最详细最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a，甚至可以是html本身：html{color:black;}h1{color:blue;}h2{color:silver;}可以将某个样式从一个元素切换到另一个元素。假设您决定将上面的段落文本（而不是h1元素）设置为灰色。只需要把h1选择器该为p：html{color:black;}p{color:gray;}h2{color:silver;}类型选择器在W3C标准中，元素选择器又称为类型选择器（typeselector）。“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”下面的规则匹配文档树中所有h1元素：h1{font-family:sans-serif;}因此，我们也可以为XML文档中的元素设置样式：XML文档：?xmlversion=1.0encoding=ISO-8859-1??xml-stylesheettype=text/csshref=note.css?notetoGeorge/tofromJohn/fromheadingReminder/headingbodyDon'tforgetthemeeting!/body/noteCSS文档：note{font-family:Verdana,Arial;margin-left:30px;}to{font-size:28px;display:block;}from{font-size:28px;display:block;}heading{color:red;font-size:60px;display:block;}body{color:blue;font-size:35px;display:block;}通过上面的例子，您可以看到，CSS元素选择器（类型选择器）可以设置XML文档中元素的样式。CSS分组选择器分组假设希望h2元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：h2,p{color:gray;}将h2和p选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。可以将任意多个选择器分组在一起，对此没有任何限制。例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：body,h2,p,table,th,td,pre,strong,em{color:gray;}提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：/*nogrouping*/h1{color:blue;}h2{color:blue;}h3{color:blue;}h4{color:blue;}h5{color:blue;}h6{color:blue;}/*grouping*/h1,h2,h3,h4,h5,h6{color:blue;}分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：/*group1*/h1{color:silver;background:white;}h2{color:silver;background:gray;}h3{color:white;background:gray;}h4{color:silver;background:white;}b{color:gray;background:white;}/*group2*/h1,h2,h4{color:silver;}h2,h3{background:gray;}h1,h4,b{background:white;}h3{color:white;}b{color:gray;}/*group3*/h1,h4{color:silver;background:white;}h2{color:silver;}h3{color:white;}h2,h3{background:gray;}b{color:gray;background:white;}通配符选择器CSS2引入了一种新的简单选择器-通配选择器（universalselector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色：*{color:red;}这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的color属性值指定为red。声明分组我们既可以对选择器进行分组，也可以对声明分组。假设您希望所有h1元素都有红色背景，并使用28像素高的Verdana字体显示为蓝色文本，可以写以下样式：h1{font:28pxVerdana;}h1{color:blue;}h1{background:red;}但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：h1{font:28pxVerdana;color:white;background:black;}这与前面的3行样式表的效果完全相同。注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：h1{font:28pxVerdana;color:blue;background:red;}怎么样，上面这种写法的可读性是不是更强。不过，如果忽略了第二个分号，用户代理就会把这个样式表解释如下：h1{font:28pxVerdana;color:bluebackground:red;}因为background对color来说不是一个合法值，而且由于只能为color指定一个关键字，所以用户代理会完全忽略这个color声明（包括background:black部分）。这样h1标题只会显示为蓝色，而没有红色背景，不过更有可能根本得不到蓝色的h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色。font:28pxVerdana声明仍能正常发挥作用，因为它确实正确地以一个分号结尾。与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护。提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。结合选择器和声明的分组我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。下面的规则为所有标题指定了一种复杂的样式：h1,h2,h3,h4,h5,h6{color:gray;background:white;padding:10px;border:1pxsolidblack;font-family:Verdana;}上面这条规则将所有标题的样式定义为带有白色背景的灰色文本，其内边距是10像素，并带有1像素的实心边框，文本字体是Verdana。CSS类选择器详解类选择器允许以一种独立于文档元素的方式来指定样式。CSS类选择器类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。修改HTML代码在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将class指定为一个适当的值。请看下面的HTML代码：h1class=importantThisheadingisveryimportant./h1pclass=importantThisparagraphisveryimportant./p在上面的代码中，两个元素的class都指定为important：第一个标题（h1元素），第二个段落（p元素）。语法然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：*.important{color:red;}如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：.important{color:red;}结合元素选择器类选择器可以结合元素选择器来使用。例如，您可能希望只有段落显示为红色文本：p.important{color:red;}选择器现在会匹配class属性包含important的所有p元素，但是其他任何类型的元素都不匹配，不论是否有此class属性。选择器p.important解释为：“其class属性值为important的所有段落”。因为h1元素不是段落，这个规则的选择器与之不匹配，因此h1元素不会变成红色文本。如果你确实希望为h1元素指定不同的样式，可以使用选择器h1.important：p.important{color:red;}h1.important{color:blue;}CSS多类选择器在上一节中，我们处理了class值中包含一个词的情况。在HTML中，一个class值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：pclass=importantwarningThisparagraphisaveryimportantwarning./p这两个词的顺序无关紧要，写成warningimportant也可以。我们假设class为important的所有元素都是粗体，而class为warning的所有元素为斜体，class中同时包含important和warning的所有元素还有一个银色的背景。就可以写作：.important{font-weight:bold;}.warning{font-style:italic;}.important.warning{background:silver;}通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：.important.urgent{background:silver;}不出所料，这个选择器将只匹配class属性中包含词important和urgent的p元素。因此，如果一个p元素的class属性中只有词important和warning，将不能匹配。不过，它能匹配以下元素：pclass=importanturgentwarningThisparagraphisaveryimportantandurgentwarning./p重要事项：在IE7之前的版本中，不同平台的InternetExplorer都不能正确地处理多类选择器。CSSID选择器详解ID选择器允许以一种独立于文档元素的方式来指定样式。CSSID选择器在某些方面，ID选择器类似于类选择器，不过也有一些重要差别。语法首先，ID选择器前面有一个#号-也称为棋盘号或井号。请看下面的规则：*#intro{font-weight:bold;}与类选择器一样，ID选择器中可以忽略通配选择器。前面的例子也可以写作：#intro{font-weight:bold;}这个选择器的效果将是一样的。第二个区别是ID选择器不引用class属性的值，毫无疑问，它要引用id属性中的值。以下是一个实际ID选择器的例子：pid=introThisisaparagraphofi