1 CSS定义和基本选择器
1.1 CSS定义
cascading style sheet 层叠样式表。
1.2 语法
选择器 {
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
属性名4:属性值4;
}
1.3 CSS使用
1、通过选择器选择上标签
2、在选择的标签上设置样式
选择器分类：
标签选择器： p{}、div{} …
类选择器： .className{}
id选择器： #id{}
一些常见的样式：
color:red; 文字颜色
font-size:40px;
background-color:blue;
text-decoration:underline;
text-decoration:none; //去掉下划线
<!--
~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
~ Copyright @TangXJ
~ Created by TangXJ
~ Created&Used date: 2024/3/29 下午2:57 ~ 2024/3/29 下午3:17
~ Modified date: 2024/3/29 下午3:17
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--3.外部样式-->
<link rel="stylesheet" href="css/my.css">
<style>
/*标签选择器，选择页面上所有的h1标签*/
h1{
background-color: antiquewhite;
/*独占一行*/
}
/*2.内部样式，也不推荐，为了方便有时候会写在这里
. 叫类选择器
*/
.blue{
color: blue;
}
/*id选择器
一般给JavaScript用，唯一标识
不是给样式用的，能用但是没必要
*/
#green{
color: greenyellow;
}
</style>
</head>
<body>
<!--1.内嵌样式，不推荐这样写-->
<h1 style="color: red;">王老师</h1>
<h1 class="blue">朱老师</h1>
<h1 class="yellow">李老师</h1>
<h1 >高老师</h1>
<!--一般样式不用id选择器，id是唯一标识一个元素，是留给后面的-->
<h1 id="green">丁老师</h1>
<h1>王老师</h1>
</body>
</html>
2 CSS使用思想
不推荐的：
<!--
~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
~ Copyright @TangXJ
~ Created by TangXJ
~ Created&Used date: 2024/3/29 下午5:00
~ Modified date: 2024/3/29 下午5:00
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.style1{
color: red;
font-size: 50px;
}
.style2{
color: red;
text-decoration: underline;
}
.style3{
font-size: 50px;
text-decoration: underline;
}
.style4{
color: red;
font-size: 50px;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="style1">段落1</p>
<p class="style2">段落2</p>
<p class="style3">段落3</p>
<p class="style4">段落4</p>
</body>
</html>
一共有三种样式：50px字体、红色、下划线
正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有红、大、线，一旦携带这个类名，就有相应的样式变化。
推荐的：
<!--
~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
~ Copyright @TangXJ
~ Created by TangXJ
~ Created&Used date: 2024/3/29 下午3:19 ~ 2024/3/29 下午3:32
~ Modified date: 2024/3/29 下午3:32
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.font-50{
font-size:50px;
}
.underline{
text-decoration:underline;
}
.red{
color: red;
}
</style>
</head>
<body>
<p class="font-50 red">段落1</p>
<p class="red underline">段落2</p>
<p class="font-50 underline">段落3</p>
<p class="font-50 underline red">段落4</p>
</body>
</html>
小结
1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
3 CSS高级选择器
s1 s2 后代选择器
s1,s2 并集选择器(选择器组) ||
XXX[type="xxx"]属性选择器
s1.s2 交集选择器（既满足选择器1也满足选择器2） &&
s1>s2 直接儿子选择器，和后代选择器不一样
s1+s2 下一个兄弟选择器,后面紧挨着的第一个兄弟
4 盒模型
盒子中主要的属性就5个：width、height、padding、border、margin。
padding 内边距
margin外边距
盒模型的示意图：
div+css
有一个问题：div是块级元素，如何在一行嵌入多个div呢？这是另外的知识点
https://blog.csdn.net/qq_36608036/article/details/121403345
5 BootStrap
Bootstrap 是一种流行的前端开发框架，用于快速构建响应式和移动优先的网站和 Web 应用程序。它由 Twitter 的开发团队创建，并在2011年首次发布，目前由社区维护和支持。
以下是关于 Bootstrap 的一些重要特点和功能：
1.响应式设计： Bootstrap 提供了强大的网格系统和 CSS 样式，使得网站能够适应不同大小的屏幕和设备，实现响应式布局。
2.移动优先： Bootstrap 的设计理念是从移动设备开始，然后逐渐适配到更大的屏幕，确保在各种设备上都能提供良好的用户体验。
3.组件库： Bootstrap 包含丰富的预定义组件（如按钮、导航栏、表格、表单等），可以通过简单的 HTML 标记和 CSS 类快速构建各种界面元素。
4.JavaScript 插件： Bootstrap 还提供了一系列的 JavaScript 插件，用于实现交互式功能，如模态框、滚动监听、轮播等，可以轻松地集成到项目中。
5.定制化： Bootstrap 提供了定制化工具，允许开发人员根据项目需求选择特定组件和样式，生成定制化的版本，减少了不必要的代码冗余。
总的来说，Bootstrap 是一个强大而灵活的前端框架，使开发人员能够快速构建现代化的网站和 Web 应用程序，同时确保其具有良好的响应式设计和跨平台兼容性
Bootstrap全局样式特点：
1、代码简洁
2、风格统一
3、美观易用
