CSS
常用样式：
1、字体颜色 color：red；
颜色可以写颜色名如：black, blue, red, green 等 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必 须加#
2、宽度 width:19px; 宽度可以写像素值：19px； 也可以写百分比值：20%；
3、高度 height:20px; 高度可以写像素值：19px； 也可以写百分比值：20%；
4、背景颜色 background-color:#0F2D4C
5、字体样式： color：#FF0000；字体颜色红色 font-size：20px; 字体大小
6、红色 1 像素实线边框 border：1px solid red;
7、DIV 居中 margin-left: auto; margin-right: auto;
8、文本居中： text-align: center
9、超连接去下划线 text-decoration: none;
10、表格细线
table {
border: 1px solid black; /*设置边框*/
border-collapse: collapse; /*将边框合并*/
}
td,th {
border: 1px solid black; /*设置边框*/
}
11、列表去除修饰 ul { list-style: none; }
1. 选择器：
CSS选择器是一种模式，用于匹配HTML文档中的元素。
常用的选择器包括元素选择器、类选择器、ID选择器和伪类选择器。
- 元素选择器选择HTML文档中的元素标记，例如p、h1、div等；
- 类选择器选择具有相同类名的元素，例如.class；
- ID选择器选择具有特定ID的元素，例如#id。
具体代码
标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 选择器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。-->
<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>
</body>
</html>
id 选择器
id 选择器的格式是：
#id 属性值{
属性：值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 选择器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ;
}
</style>
</head>
<body>
<!-- 需求 1：分别定义两个 div 标签，
第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，
字体大小 30 个像素。边框为 1 像素黄色实线。
第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大 小 20 个像素。
边框为 5 像素蓝色点线。
-->
<div id="id002">div 标签 1</div>
<div id="id001">div 标签 2</div>
</body>
</html>
class 选择器（类选择器）
class 类型选择器的格式是：
.class 属性值{
属性：值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。-->
<div class="class02">div 标签 class01</div>
<div class="class02">div 标签</div>
<span class="class02">span 标签 class01</span>
<span>span 标签 2</span>
</body>
</html>
组合选择器
组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<!-- 需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，
字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。-->
<div id="id01">div 标签 class01</div> <br />
<span >span 标签</span> <br />
<div>div 标签</div> <br />
<div>div 标签 id01</div> <br />
</body>
</html>
2. 属性：
CSS属性用于定义元素的样式和行为。
例如，background-color属性定义元素的背景颜色，width属性定义元素的宽度等。
在CSS中，每个属性都有一组可能的值，例如像素值、百分比、颜色名称等。
3. 值：
CSS属性需要一个值来定义元素的样式。
例如，width属性的值可以是像素值（px）、百分比值（%）或其他CSS长度单位。
其他CSS属性的值可能是颜色值、布尔值、字符串等。
4. 盒模型：
在CSS中，每个HTML元素都被视为一个矩形盒子，称为盒子模型。
盒子模型由四个部分组成：内容区域、内边距、边框和外边距。
内容区域指的是元素的实际内容，内边距是内容区域和边框之间的空白区域，
边框是内边距和外边距之间的边框线，外边距是元素和其他元素之间的空白区域。
5. 浮动：
CSS中的浮动是一种布局方式，
用于将元素从文档流中移动并放置在页面上的指定位置。浮动的元素会向
左或向右移动，直到它们遇到另一个元素或父元素的边界。
可以使用CSS的float属性来设置元素的浮动方向。
6. 定位：
CSS提供了相对定位和绝对定位两种定位方式。相对定位允许元素相对于其原来的位置进行微调，而绝对定位则将元素定位到其包含元素的位置。
要使用相对定位，可以使用CSS属性position:relative。
例如，使用position:relative;top:10px;left:20px可以将元素相对于其原来的位置向下移动10个像素，向右移动20个像素。
要使用绝对定位，可以使用CSS属性position:absolute。
例如，使用position:absolute;top:0;left:0可以将元素定位到其包含元素的左上角。
7. 媒体查询：
CSS的媒体查询允许您根据设备的属性（例如屏幕宽度、设备方向等）修改元素的样式。
可以使用CSS的@media规则来指定不同的CSS样式表应用于不同的设备。
8. 层叠和优先级
当多个CSS样式应用于同一元素时，可能会出现样式的冲突。在这种情况下，CSS使用层叠和优先级规则来确定应用哪种样式。
层叠规则是指样式按照特定的顺序进行叠加，优先级规则则是指样式的特定组合决定了应用哪种样式。优先级从高到低的顺序是：
1. !important声明
2. 内联样式
3. ID选择器
4. 类选择器、属性选择器和伪类选择器
5. 标签选择器和伪元素选择器
例如，如果一个元素同时具有ID选择器和类选择器，那么ID选择器的样式优先级更高。
除了优先级，还有其他因素可以影响样式的应用。
例如，CSS选择器的特殊性可以影响样式的应用。选择器的特殊性是指选择器的权重，权重越高，应用的样式就越优先。
特殊性的计算方式是将选择器分解为四个部分：
1. ID选择器
2. 类选择器
3. 属性选择器的数量
- 4. 标签选择器的数量。
9. CSS预处理器：
CSS预处理器是一种CSS扩展语言，允许您编写更简洁、易于维护的CSS代码。常见的CSS预处理器包括Sass、Less和Stylus。
这些预处理器提供了变量、混合器、函数等功能，使得编写和组织CSS代码更加方便。
10. CSS框架：
CSS框架是一组预定义的CSS规则，用于加快Web开发过程。
常见的CSS框架包括Bootstrap、Foundation和Semantic UI等。这些框架提供了样式、组件和布局等基本元素，使得构建Web页面更加容易。
11. 过渡和动画
CSS过渡和动化是一种使元素在不同状态之间平滑过渡的技术。过渡可以在元素状态发生变化时产生平滑的效果，而动画则可以创建更复杂的效果，如旋转、缩放和闪烁。
要创建CSS过渡，可以使用CSS属性transition。例如，使用transition: all 0.3s ease可以使元素在状态发生变化时以0.3秒的时间平滑地过渡。要创建CSS动画，可以使用CSS属性animation。例如，使用以下代码可以创建一个旋转动画：
cssCopy code
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.my-element {
animation: rotate 2s linear infinite;
}
这会使元素以线性速度无限旋转2秒。
本章笔记是观看尚硅谷的JAVAWEB特性的视频和在网上找的资料 以及自己的理解总结出来的笔记希望可以帮助大家，感谢大家的耐心观看 如有错误请即使联系我 我会及时修正
