理解CSS样式的3种类型

前端网站开发通常表示为一个三条腿的凳子由:

• HTML对于一个网站的结构
• CSS的视觉风格
• Javascript行为

第二站的凳子上,层叠样式表,支持三种不同的风格可以添加到一个文档。

1. 内联样式
2. 嵌入式样式
3. 外部样式

每一个CSS样式呈现独特的优缺点。

内联样式

内联样式风格直接标记在HTML文档中写的。内联样式只影响他们应用于特定的标签:

< a href = " /索引。html”风格= "文字修饰:没有;" >

这个CSS规则失效的标准强调文本装饰这一个链接。然而,它不会改变页面上的其他链接。这是一个内联风格的局限性。因为他们只改变一个特定的项目,你需要垃圾HTML与这些样式来实现一个统一的页面设计。这不是一个最佳实践:事实上,这是一个步骤从天中删除字体标签和外加剂的web页面的结构和样式。

内联样式还需要很高的特异性。这使他们很难覆盖与其他,非内联样式。例如,如果你想让一个网站响应,改变一个元素看起来在某些使用断点媒体查询内联样式元素使这个很难做到。

内联风格只是适当的要谨慎使用它们时,在“例外”的方法,一个或两个元素在页面上从同龄人。

嵌入式样式

嵌入式样式位于文档的头部。他们包裹在<时尚>标签和看起来很像外部CSS文件内部分的文档。

嵌入式样式只影响嵌入到页面上的标记。再一次,这种方法否定CSS的优势之一。自每一页功能样式中定义的头,如果你想做一个站点范围内的改变——就像改变链接的颜色从红色绿色——你需要每一页都让这种变化,因为每个页面使用一个嵌入式样式表。这种方法比内联风格但仍有问题的在许多情况下。

<时尚>
h1, h2, h3, h4, h5 {
粗细:大胆的;
text-align:中心;
}
一个{
颜色:# 16 c616;
}
> < /风格

样式表也被添加到文档的头部添加大量的标记代码页面,这也可以使页面在未来更难管理。

嵌入式样式表的好处是,他们立即加载页面本身,而不需要其他外部文件加载。这种技术可以受益于一个下载速度和性能的角度。

外部样式表

大多数网站今天使用外部样式表。外部样式风格,都写在一个单独的文档,然后连接到各种web文档。它们叫做主文档使用<链接>标记文档的头部。外部样式表可以驻留在同一台服务器上的HTML,或者他们可以完全从另一台服务器。这通常是资产的情况,比如字体,许多网站借用谷歌。

外部样式表影响任何附加到文档,这意味着如果你有20页的网站,每个页面使用相同的样式表(通常是如何做到这一点),你可以视觉变化的每一个这些页面,只需编辑一个样式表。这种经济使得长期现场管理更加容易。

< link rel = "样式表" type = " text / css " href = " css / style.css " >

外部样式表的缺点是,它们需要页面获取这些外部文件和加载。并不是每一个页面将使用CSS的每一个样式表,那么多页面加载比实际需要更大的页面的CSS。

虽然确实有性能影响外部CSS文件,它当然可以最小化。实际上,CSS文件是文本文件,所以他们并不大。如果您的整个网站使用一个CSS文件,你还得到的好处,它最初加载文档缓存后,这意味着可能会有轻微的性能下降在第一页访问,但后续页面将使用缓存的CSS文件,所以任何打击将是否定。