CSS(行内样式,嵌入样式,链接样式)

样式表(Style Sheets)

为了设计出精美的页面,你需要许多不同的CSS样式。CSS样式的集和组成了样式表。样式可以是内部或者外部的两种类型,这取决于样式表是位于网页本身还是位于链接到网页的单独文件中。

链接样式

大多数情况下,链接样式表是最佳的选择。因为它使网页的构建更加简单,网页的加载更快速。所有的样式集中在一个单一的文件(后缀为css的文件)中,然后链接到网页中,只需要一行代码。你可以将相同的样式表文件链接到网站中的每个页面,提供统一的设计,在需要修改网站的样式时,只需要编辑一个单一的文件。

外部样式表有助于加快网页的加载速度。在使用链接样式表时,网页只需要包含基本的HTML代码,不需要包含CSS样式代码。此外,当Web浏览器下载样式表时,它会将该文件存储再访问者的计算机上(缓存的后台文件夹中),以便快速访问。当访问者跳到该网站上使用相同样式表的其他界面时,浏览器不需要再次下载样式表,只需要下载所请求的HTML文件并从缓存中提取样式表,加快了访问的速度。
添加链接样式表语法:
<link rel="stylesheet" href="styles.css" type="text/css" />

行内样式

行内样式是写在特定的HTML标签的style属性里的,比如:
<p style="color: red;">This is a paragraph</p>
行内样式的作用范围非常有限,而且只能影响它所在的标签,而且总会覆盖嵌入样式和链接样式。

嵌入样式

嵌入的CSS样式放在HTML文档的head元素中,比如:

<head>
      <style type="text/css">
            h1 {
                  font-size: 16px;
               }
            p  {
                  color: red;
               }
      </style>
</head>

嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式。但会被行内样式覆盖。

原文地址:https://www.cnblogs.com/1328497946TS/p/12910167.html