在HTML文档中使用CSS的方法

CSS样式表在HTML文档中的使用主要分三种:行内样式内部样式表外部样式表。其中,外部样式表又分为链入外部样式表和导入外部样式表。

1. 行内样式

行内样式(inline style),也叫内联样式,就是在HTML的标签中使用style属性来设置css样式 。

如:

我喜爱的运动:

其作用范围是:作用于本标签。

2.内部样式表

内部样式表是将样式放在本页面的标签中,使用

进行声明。

如:

有序列表

p{

font-size: 20px;

color: #F00;

}

其作用范围是:作用于当前整个页面。

3.外部样式表

外部样式表又分为链入外部样式表和导入外部样式表

a. 链入外部样式表

或称链接外部样式表,是将样式表保存为外部样式表文件,如“main.css”,再在页面的中用

标记链接到这个样式表文件。

如:

有序列表

样式表存在"main.css"的外部样式表文件中,代码如下:

@charset "utf-8";

p{

font-size: 20px;

color: #F00;

}

其作用范围是:作用于引用该样式表文件的页面。

b. 导入外部样式表

即使用import在style标签中导入css文件

有序列表

@import "main.css";

其作用范围是:作用于导入该样式表文件的页面。

链入外部样式表和导入外部样式表的不同:

使用链入外部样式表时,会在先加载页面主体部分之前加载CSS文件,这样显示出来的网页从一开始就是带有样式效果的。

而使用导入外部样式表时,则是在整个页面加载完成后再加载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件比较大,则会出现显示无样式的页面,闪烁一下之后再出现设置样式后的效果。用户体验不佳。

为了便于维护,一般这样使用

如果仅需要引入少量CSS文件,则使用链接方式;

如果需要引入多个CSS文件,则首先用链接方式引入一个CSS文件,在这个CSS文件中再使用导入式引入其他CSS文件。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181008G21BFC00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券