CSS样式表的建立和优先级_css创建样式列表的级别映射-CSDN博客

本文链接：https://blog.csdn.net/dpl12/article/details/115277185

文章目录

前言
一、大纲
二、内容详解
三、代码

前言

CSS样式表的建立和优先级！

一、大纲

CSS样式表的建立
方式一：内部样式表（嵌套到页面中的头部）
方式二：内联样式表（行间样式，行内样式，嵌入式样式）
方式三：外部样式表（引入外部样式文件）
CSS样式表的优先级
内联样式表的优先级别最高。
内部样式表与外部样式表优先级和编写位置有关，位置靠下的样式表会覆盖位置靠上的样式表。

二、内容详解

1.内部样式表

语法：
<head>
  <style type="text/css">
  /*css语句*/
  </style>
</head>

2.内联样式表

语法：
<标签 style="属性:属性值;属性:属性值;"></标签>

3.外部样式表

语法：
<head>
  <link rel="stylesheet" type="text/css" href="外部文件路径和名称"/>
</head>

说明：

rel：用于定义文档关联，表示关联样式表
type：定义文档类型
href：引入外部样式文件

三、代码

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1、内部样式表-->
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #7195B7;
			}
		</style>
		<!--2、外部样式表-->
		<link rel="stylesheet" type="text/css" href="./04css样式表.css" />
	</head>
	
	<body>
		<!--3、内联样式表-->
		<div style="width: 100px;height: 100px; background-color: aqua;"></div>
	</body>
</html>