时间刻度线css,CSS初探

CSS初探

CSS 指层叠样式表 (Cascading Style Sheets)

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

1. 浏览器缺省设置

2. 外部样式表

3. 内部样式表(位于 标签内部)

4. 内联样式(在 HTML 元素内部)

CSS 语法

由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

如果要定义不止一个声明，则需要用分号将每个声明分开。

p {

text-align: center;

color: black;

font-family: arial;

}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {

font-style: italic;

font-weight: normal;

}

请注意标记为 的代码的上下文关系

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

1. 我是斜体字。这是因为 strong 元素位于 li 元素内。
2. 我是正常的字体。

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

CSS 选择器参考手册

[attribute]用于选取带有指定属性的元素。

[attribute=value]用于选取带有指定属性和值的元素。

[attribute~=value]用于选取属性值中包含指定词汇的元素。

[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value]匹配属性值以指定值开头的每个元素。

[attribute$=value]匹配属性值以指定值结尾的每个元素。

[attribute*=value]匹配属性值中包含指定值的每个元素。