我是否一直使用.css文件?

时间:2020-03-06 14:27:22  来源:igfitidea点击:

是否始终需要.css文件?还是我可以使用.css"基本"文件并在HTML页面中定义其他样式项?

是否必须始终在单独存储的.css文件中定义padding,borders等,还是可以将其嵌入HTML页面中?

解决方案

我们可以在任何地方使用,css文件不是必需的。但是建议使用css文件,因为它使站点更易于维护和将来更改

必须?不。我们可以按照自己的意愿做。

通常,最好是在可能的情况下,最好将CSS保留在html之外。

那就是我通常所做的。

至少在一开始。当页面设计接近最终版本时,我会将大多数内容移至"主要"样式。

我们可以在外部,嵌入在文档中(在<style>标记内)或者元素上内联的三个级别定义CSS。

根据需求,我们可能会同时使用这三种,因为根据经验,外部表对于整体样式很有用,因为我们可以在全局范围内应用它们。如果我们有必须处理的特定情况,则可以使用其他级别。

我更喜欢在CSS中保持样式,因为它可以将视图与演示文稿分开,从而使我可以轻松地在演示文稿之间进行交换。另外,它将所有信息保留在一个地方,而不是在两个地方分开。

我们都可以做。但是,通过将CSS移到单独的文件中,可以对其进行缓存。这减少了每页需要传输的数据量,降低了带宽成本,并提高了速度。

从技术上讲,可以仅使用内联CSS格式,而无需使用外部样式表。我们也可以将样式表嵌入HTML文档中。网页设计的最佳做法是将CSS分成单独的样式表。原因是存在CSS样式表是为了定义文档的表示样式。 HTML文件用于定义文档的结构和内容。也许我们可能有一些JavaScript文件,这些文件可以为文档添加其他行为。

将演示文稿,标记和行为保持分开可以创建更简洁的设计。

从实际的角度来看,如果我们只有一个外部CSS样式表,则浏览器可以对其进行缓存。如果我们网站上的多个页面具有相同的外观和风格,则它们可以使用相同的外部样式表,只需通过Web浏览器下载一次即可。这将降低网络带宽费用,并提供更快的最终用户体验。

我们不必将CSS保留在外部文件中,不会。我们要问的是"内联" css:通过<style>块直接在页面本身中包含样式指令。

有时候,适度也许是有道理的,但总的来说,这不是我们要走的路。将CSS隔离在外部样式表中,可以更轻松地维护HTML和样式,尤其是在项目扩展和易手时。

我们可以在HTML页面中包含CSS。它位于&lt;style>标签内,而该标签位于&lt;head>标签内:

<head>
  <style type="text/css">
    body{ background-color: blue; }
  </style>
</head>

但是请注意,最佳做法是使用.css文件。

在外部文件中包含CSS的一大优势是,一条规则可以应用于许多不同的页面。这是三种CSS方法的对比:

内联样式将颜色更改为蓝色,我们可能必须在许多页面上找到红色样式存在的每个位置。

<span style="color: red;">This is a warning.</span>

页面样式可让我们在这种情况下标记什么是警告,而不是其外观。我们可以通过更改页面顶部的一行代码来更改页面上的所有"警告",使其具有黄色背景。

<head>
  <style type="text/css">
    .warning {color: red;}
  </style>
<body>
<span class="warning">This is a warning.</span*>

外部文件与上面的代码相同,但是样式信息位于单独的文件中,这意味着我们可以在许多页面上使用"警告"类。

CSS可以提高性能,因为它们是从浏览器缓存的,并且页面更小!

将规则放入HTML页面可以使它们比外部规则具有更大的"特殊性",因此具有更高的优先级。如果有几个CSS规则冲突,则ID胜过类,而内联样式则胜过ID。

<head>
  <style type="text/css">
    span.reminder {color: blue;}
    span#themostimportant {color: red;}    
  </style>
</head>
<body>
  <span class="reminder" id="themostimportant">
    This text will be red.
  </span>
  <span class="reminder" id="themostimportant" style="color: green;">
    This text will be green.
  </span>
</body>

对于在站点范围内使用的所有样式,请使用外部文件;对于仅在该页面上使用的样式,请使用文档样式表;当样式仅影响单个元素时,请使用内联样式。

外部样式表并不总是会降低带宽。如果我们将网站中每个页面的每种样式都放入一个巨大的css文件中,则即使用户仅访问一次主页,他们的用户也会产生大量的初始下载。

将样式仔细地划分为使用最常用样式的main.css,然后随着用户更深入地挖掘而划分为其他样式表,这有助于使通过网站的某些路径的下载次数减少。