Web全栈技术指南-2.2.1 样式与样式表 - 书目录

Web全栈技术指南-2.2.1 样式与样式表

2.2.1 样式与样式表

HTML元素的样式(style)属性决定了它的视觉效果。

以下HTML代码

<p style=”color: blue; font-size: 2em”>你好,HTML!</p>

通过style属性直接(inline)指定了该段落的字体颜色(color)和字体大小(font-size)。

但我们一般习惯于把样式(代码)与内容(代码)相分离1,所以更好的做法是:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>你好</title>
    <style>
      p {
        color: blue;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <p>你好,HTML!</p>
  </body>
</html>

上面的代码用一个style标签来指定样式:

p {
  color: blue;
  font-size: 2em;
}

这样,样式代码从HTML标签里分离了出来,但仍然嵌入在内容的文本(即HTML文本)里。我们可以把样式代码放在一个单独的文件里,然后从HTML文本里引用它,如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>你好</title>
    <link rel="stylesheet" href="hello.css">
  </head>
  <body>
    <p>你好,HTML!</p>
  </body>
</html>

上面的代码通过link标签指定了一个样式表(style sheet)文件,hello.css,其内容如下:

p {
  color: blue;
  font-size: 2em;
}

这样,样式代码(CSS)就与内容代码(HTML)彻底分离了。

1. 把样式与内容分离有很多好处。其主要的思想是:HTML代码仅含有网页的“内容”,如文本和图片,而CSS指定了这些内容的视觉效果。了解更多:https://en.wikipedia.org/wiki/Separation_of_presentation_and_content

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_client/css/style-and-stylesheet.html