傻大方


首页 > 学习 >

CSS|CSS入门经典(第2版)



按关键词阅读: 入门 经典 CSS

1、本章要点:ø
进一步学习用户已经使用过的简单选择符;ø
如何使用class和id选择符;ø
什么是通用选择符 , 何时使用它;ø
什么是伪类和伪元素 , 如何使用它们;ø
如何指定影响超文本链接的样式 。
从第2章已经知道 , 选择符是标识样式目标的css规则的一部分 。
发挥选择符的功能对于充分使用css至关重要 。
5.1 简单选择符 前面介绍过最简单的选择符类型:类型选择符、class选择符和id选择符 。
本章将学习如何更有效地使用它们 。
到目前为止 , 读者学习了如何使用简单选择符创建css规则:基于html标签的类型选择符和基于html属性的class或i 。

2、d选择符 。
类型选择符就是省去尖括号 的html标签的名字 , 例如:h1 color: blue;
上面的语句表明 , 选择所有 标签 , 并指定其颜色为blue 。
类型选择符最易于使用 , 因为它们很简单 , 但是它们也有很大限制 。
如果用户只想让一些 标签变成blue , 而其他标签变成green , 该怎么办呢?这时就要使用class和id选择符了 。
提示:虽然前面说过 , 类型选择符必须是html标签 , 但事实上只说对了一半 。
实际上 , 它们必须是用户设计样式所使用语言的合法元素 。
例如 , 用户如何在xml中使用css 。
实际上 , 不必包含实际的标签 。
html(而不是xml或xhtml)完全省略了某些标签声明 , 例如 元素 。
这些是暗含标签 。

3、 。
开关标签都是暗含的 。
如果用户有基于body的规则 , 例如body font-family: arial;
, 即使当时没有标签 , 与css兼容的浏览器仍然会将字体应用于暗含的。
在第4章中 , 我们学习了在基于html class和id属性的规则内如何设置class和id选择符 , 例如:#here font-size: large;
.there color: green;
id选择符特别标识页面的一部分 , 而class选择符允许用户指定特定的标签作为用户已定义的某种设置的一部分 。
5.1.1 使用class和id选择符 用户可以将class或id选择符与 标签联合起来 , 指定接收特殊样式的页面的特定部分 。
例 。

4、如 , 请考察程序清单5-1所示的html页面 , 它在每个 标签上都设置了class或id属性 。
程序清单5-1 经过 和class设置的html部分image accessibility link type=text/css rel=stylesheetkynn ·
writing ·
tips ·
imagesimage accessibility making your graphics accessible here are some helpful tips on making your graphicalcontent accessible to use 。

5、rs who cant see images: 5.1 简单选择符always include an alt attribute on yourimg tag. the alt attribute should contain a shortreplacement for the graphic, in text. if the imageitself has text, list that in alt . if the image is purely decorative and doesnt conveyany additional information, use alt= . if。

6、there is more information in the graphic than youcan convey in a short alt attribute, suchas the information in a graph or chart, then usethe longdesc attribute to give the url ofa page that describes the graphic in text. copyright 2006 by kynn bartlett 可见 , 程序中使用了 标签链接一个外部样式表tips-5.2 。
该样式表为页面每个部分定义样式 ,。

7、这些部分是breadcrumb、header、tips和footer 。
该样式表如程序清单5-2所示 。
程序清单5-2 使用class和id的局部样式/* tips-5.2.css */body color: black;
background-color: white;
#breadcrumb font-family: verdana, sans-serif;
color: black;
background-color: silver;
#header color: white;
background-color: maroon;
font-family: courier new, monospace;


8、 .tips color: white;
background-color: gray;
font-family: arial, sans-serif;
#footer color: silver;
background-color: black;
font-family: times new roman, serif;
应用这些样式的效果如图5-1所示 。
请注意 , 其中使用了背景颜色来使 部分可见 。
实际上 , 这可能是某些不吸引人的效果 , 特别是在本书中使用有限的黑、白、灰色阴影的情况下 , 一些例子只是来说明原理 , 而不是产生美观的吸引人的效果 。
每一部分都具有字体、背景颜色和前景颜色 。
图5-1 显示 、class 。

9、和id设置的部分样式提示:本例中 , id选择符用于breadcrumb trail(浏览路径记录)、页眉和页脚 , 而class选择符用于提示 。
为什么?很简单:无论什么时候用户确信id选择符在页面上的唯一性 , 就可以使用id选择符 。
页面可能包含多个提示 , 但是只有一个breadcrumb trail、页眉和页脚 。


稿源:(未知)

【傻大方】网址:/a/2021/0813/0023654857.html

标题:CSS|CSS入门经典(第2版)


上一篇:拓展|拓展训练赢跑心得体会

下一篇:园林绿化|园林绿化管理规定5篇