CSS学习总结.docx
《CSS学习总结.docx》由会员分享,可在线阅读,更多相关《CSS学习总结.docx(25页珍藏版)》请在三一办公上搜索。
1、CSS学习总结CSS 元素选择器 最全最详细 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身: html color:black; h1 color:blue; h2 color:silver; 可以将某个样式从一个元素切换到另一个元素。 假设您决定将上面的段落文本设置为灰色。只需要把 h1 选择器该为 p: html color:black; p color:gray; h2 color:silver; 类型选择器 在 W3C 标准中,元素选择
2、器又称为类型选择器。 “类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。” 下面的规则匹配文档树中所有 h1 元素: h1 font-family: sans-serif; 因此,我们也可以为 XML 文档中的元素设置样式: XML 文档: GeorgeJohnReminderDont forget the meeting! CSS 文档: note font-family:Verdana, Arial; margin-left:30px; to font-size:28px; display: block; from font-size:28px; dis
3、play: 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 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包
4、含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同。参见后代选择器。 可以将任意多个选择器分组在一起,对此没有任何限制。 例如,如果您想把很多元素显示为灰色,可以使用类似如下的规则: body, h2, p, table, th, td, pre, strong, em color:gray; 提示:通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。 以下的两组规则能得到同样的结果,不过可以很清楚地看出哪一个写起来更容易: /* no grouping */ h1 color:blue; h2 color:blue; h3 color:blue; h
5、4 color:blue; h5 color:blue; h6 color:blue; /* grouping */ h1, h2, h3, h4, h5, h6 color:blue; 分组提供了一些有意思的选择。例如,下例中的所有规则分组都是等价的,每个组只是展示了对选择器和声明分组的不同方法: /* group 1 */ h1 color:silver; background:white; h2 color:silver; background:gray; h3 color:white; background:gray; h4 color:silver; background:white
6、; b color:gray; background:white; /* group 2 */ h1, h2, h4 color:silver; h2, h3 background:gray; h1, h4, b background:white; h3 color:white; b color:gray; /* group 3 */ h1, h4 color:silver; background:white; h2 color:silver; h3 color:white; h2, h3 background:gray; b color:gray; background:white; 通配符
7、选择器 CSS2 引入了一种新的简单选择器 - 通配选择器,显示为一个星号。该选择器可以与任何元素匹配,就像是一个通配符。 例如,下面的规则可以使文档中的每个元素都为红色: * color:red; 这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器,只需敲一次键就能使文档中所有元素的 color 属性值指定为 red。 声明分组 我们既可以对选择器进行分组,也可以对声明分组。 假设您希望所有 h1 元素都有红色背景,并使用 28 像素高的 Verdana 字体显示为蓝色文本,可以写以下样式: h1 font: 28px Verdana; h1 color: blue; h1
8、background: red; 但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反,我们可以将声明分组在一起: h1 font: 28px Verdana; color: white; background: black; 这与前面的 3 行样式表的效果完全相同。 注意,对声明分组,一定要在各个声明的最后使用分号,这很重要。浏览器会忽略样式表中的空白符。只要加了分号,就可以毫无顾忌地采用以下格式建立样式: h1 font: 28px Verdana; color: blue; background: red; 怎么样,上面这种写法的可读性是不是更
9、强。 不过,如果忽略了第二个分号,用户代理就会把这个样式表解释如下: h1 font: 28px Verdana; color: blue background: red; 因为 background 对 color 来说不是一个合法值,而且由于只能为 color 指定一个关键字,所以用户代理会完全忽略这个 color 声明。这样 h1 标题只会显示为蓝色,而没有红色背景,不过更有可能根本得不到蓝色的 h1。相反,这些标题只会显示为默认颜色,而且根本没有背景色。font: 28px Verdana 声明仍能正常发挥作用,因为它确实正确地以一个分号结尾。 与选择器分组一样,声明分组也是一种便利的
10、方法,可以缩短样式表,使之更清晰,也更易维护。 提示:在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时,就不必担心忘记再插入一个分号。 结合选择器和声明的分组 我们可以在一个规则中结合选择器分组和声明分组,就可以使用很少的语句定义相对复杂的样式。 下面的规则为所有标题指定了一种复杂的样式: h1, h2, h3, h4, h5, h6 color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; 上面这条规则将所有标题的样式定义为带有白色背景的灰色文
11、本,其内边距是 10 像素,并带有 1 像素的实心边框,文本字体是 Verdana。 CSS 类选择器详解 类选择器允许以一种独立于文档元素的方式来指定样式。 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用,也可以与其他元素结合使用。 提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。 要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。 修改 HTML 代码 在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。 为了将类选择器的样式与元素关联,必须将 class 指定为一个适当
12、的值。请看下面的 HTML 代码: This heading is very important. This paragraph is very important. 在上面的代码中,两个元素的 class 都指定为 important:第一个标题,第二个段落。 语法 然后我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号,然后结合通配选择器: *.important color:red; 如果您只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器,这没有任何不好的影响: .important color:red; 结合元素选择器 类选择器可以结合元素选择器来使用。 例如,您可
13、能希望只有段落显示为红色文本: 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; CS
14、S 多类选择器 在上一节中,我们处理了 class 值中包含一个词的情况。在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要和警告,就可以写作: This paragraph is a very important warning. 这两个词的顺序无关紧要,写成 warning important 也可以。 我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。
15、就可以写作: .important font-weight:bold; .warningfont-style: italic; .important.warning background:silver; 通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素。 如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。请看下面的规则: .important.urgent background:silver; 不出所料,这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此,如果一个 p 元素的 class 属性中只有词 importa
16、nt 和 warning,将不能匹配。不过,它能匹配以下元素: This paragraph is a very important and urgent warning. 重要事项:在 IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。 CSS ID 选择器详解 ID 选择器允许以一种独立于文档元素的方式来指定样式。 CSS ID 选择器 在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。 语法 首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。 请看下面的规则: *#intro font-weight:bold; 与类
17、选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作: #intro font-weight:bold; 这个选择器的效果将是一样的。 第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。 以下是一个实际 ID 选择器的例子: This is a paragraph of introduction. 类选择器还是 ID 选择器? 在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。 区别 1:只能在文档中使用一次 与类不同,在一个 HTML
18、文档中,ID 选择器会使用一次,而且仅一次。 区别 2:不能使用 ID 词列表 不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。 区别 3:ID 能包含更多含义 类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一
19、个。在这种情况下,可以编写如下规则: #mostImportant color:red; background:yellow; 这个规则会与以下各个元素匹配: This is important!This is important!This is important! 区分大小写 请注意,类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。 因此,对于以下的 CSS 和 HTML,元素不会变成粗体: #intro font-weight:bold; This is a p
20、aragraph of introduction. 由于字母 i 的大小写不同,所以选择器不会匹配上面的元素。 CSS 属性选择器详解 CSS 2 引入了属性选择器。 属性选择器可以根据元素的属性及属性值来选择元素。 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。 例子 1 如果您希望把包含标题的所有元素变为红色,可以写作: *title color:red; 例子 2 与上面类似,可以只对有 href 属性的锚应用样式: ahref color:red; 例子 3 还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。 例如,为了将同时有 hr
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 学习 总结
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-3155018.html