CSS样式表的三种引入方式

时间：2021-06-19 18:46:18 阅读：0 评论：0 收藏：0 [点我收藏+]

1. 行内样式表（内联样式）

顾名思义，行内样式表就是将CSS样式表写在html的代码行中，在HTML的标签中使用style属性来设置元素的样式。

实际上，HTML中所有的标签都可以使用style属性进行设置元素样式。

1.1 基本语法格式

1 <标签名 style = " 属性1：属性值1；属性2：属性值2；属性3：属性值3；"> 网页内容 </标签名>

1.2 案例

`<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行内样式表</title> </head> <body> <div style="color: red; font-size: 30px;">青春不常在，抓紧谈恋爱</div> </body> </html>`

2. 内部样式表（内嵌样式）

该种样式表是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

2.1 基本语法格式

<head>
    <style type="text/CSS">
        选择器（选择的标签） { 
          属性1: 属性值1;
          属性2: 属性值2; 
          属性3: 属性值3;
        }
    </style>
</head>

2.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部样式表</title>
        <style>
	        div {
	 	         color: red;
	 	         font-size: 30px;
	        }
        </style>
	</head>
	<body>
		<div>青春不常在，抓紧谈恋爱</div>
	</body>
</html>

3. 外部样式表（外链样式）

是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

3.1 基本语法格式

<!-- 编写.CSS文件-->
在test.css文件中写入CSS代码
div {
	 color: red;
	 font-size: 30px;
}

<head>
    <link rel="stylesheet" type="text/css" href="css文件位置">
</head>

3.2 注意

link标签需要放在head头部标签中，并且指定link标签的三个属性。

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

4. 比对优劣

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

CSS样式表的三种引入方式

标签：文件的外部内容 url 部分作用使用分离 doc

原文地址：https://www.cnblogs.com/lkztrovo-lsh/p/14887286.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行