HTML&CSS基础1——选择器&文本样式

• CSS 如何工作
• 层叠和继承
• 选择器
  • 标签选择器
  • 类选择器（Class selectors）
  • ID选择器（ID selectors）
  • 优先级
  • 伪类选择器（Pseudo-classes selectors）
  • 基于关系的选择器
• 文本样式
  • text-indent
  • text-transform
  • text-decoration
  • text-align
  • word-spacing
  • white-space
  • @font-face

在做百度前端技术学院的任务1后，总结下CSS中用到的知识点。

CSS 如何工作

CSS 如何工作 Mozilla 的开发者文档讲的很好。

浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：

1. 浏览器先将标记语言和 CSS 转换成 DOM (文档对象模型)结构。 这时 DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
2. 最后浏览器把 DOM 的内容展示出来。

层叠和继承

参考资料: 层叠和继承

对于层叠来说，共有三种主要的样式来源：

• 浏览器对HTML定义的默认样式。
• 用户定义的样式。

• 开发者定义的样式，可以有三种形式：

  • 定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。
  • 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
  • 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。

再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

更多细节
CSS 另外提供了一个 !important 关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。
这就意味着，作为开发者，你很难准确的预知页面最终在用户电脑上的显示效果。

选择器

参考资料:选择器（Selectors）

标签选择器

strong {
	color: red;
}

类选择器（Class selectors）

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

ID选择器（ID selectors）

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时，ID选择器是以#开头的。

优先级

• 如果多余一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。
• 如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。
• 如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。

伪类选择器（Pseudo-classes selectors）

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式

伪类列表

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

基于关系的选择器

文本样式

参考资料:文本样式

text-indent

定义和用法
text-indent 属性规定文本块中首行文本的缩进。
注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

可能的值

text-transform

定义和用法
text-transform 属性控制文本的大小写。

说明
这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。

可能的值

text-decoration

定义和用法
text-decoration 属性规定添加到文本的修饰。
注释：修饰的颜色由 “color” 属性设置。
注释：IE、Chrome 或 Safari 不支持 “blink” 属性值。

说明
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

text-align

定义和用法
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

可能的值

word-spacing

定义
word-spacing 属性增加或减少单词间的空白（即字间隔）。
该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。
注释：允许使用负值。

white-space

定义和用法
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

可能的值

@font-face

CSS3 @font-face 规则
在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3，web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

实例

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
div {
    font-family: myFirstFont;
}

CSS3 字体描述符

下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：