CSS学习篇(一)

CSS学习篇(一)
0

  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树内容:

%E5%9B%BE%E7%89%87

添加CSS的方式

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

外部样式表

  在中添加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 结构混合编写导致后期难以维护所以正式项目应尽量少用。