1. 链接单独CSS文件(外联样式(链接外部样式表))

此方法是在HTML文档中加载CSS规则的最常用方法。通过此方法,所有Style规则将会被保存到后缀名为.CSS文本文件中。此文件常存储于Server端,且由你在HTML文件中直接链接它。此链接仅仅在HTML文件中单独的一行,如:

你需要确认在href中包含正确的CSS文件。如果CSS文件与HTML文件位于相同路径,则无需路径;反之,按照href="foldername/mystyles.css"的方式指明路径。其中,media参数指明CSS规则在何时被使用。“screen”表明用于计算机屏幕。如果指明“print”,规则只有在页面打印时才会被使用。你可按照需要包含若干CSS文件。

链接单独CSS文件有许多优势。如果需要修改整个网站的一个Style,只需要在CSS文件中修改一次。如果需要修改整个网站的外观,则只需要升级一个文件。也许使用单独CSS文件的重要原因是为了访问加速。当用户第一次访问网站时,浏览器下载当前页面以及链接的CSS文件。当导航到另一网页时,浏览器只需要下载HTML页面,CSS文件因已被缓存故无需再次下载。这可以显著提升网页浏览速度。

2. HTML嵌入CSS(内联样式)

Add style rules here

所有CSS规则存放在style标签中。media元素的值可以像上文所述的“screen”/“print”。

这种方法的缺点是每次用户访问网页时Style文件都需要重新下载,这将导致轻微慢的浏览体验。相对的,这种方法也有一些优点。因为CSS是HTML文档的一部分,整个页面只以一个文件的方式存在。在向他人发送邮件页面时或者HTML页面作为类似博客模板时,此方式将会被使用。另一个使用此方法的优点是动态内容。如果你通过数据库来生成页面内容,你同时也能产生动态Style。Blogger采用了这种方法——它动态地插入HTML标题颜色到嵌入在HTML中的CSS规则。这使得用户可以通过Admin页面改变颜色而非在Blog模板中修改CSS。

标签中加入


这是一个DIV



html调用typescript html调用css_html调用typescript

3. HTML标记加入内联CSS(行内样式)

Style规则也可以直接加入HTML元素中。你只需要在元素中加入一个style参数,同时输入Style规则作为其值。下面是一个标题文本为红色、背景为黑色的示例:

This is a red heading with a black background

这是一种不好的方法,因为它将使网页膨胀,使得网页维护变得头疼。但是它在一些条件下,仍然有些用途。一个例子便是:假如你在使用一个你没有CSS文件权限时,对应的只需简单地在元素中加入Style规则。

在元素标签有个style属性,将样式写到该属性中。格式 style=" 属性1 : 值; 属性2 : 值;属性3 : 值;"多个属性用分号“ ; ”隔开。



这是一个DIV标签为



4. 在CSS文件中导入CSS文件

另外一种有趣的在HTML页面加入CSS的方式是导入规则。这种方式让我们从CSS内部附加一个新的CSS文件。

为了在内部导入CSS文件,只需简单地用下面规则:

@import "newstyles.css";