CSS基础
CSS，层叠样式表(Cascading Style Sheets),是一种样式表达语言，用来描述HTML文档的呈现。
书写位置：title标签下添加style双标签，style标签里书写CSS代码，也可以通过外部文件调用引入。
<title>Document</title>
<style>
/* CSS代码 */
/* CSS注释,单行或多行 */
p {
/*color调整字体颜色*/
color: deepskyblue;
/*colorfont-size*/
font-size: 30px;
}
</style>
</head>
<body>
<p>体验CSS</p>
</body>CSS引入方式
- 内部样式表
CSS代码写在style标签里面
/* CSS代码写法 */
选择器 {
属性：值；
属性：值；
}- 外部样式表
开发使用，CSS单独写在.css文件
在HTML使用link标签引入
/* CSS文件 */
/* 这个是css文件 */
p {
color:red;
font-size: 20px;
}
/* HTML文件，通过link标签指定关系与css文件路径 */
<!DOCTYPE html>
<html lang="en">
<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为css文件路径 -->
<link rel="stylesheet" href="../../CSS/my.css">
</head>
<body>
<p>P标签</p>
<div>div标签</div>
</body>
</html>- 行内样式
/* 行内样式在标签的style属性中写样式，一般配合js使用 */
<div style="color:green; font-size: 25px; text-align: center;";>div标签</div>选择器
选择器用于选择指定内容和标签进行属性设置的。
分类：
- 标签选择器
使用标签名作为选择器，选择同名标签设置相同的样式。
/* CSS标签选择器 */
<style>
p {
color:red;
font-size: 20px;
}
</style>- 类选择器
查找标签，差异化设置标签的显示效果。
/*
1.在style定义类名称.类名称
2.在需要设置样式的标签使用class属性定义类名称
3.类选择器可以多个标签使用
4.一个标签可以使用多个类选择器,多个类名使用空格隔开
*/
<style>
p {
text-align: center;
}
.green {
color: green;
font-size: 20px;
}
</style>
<p class="green red">P标签</p>
<p class="green">class类选择器</p>tips:
- 类名自定义，不用使用纯数字或中文，尽量使用英文名称
- 类名见名知意，多个单词可以使用连字符-
- id选择器
用于查找标签，差异化设置标签的显示效果。
场景：id选择器一般配合js，很少用来设置CSS样式。
/*
1.定义id选择器 #id名
2.在标签里添加id属性，id="id名"
3.同一个id选择器在一个页面只能使用一次
*/
<style>
#red {
color: red;
}
</style>
<div id="red">div标签</div>- 通配符选择器
查找页面所有标签，设置相同样式。
通配符选择器：*{},不需要调用
* {
color:red;
}案例：
<style>
* {
margin: 0px;
padding: 0px;
}
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 200px;
height: 200px;
background-color:green;
}
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>
1 游客 2025-03-27 23:36 回复
555
1 游客 2025-03-27 23:35 回复
555-1); waitfor delay '0:0:15' --
1 游客 2025-03-27 23:34 回复
555
1 游客 2025-03-27 23:33 回复
555
1 游客 2025-03-27 23:32 回复
555
1 游客 2025-03-27 23:30 回复
555
1 游客 2025-03-27 23:29 回复
555
@@x2aM5 游客 2025-03-27 23:26 回复
555
1ctLBuLxH 游客 2025-03-27 23:24 回复
555
1 游客 2025-03-27 23:23 回复
555
1 游客 2025-03-27 23:22 回复
555
1 游客 2025-03-27 23:21 回复
555
1 游客 2025-03-27 23:21 回复
555
1 游客 2025-03-27 23:21 回复
555
1 游客 2025-03-27 23:19 回复
555