CSS权威指南

结构化网页可以帮助搜索,比如提取文章标题,某一段落;

高级页面变现只能应用于某种文档结构。假设有这样一个页面,其中只显示了小节标题,个标题旁分别有一个箭头。用户可以决定哪些小节标题对他来说需要深入了解,点

击相应的箭头就能显示出这一节的文本。

前端做页面设计,以及一些交互。

CSS还规定了冲突规则,这些规则统称为层叠(cascade).

CSS可以减少下载时间。

元素(element)是文档结构的基础。如:p, table, span, a和div. 每个元素生成一个框(box,也称为盒),其中包含元素的内容。

第一种分类
替换元素

例如:img就是替换元素,[站外图片上传中……(1)]

非替换元素

hi there

第二种分类
块级元素(block-level)
替换元素 (inline-level)

This is a pragraph with an inline element within it.

这里有两个块元素(body和p)和一个行内元素(em).


属性

  • rel代表关系(relation),在这里关系为styleshee。
  • type总是设置为text/css。这个值描述了使用link标记加载的数据的类型。
  • 最后还有一个media属性。这里使用的值是all,说明这个样式表要应用于所有表现媒体。

@import指令

@import url(sheet2.css);

与link类似,@import用于指示Web浏览器加载一个外部样式表,并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。可以看到,@import出现在style

容器中。它必须放在这里,也就是要放在其他CSS规则之前,否则将根本不起作用。考虑下面的例子:


警告:许多较老的浏览器无法处理不同形式的@import指令。可以适当利用这一点,对这些浏览器“隐藏”样式

与link一样,可以限制所导入的
内联样式

The most wonderful fo all breakfast foods is the waffle.

通常并不推荐使用style属性。如果把样本放在style属性中,会抵消CSS的一些重要有点,如原本CSS可以组织管理能控制整个文档外观(或者一个Web服务器上所有文档

的外观)的集中式样式,而内联样式会削弱这个功能。不过,内联样式确实提供了更大的灵活性。

通配选择器(universal selector),显示为一个星号(*
这个选择器可以与任何元素匹配,就像是一个通配符。

注意:声明是以分号结尾的;

类选择器

要应用样式而不考虑具体涉及的元素,最常用的方法就是使用类选择器。

*.warning{    font-weight:bold;}

选择器为所有元素

p.warning{font-weight: bold;}

选择器现在会匹配class属性包含warning的所有元素p元素,但是其他任何类型的元素都不匹配,不论是否有此class属性。

p.warning{    font-weight:bold;}
span.warning{    font-style: italic;}

html:

When handling plutonium, care must be taken to avoid the formation of a critical mass.

With plutonium, the possibility of implosion is very real, and must be avoided at all costs.This can be accomplished by keeping the various masses separate.

结果:
When handling plutonium, care must be taken to avoid the formation of a critical mass.
With plutonium, the possibility of implosion is very real, and must be avoided at all costs.This can be accomplished by keeping the various masses separate.

  • class中同时包含warning和urgent的所有元素还有一个银色的背景,就可以写作:
.warning .urgent {background: silver;}

通过这两个类选择器连接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)这个我做测试,不行呀

  • 简单属性选择

如果希望选择有某个属性的元素,而不论该属性的值是什么,可以使用一个简单属性选择器。例如,要选择有class属性(值不限)的所有h1元素,使其文本为银色,可以写作:
h1[class] {color: silver;}
已经验证,这种用法可以。

h1[class] {color: silver;}

html:

Hello

Serenity

Fooling

  • 如果你想把包含标题(title)信息的所有元素变为粗体显示(光标停留在这些元素上时大多数浏览器都会将其显示为“工具提示”),就可以写作:
*[title] {font-weight: bold;}
  • 为了将同时有href和title属性的html超链接的文本置为粗体,可以写作:
a[href][title] {font-weight: bold;}

你可能感兴趣的:(CSS权威指南)