CSS权威指南

2016-11-09 本文已影响0人前端混合开发

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

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

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

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

CSS还规定了<u>冲突规则</u>，这些规则统称为层叠（cascade）.

CSS可以减少下载时间。

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

第一种分类

替换元素

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

非替换元素

<span>hi there</span>

第二种分类

块级元素（block-level）

替换元素 (inline-level)

<body>
<p>This is a pragraph with <em> an inline element </em> within it.</p>
</body>

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

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

属性

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

@import指令

@import url(sheet2.css);

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

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

<style type="text/css">
        @import url(styles.css); /*@import comes first*/
        h1 {color:gray;}
    </style>

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

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

<p style="color: gray;">
   The most wonderful fo all breakfast foods is the waffle.
</p>

通常并不推荐使用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:

<p class="warning">    When handling plutonium, care must be taken to avoid the formation of a critical mass.</p><p>    With plutonium, <span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>.This can be accomplished by keeping the various masses separate.</p>

结果：
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;}