CSS样式表的建立和优先级

最新推荐文章于 2023-08-23 20:34:01 发布

Hia_Hia_Hia

最新推荐文章于 2023-08-23 20:34:01 发布

阅读量137

点赞数

分类专栏：网页

本文链接：https://blog.csdn.net/Hia_Hia_Hia/article/details/108918878

版权

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、CSS样式表的建立

方法一：内部样式表（嵌套到页面中）

语法：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {width: 100px; height: 100px; background: #f00;}/*CSS语句*/
	</style>	
</head>
<body>
	<div></div>
</body>
</html>

说明：使用style标记创建样式时，最好将该标记写在<head></head>之间

方法二：内联样式（行间样式，行内样式，嵌入式样式）

语法：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div style="width: 100px; height: 100px; background: #0f0;"></div>/*CSS语句*/
</body>
</html>

方法三：引用外部样式表文件（用得最多）

步骤1：外部样式表的创建（是个CSS文件）

@charset "utf-8";
/*CSS DOCUMENT*/
div {width: 100px; height: 100px; background: #00f;}

步骤2：外部样式表的导入（在html中导入CSS文件）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="3.css">
</head>
<body>
	<div></div>
</body>
</html>

语法：<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称"/>

说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间

rel：用于定义文档关联，表示关联样式表

type：定义文档类型

2、CSS样式表的优先级

内联样式表的优先级最高

内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级更高

Hia_Hia_Hia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表的建立和优先级

1、CSS样式表的建立方法一：内部样式表（嵌套到页面中）语法：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> div {width: 100px; height: 100px; background: #f00;}/*CSS语句*/ </style>
复制链接

扫一扫