CSS的使用方式

2021-10-15  本文已影响0人  rosy_dawn

使用样式表的方式

使用样式表的方法有四种：

链接外部样式表

当很多页面需要使用相同页面时，可以在这些页面的 <head> 标签中使用 <link> 标签链接到一个外部样式表（external stylesheet）文件。通过 <link> 标签链接的样式表不是 HTML 文档的一部分，却供 HTML 文档使用，改动这个引用的外部样式表文件即可改变整个站点的外观。

为了正确加载外部样式表，<link> 标签必须放在 <head> 标签中，不能放在其他元素中。但 Web 浏览器遇到 <link> 标签时会查找并加载指定的样式表，进而使用样式表渲染 HTML 文档。

当通过 <link> 标签链接外部样式表时，其 rel 属性指定所链接资源与当前文档的关系（relationship），这里一般为 stylesheet，其 type 属性值指定链接资源的 MIME 类型，这里固定为 text/css，href 属性值为外部样式表文件的路径，可以是当前网站中的相对路径，也可以是完整的绝对路径。这里还可以为 <link> 标签指定可选的 meida 属性，该属性值是一个或多个媒体描述符（media descriptor），指明媒体的类型和具有的功能，多个媒体描述符以逗号隔开。如下面的示例：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" media="screen,projection">
</head>

外部样式表文件是一个纯文本文件，其中仅包含了一系列样式规则（可能还有一些 CSS 注释），不能包含 HTML 标签，否则可能导致部分或全部样式失效。外部样式表文件应该以 .css 为扩展名进行保存。虽然文件扩展名不是必须的，但如果文件扩展名不以 .css 结尾，即使在 <link> 标签中把 type 属性值设置为 text/css，有些旧浏览器也不会将其识别为包含样式表的文件。

下面是一个样式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("/images/back40.gif");}

注意：不要在属性值与单位之间留有空格。例如，在 margin-left: 20 px 中，20 和 px 之间不要留有空格，正确的写法是 margin-left: 20px。

当在某个 HTML 文档的 <head> 标签中使用多个 <link> 标签链接到多个外部样式表文件时，浏览器会加载指定的多个外部样式表，合并规则后再应用到文档上。

使用内部样式表

<style> 标签可以导入外部样式表文件，其 type 属性目前唯一可能的值是 text/css，在 HTML5 中，type 属性不再是必须的，默认值为 text/css。值 text/css 指示内容是标准的 CSS。开始和结束 style 标签之间的样式称为文档样式表（document stylesheet）或嵌入式样式表（embedded stylesheet）。

<style> 标签的 scoped 属性是 HTML5 为 <style> 标签新增的属性。如果使用该属性，则样式仅仅应用到 <style> 标签的父元素及其子元素，而不是整个文档。如果没有使用 <style> 标签的 scoped 属性，则每一个 <style> 标签必须位于 <head> 头部区域。

与 <link> 标签类似， <style> 标签也支持相同功能的 media 属性。

<style> 标签可以直接包含应用到文档的样式，也可以通过 @import 指令引入外部样式样式表。

当单个文档的整个页面需要特殊的样式时，可以将 CSS 放在 HTML 文件 <head> 标签里的 <style> 标签中。如下面的实例：

<head>
    <style>
        hr {color: sienna;}
        p {margin-left: 20px;}
        body {background-image: url("images/back40.gif");}
    </style>
</head>

导入外部样式表

导入外部样式表的功能与链接外部样式表的功能差不多，只是语法上存在差别。导入外部样式表需要使用 @import 指令来执行导入。@import 指令语法如下：

@import url(样式表地址);
@import 样式表地址;
@import url(样式表地址) list-of-media-queries;
@import 样式表地址 list-of-media-queries;

示例如下

<!-- 可以连续指定多个 @import 指令 -->
<style type="text/css">
    /* @import 指令必须放在所有样式表的最前方 */
    @import url(样式表地址1) list-of-media-queries;
    @import url(样式表地址2);
    @import url(样式表地址n);
    h1 {color: gray;}
</style>

/* 直接在样式中使用 @import 指令 */
/* @import 指令必须放在所有样式表的最前方 */
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
h1 {color: gray;}

既然链接外部样式表与导入外部样式表的功能差不多，为何还要支持两种语法？这是因为以前的很多浏览器都不支持 @import 导入，因此一些 CSS 开发人员会把一些浏览器可能不支持的高级 CSS 属性放在外部样式表中导入，这样保证只有支持 @import 导入的浏览器才会导入这些高级 CSS 属性。但实际上，由于某些浏览器（例如经常提到的 Internet Explorer）会在导入外部样式表时导致“屏闪”。IE7 及更早浏览器不支持 @import 指定媒体类型和媒体查询。IE8 不支持 @import 指定媒体查询。因此开发者应该尽量避免使用 @import 导入外部样式表，而是应该尽量考虑使用链接外部样式表方式。使用 @import 影响页面性能的地方还体现在如下方面：

使用行内样式表

行内（inline）样式，又叫内联样式，可以通过某个具体的 HTML 标签的 style 属性来定义仅对该 HTML 标签对象有效的样式。如下面的实例：

<p style="color:sienna; margin-left:20px">This is a paragraph.</p>

注意：由于要将表现和内容混杂在一起，行内样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

除 <body> 元素以外的所有 HTML 标签都可以设定 style 属性。

注意，style 属性的值只能是一系列规则声明，而不能包含整个样式表。因此，不能在 style 属性中使用 @import 指令，也不能有完整的规则。style 属性的值只能是样式规则花括号之间的那一部分。

一般来说，不建议使用内部 CSS 样式。这种内部 CSS 样式主要有以下劣势：

但内部样式定义也并非一无是处，在某些地方，行内样式更常见，甚至更可取。如果想让某些 CSS 样式仅对某个页面有效，而不会影响整个站点，则应该选择使用内部 CSS 样式定义。如果您的工作环境确实很严格，也许网站内容管理系统仅允许您编辑 HTML 正文，则可能不得不使用它们。此外，行内样式很长时间被应用在 HTML 电子邮件中，以便与尽可能多的电子邮件客户端兼容。

上一篇 下一篇

猜你喜欢

热点阅读