CSS学习篇（一）

CSS (Cascading Style sheets) 中文译名为层叠样式表，用来美化网页的样式和排版，例如修改文字的大小、颜色、间距等，将页面内容分割成多列或者添加背景图等等。

CSS主要是由规则来组成，一个规则由一个选择器和一个或多个属性组成：

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

例如上面这里就有两条规则，h1和p分别是两个选择器，用来筛选要改变样式的页面元素，而里面color、background-color等都是属性，其冒号后面对应的属性值，用来指定对应元素的样式属性值。

CSS工作原理

当浏览器展示HTML的内容之前，需要加载CSS文件，并将对应的CSS规则附加到DOM树，然后浏览器才显示出样式化的DOM树内容：

添加CSS的方式

添加CSS到HTML的方式有三种：外部样式表、内部样式表和内联样式。

外部样式表

在<head>中添加link标签，通过指定href属性来定位外部样式表的位置，可以是本地也可以是远程CSS文件：

 <head>
    <link rel="stylesheet" href="style.css">
 </head>

内部样式表

在<head>中添加<style>标签，然后直接在里面添加CSS规则：

<style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
</style>

内联样式

直接在HTML元素中添加style属性，每个属性之间用分号分割：

<body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">Test</p>
</body>

总的来说，使用外部样式表最高校，重用性高，而内部样式表可以在外部样式表的前提下针对特定页面进行修改，内联样式虽然它的优先度最高（优先于外部和内部样式表的样式），但由于与HTML结构混合编写导致后期难以维护所以正式项目应尽量少用。

CSS工作原理

添加CSS的方式

外部样式表

内部样式表

内联样式

猜你喜欢