概述CSS作用：主要用于控制网页的样式和布局。
一、样式的书写格式
1、三种格式
包含：行内式，嵌入式（内部式），链接式（外部式）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 链接式（外部式） -->
<link rel="stylesheet" href="./option.css"/>
</head>
<style>
/* 嵌入式（内部式） */
.towDive{
color: blue;
font-size: 15px;
}
</style>
<body>
<!-- 行内式 -->
<div style="color: aqua;font-size: 20;">盒子1</div>
<!-- 嵌入式（内部式） -->
<div class="towDive">盒子2</div>
<!-- 链接式（外部式） -->
<div class="threeDiv">盒子3</div>
</body>
</html>
2、三者的优先级
行内>嵌入（内部）>链接（外部）
注释点：在电脑对结构体进行样式渲染时，优先选择离标签/元素最近的样式进行渲染。（了解即可）
3、建议点
概述：对于初学者，推荐使用嵌入式（内部）的方式书写，方便查找记忆和修改，但在商业项目中编写代码时，常用的是链接式，如下图。
二、三大基础选择器
选择器概述：通常在嵌入与链接两种书写格式下使用，用于具体指向某个标签/元素。
1、标签选择器
简述：使用标签名来直接书写标签/元素样式，但在商业项目中，同一标签往往存在多个，容易出现样式渲染错乱，不推荐使用！（了解即可）
2、id选择器
简述：为某一标签定义id属性值，使用id属性值进行指向渲染。
存在的优缺点：优点→指向性强（具备唯一性），优先级高；缺点→只能应用于单个标签/元素，复用性差，写多了可能导致项目后期不好维护（一个个找一个个调，天都要塌！）。
3、类（class）选择器
简述：为一个类型的标签定义class属性值，使用class属性值进行指向渲染。
存在的优缺点：优点→样式的复用性强，维护便捷，可差异化设置样式；缺点→优先级低（对标id选择器），可能导致额外的性能开销（当存在多个同类名的标签时会出现这一情况，了解即可）。
4、三个基础选择器的优先级
id选择器>类（class）选择器>标签选择器
扫一扫
2393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
