<commit_before>---
layout: post
title: CSS权威指南--CSS和文档
categories: CSS
description: CSS介绍入门
keywords: CSS、DOM
---

<style>
code {color: blue}
</style>

# overview
CSS全称cascading style sheet,中文层叠样式表，它可以影响一个文档的表现形式，具体到某个元素上就是指，通过它我们可以修改元素的背景色、字体颜色、元素宽高、边框的颜色等等。

CSS是以HTML文档内容作为基础。在CSS没有那么强大之前，HTML元素标签分为结构化标签和和样式化标签。结构化标签可以使文档具有一定的结构性，而样式化标签可以改变内容的样式。于是乎一堆的样式化标签被开发了出来，比如<Font>、<Big>。

使用大量的样式化标签使得文档的结构性很差，开发人员为了让页面呈现出自己想要的效果，忽略了文档内容的语义性。这使得代码更难维护、简历内容索引极为困难、不利于搜索引擎的搜索。

为了解决这种问题，我们需要将文档的结构和表现分离，使用语义化标签创建文档内容，使用CSS对文档的外观进行控制。


## CSS优势

1. 丰富的样式
与CSS相比，HTML对表现的控制差了很多。css可以为任何元素的文本和背景色设置颜色，允许在任何元素外围创建边距，同时能增大和减小元素外的空间。它还能改变文本的大小写、装饰方式(如下划线)、间隔，甚至可以确定是否显示文本等其他效果。

2. 易于使用
CSS能够减少大量的工作量，样式表将实现某些效果的命令集中在一个位置，便于重用和修改。我们可以将一个CSS文档应用在一个HTML页面上或整个项目中。当需要改变项目的主题背景或者改变某个文档内的所有字体大小的时候，很容易修改。

3. 层叠
CSS规定了一组规则，当同一属性拥有多个CSS命令的时候，我们可以根据层叠原则，决定元素最终的额表现。如果修改特定元素的表现时，我们可以根据这一原则，给予其样式最高的优先级即可。

4. 缩减文件大小
CSS将样式表现的命令集中到一起，减少了HTML文档内标签元素的数量，降低了文件的大小。


## 为将来做准备
CSS其实就是一种样式语言，W3C已经开始从HTML中去除样式元素，然后采用CSS实现内容的样式需求。

在开发中，尽量少使用样式化标签，专注于HTML内容的结构和语义性，将样式的责任委托给CSS实现。

CSS具体来说就是服务于HTML文档的元素。我们需要了解一些元素相关的术语。

1. 元素
元素是HTML文档结构的基础。元素一般是由开始标签、内容、结束标签组成，有的元素没有内容，有的元素也没有结束标签。文档中的元素都对文档的表现起到一定的作用，比如每个元素在文档中都表现为一个框，其中包含元素的内容。

2. 替换元素和非替换元素

    * 替换元素是指用来替换元素内容的部分，并非由元素的内容直接表示。比如img、input等等.

    * 非替换元素是指元素生成的框中展示的是元素的内容。比如p、span，绝大数元素都是非替换元素。

3. 块级元素
块级元素生成一个元素框，它会填充父元素的内容区，左右旁边不能有其他元素。它会在元素框之前和之后生成分隔符。p、div都是这种元素。

4. 行内元素
行内元素会在一个文本行内生成一个元素框，而不会打断这个文本，也不会在框后添加分隔符，所以这种元素可以出现在其他元素内容中，而不改变其他元素的显示。比如strong、span都是行内元素。绝大多数元素都是行内元素。


 *note:在HTML中，块级元素不能继承自行内元素，也就是行内元素中不能出现块级元素，但是在CSS中就没有这个限制，这是通过CSS属性:display实现的。在CSS中，我们可以可以将一个行内元素改变成块级元素，我们也可以将一个块级元素改变成行内元素，比如：*

  `p {display: inline;}
   em {display: block;}
  `  

 *这样会使得元素在一个行内框中生成一个块级框，也允许在一个块级框中生成行内框.*


## 组合使用CSS、HTML

### 1. link标记
 我们可以通过link标记，为HTML文档引入一个或者多个css文件。比如:

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

 rel属性为指定文件和link元素的关系，type为文件的额类型，href为文件的url，media为文件的使用场景。
 media有很多值，常用的也就是screen、all、print.
 如果在多个媒体上都可以使用这个外部样式表，我们可以在media属性中指定多个媒体，用逗号隔开，比如"screen, print"。


* 候选样式表

 我们还可以通过修改rel属性，创建一个候选样式表。比如:

`<link rel="alternate stylesheet" type="text/css" href="abc.css" title="default">
`

 如果一个浏览器它能够使用候选样式表，它会使用link元素的title属性生成一个候选样式列表，然后用户就能选择他们想要的样式。

 我们还可以使用相同的title对候选样式表进行分组，这样的话，就可以在不同的媒介下让用户选择不同的样式了。

`<link rel="alternate stylesheet" type="text/css" href="abc.css" title="default" media="screen">
`

` <link rel="alternate stylesheet" type="text/css" href="abc.css" title="default" media="print">
`

* 首选样式表

当link元素的rel属性为styleSheet时，如果我们为其title属性赋值，那么这个样式表就成为了首选样式表。这就意味着首选样式表优先于候选样式表，当文档第一次加载时，使用这个首选样式表。但是如果同时制定多个首选样式表的话，就无法确定到底加载哪个。

* 永久样式表

当link元素的rel属性为stylesheet时，如果不知道title属性，那么这个样式表则为永久样式表，始终用于文档的显示。这也是人们通常所希望的。

*优先级：永久样式表>首选样式表>候选样式表，对于同级的样式，采用继承和层叠规则，绝对最终的样式。*



### 2. style元素

除了使用link元素引入外来样式表外，我们也可以在style元素中添加样式。

我们可以在style属性中，通过@import url(style.css); 这样的命令引入外部样式表。@import命令必须在css会在之前使用。
比如:

   `<style  type="text/css">
      @import url(a.css);
      p {color: red;}
   </style>
   `  

### 3. style属性

我们也可以通过对元素的style属性进行设置，创建内联样式。除了body外部的标记，style属性可以应用在任何其他html标签中。
在style属性中设置样式，使用双引号，将各条样式命令包括起来。比如:

 `<p style="color: red; background: yellow;">`

  一个内联style属性中只能放一个声明块，而不能放整个样式表，也不能使用@import指令。

  在使用style元素标签的时候，如果浏览器不能识别style标签，需要做到向后可访问性。我们可以使用HTML注释来达到这个目的，比如:

  `<style><!--
   @import  url(test.css);
   p { }
  --> </style>
  `

  如果浏览器无法识别style标签，会将里面的内容当成注释忽略掉。<commit_msg>css权威指南  一<commit_after>---
layout: post
title: CSS权威指南--CSS和文档
categories: CSS
description: CSS介绍入门
keywords: CSS、DOM
---

<style>
code {color: blue}
</style>
# Overview
  CSS全称cascading style sheet,中文层叠样式表，它可以影响一个文档的表现形式，具体到某个元素上就是指，通过它我们可以修改元素的背景色、字体颜色、元素宽高、边框的颜色等等。

  CSS是以HTML文档内容作为基础。在CSS没有那么强大之前，HTML元素标签分为结构化标签和和样式化标签。结构化标签可以使文档具有一定的结构性，而样式化标签可以改变内容的样式。于是乎一堆的样式化标签被开发了出来，比如<Font>、<Big>。

  使用大量的样式化标签使得文档的结构性很差，开发人员为了让页面呈现出自己想要的效果，忽略了文档内容的语义性。这使得代码更难维护、简历内容索引极为困难、不利于搜索引擎的搜索。

  为了解决这种问题，我们需要将文档的结构和表现分离，使用语义化标签创建文档内容，使用CSS对文档的外观进行控制。


## CSS优势

1. 丰富的样式
  与CSS相比，HTML对表现的控制差了很多。css可以为任何元素的文本和背景色设置颜色，允许在任何元素外围创建边距，同时能增大和减小元素外的空间。它还能改变文本的大小写、装饰方式(如下划线)、间隔，甚至可以确定是否显示文本等其他效果。

2. 易于使用
  CSS能够减少大量的工作量，样式表将实现某些效果的命令集中在一个位置，便于重用和修改。我们可以将一个CSS文档应用在一个HTML页面上或整个项目中。当需要改变项目的主题背景或者改变某个文档内的所有字体大小的时候，很容易修改。

3. 层叠
  CSS规定了一组规则，当同一属性拥有多个CSS命令的时候，我们可以根据层叠原则，决定元素最终的额表现。如果修改特定元素的表现时，我们可以根据这一原则，给予其样式最高的优先级即可。

4. 缩减文件大小
  CSS将样式表现的命令集中到一起，减少了HTML文档内标签元素的数量，降低了文件的大小。


## 为将来做准备
  CSS其实就是一种样式语言，W3C已经开始从HTML中去除样式元素，然后采用CSS实现内容的样式需求。

  在开发中，尽量少使用样式化标签，专注于HTML内容的结构和语义性，将样式的责任委托给CSS实现。

  CSS具体来说就是服务于HTML文档的元素。我们需要了解一些元素相关的术语。

1. 元素
  元素是HTML文档结构的基础。元素一般是由开始标签、内容、结束标签组成，有的元素没有内容，有的元素也没有结束标签。文档中的元素都对文档的表现起到一定的作用，比如每个元素在文档中都表现为一个框，其中包含元素的内容。

2. 替换元素和非替换元素

    * 替换元素是指用来替换元素内容的部分，并非由元素的内容直接表示。比如img、input等等.

    * 非替换元素是指元素生成的框中展示的是元素的内容。比如p、span，绝大数元素都是非替换元素。

3. 块级元素
  块级元素生成一个元素框，它会填充父元素的内容区，左右旁边不能有其他元素。它会在元素框之前和之后生成分隔符。p、div都是这种元素。

4. 行内元素
  行内元素会在一个文本行内生成一个元素框，而不会打断这个文本，也不会在框后添加分隔符，所以这种元素可以出现在其他元素内容中，而不改变其他元素的显示。比如strong、span都是行内元素。绝大多数元素都是行内元素。


   *note:在HTML中，块级元素不能继承自行内元素，也就是行内元素中不能出现块级元素，但是在CSS中就没有这个限制，这是通过CSS属性:display实现的。在CSS中，我们可以可以将一个行内元素改变成块级元素，我们也可以将一个块级元素改变成行内元素，比如：*

  `p {display: inline;}
   em {display: block;}
  `  

   *这样会使得元素在一个行内框中生成一个块级框，也允许在一个块级框中生成行内框.*


## 组合使用CSS、HTML

### 1. link标记
  我们可以通过link标记，为HTML文档引入一个或者多个css文件。比如:

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

 rel属性为指定文件和link元素的关系，type为文件的额类型，href为文件的url，media为文件的使用场景。
 media有很多值，常用的也就是screen、all、print.
 如果在多个媒体上都可以使用这个外部样式表，我们可以在media属性中指定多个媒体，用逗号隔开，比如"screen, print"。


* 候选样式表

我们还可以通过修改rel属性，创建一个候选样式表。比如:

 `<link rel="alternate stylesheet" type="text/css" href="abc.css" title="default">
 `

如果一个浏览器它能够使用候选样式表，它会使用link元素的title属性生成一个候选样式列表，然后用户就能选择他们想要的样式。

我们还可以使用相同的title对候选样式表进行分组，这样的话，就可以在不同的媒介下让用户选择不同的样式了。

`<link rel="alternate stylesheet" type="text/css" href="abc.css" title="default" media="screen">
`

` <link rel="alternate stylesheet" type="text/css" href="abc.css" title="default" media="print">
`

* 首选样式表

  当link元素的rel属性为styleSheet时，如果我们为其title属性赋值，那么这个样式表就成为了首选样式表。这就意味着首选样式表优先于候选样式表，当文档第一次加载时，使用这个首选样式表。但是如果同时制定多个首选样式表的话，就无法确定到底加载哪个。

* 永久样式表

  当link元素的rel属性为stylesheet时，如果不知道title属性，那么这个样式表则为永久样式表，始终用于文档的显示。这也是人们通常所希望的。

*优先级：永久样式表>首选样式表>候选样式表，对于同级的样式，采用继承和层叠规则，绝对最终的样式。*



### 2. style元素

  除了使用link元素引入外来样式表外，我们也可以在style元素中添加样式。

  我们可以在style属性中，通过@import url(style.css); 这样的命令引入外部样式表。@import命令必须在css会在之前使用。
  比如:

   `<style  type="text/css">
      @import url(a.css);
      p {color: red;}
   </style>
   `  

### 3. style属性

  我们也可以通过对元素的style属性进行设置，创建内联样式。除了body外部的标记，style属性可以应用在任何其他html标签中。
  在style属性中设置样式，使用双引号，将各条样式命令包括起来。比如:

  `<p style="color: red; background: yellow;">`

  一个内联style属性中只能放一个声明块，而不能放整个样式表，也不能使用@import指令。

  在使用style元素标签的时候，如果浏览器不能识别style标签，需要做到向后可访问性。我们可以使用HTML注释来达到这个目的，比如:

  `<style><!--
   @import  url(test.css);
   p { }
  --> </style>
  `

  如果浏览器无法识别style标签，会将里面的内容当成注释忽略掉。
{'fraction_non_alphanumeric': 0.11334393523203701, 'fraction_numerical': 0.003758854994940003, 'mean_word_length': 8.84068278805121, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6797772', 'n_tokens_mistral': 5230, 'n_tokens_neox': 5769, 'n_words': 270}