CSS
Css的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式丰富
- 建议使用独立的html的css
CSS的导入方式
第一种导入方式 ：行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的第一种导入方式</title>
</head>
<body>
<!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style = "color: red" >你好我在学习css</h1>
</body>
</html>
第二种导入方式：内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范，style 可以编写css代码 -->
<!-- 内部样式 -->
<style>
/* 语法：
选择器{
声明1；
声明2：
声明3；
}
注意：每声明一个用 ; 号结尾
*/
h1{
color: chartreuse;
}
</style>
</head>
<body>
<h1>nihao</h1>
</body>
</html>
第三种导入方式：外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范，style 可以编写css代码 -->
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<h1>nihao</h1>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4DG1l6I3-1676896986578)(Css.assets/image-20230220192303026.png)]](https://img-blog.csdnimg.cn/99eef56f77ec4871832123e7d21f4b21.png)
第四种导入方式：导入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范，style 可以编写css代码 -->
<style>
@import url("css/css.css");
</style>
</head>
<body>
<h1>nihao</h1>
</body>
</html>
选择器
作用：选择页面上的某一个或者某一类元素
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
标签选择器，会选择到页面上的所有的这个标签的元素
*/
h1{
color: red; /* 字体的颜色 */
background: beige; /* 字体的背景 */
border-radius: 9px; /* 背景角的弧度 */
}
p{
font-size: 90px; /* 字体大小 */
}
</style>
</head>
<body>
<h1>
你好我在学习java
</h1>
<p>
你好
</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
类选择器的格式，
.class的名称{
}
优点：
可以多个标签归类，可以复用。
可以跨标签使用
*/
.sin{
color: #f3a4a4;
}
.sin1{
color: #043e3e;
}
.sin2{
background: #e0a28d;
border-radius: 9px;
}
</style>
</head>
<body>
<h1 class = "sin">你好</h1>
<h1 class="sin1">你好</h1>
<h1 class="sin2">你好</h1>
<p class="sin2 ">nihao </p>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
id选择器 : id 必须保证页面唯一性
#id名称{
样式
}
*/
#sin{
color: blueviolet;
}
</style>
</head>
<body>
<h1 id="sin">你好1</h1>
<h1>你好1</h1>
<h1>你好1</h1>
<h1>你好1</h1>
<h1>你好1</h1>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
通配符选择器 : 所有选择器里面作用最广泛的，能匹配页面的所有的元素
*{
样式
}
在实际开发中不建议使用通配符选择器，
因为它设置的样式对所有的HTML标记都生效，
不管标记是否需要该样式，反而降低了代码的执行速度。
*/
*{
color: blueviolet;
}
</style>
</head>
<body>
<h1 >你好1</h1>
<h1>你好1</h1>
<h1>你好1</h1>
<h1>你好1</h1>
<h1>你好1</h1>
</body>
</html>
集结选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
/**
集结选择器：同时匹配多个选择器，取多个选择器的并集，选择器之间用,号隔开
标签,标签{
样式;
}
优点:
将多个标签的相同样式提取出来，集中声明，优化代码，方便阅读。
*/
span,p{
color: red;
}
</style>
</head>
<body>
<span>我是span标签</span>
<p>我是一个p标签</p>
<p>我是第二个p标签</p>
</body>
</html>
![[Datawhale][CS224W]图机器学习(四)](https://img-blog.csdnimg.cn/img_convert/752329d821f32e26640657e79137d495.png)
