CSS
1 CSS概念
1.1 什么是CSS
-CSS指的是折叠式样表（Cascading Style Sheets）
-CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
-CSS节省了大量工作。它可以同时控制多张网页的布局
-外部样式表存储在CSS文件中
1.2 CSS的作用
CSS用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计布局。
1.3 CSS的格式
选择器{
属性：值；
属性：值；
：
：
：
属性：值；
}
1.4 CSS的注释
/*
要注释的内容
*/
1.5 CSS引入方式
1.5.1 使用< style >标签引入
页面内： < style > 出现在任意位置（习惯上：< head> < style>< /style> < /head>)
< style>
样式
< /style>
div{
width: 400px;
height: 300px;
background-color: pink;
}
1.5.2 内嵌式引用
标签内部: < p style=“样式”> < /p>
<div style="width: 300px;height: 200px;background-color: red;">
2
</div>
1.5.3 外部引用
定义一个css文件： xxx.css
css文件中写样式
引用css文件
< link rel=“stylesheet” href=“css文件的位置” />
2 CSS选择器
2.1 选择器概念
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
2.2 常用选择器
2.2.1 标签选择器
元素选择器根据元素名称来选择 HTML 元素。
h1{ 属性: 值; }
2.2.2 *选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
*号 表示通配符：所有的
*{
}
2.2.3 id选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
#id值{
属性：值；
}
<link rel="stylesheet" href="../css/20211003/selector02.css">
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
#div1{
width: 300px;
height: 200px;
background-color: green;
}
#div2{
width: 300px;
height: 200px;
background-color: pink;
}
2.2.4 类(class)选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
.类名{
}
<p class="类名">
<h1 class=“类名">
2.2.5 逗号（分组）选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
#stuId**,** .abc{
选中id为stuId和类选择器.abc的所有
}
h1, h2，p{
}
2.2.6 后代（包含）选择器
后代选择器可以选择作为某元素后代的元素。
div p{
div标签下面的所有p标签
}
<div id="outId">
<div>
内部div
<p
最低0.47元/天 解锁文章
8406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
