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。
具体代码
标签名选择器
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>CSS 选择器</title> 6. 7. <style type="text/css"> 8. div{ 9. border: 1px solid yellow; 10. color: blue; 11. font-size: 30px; 12. } 13. 14. span{ 15. border: 5px dashed blue; 16. color: yellow; 17. font-size: 20px; 18. } 19. </style> 20. </head> 21. <body> 22. <!-- 需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 23. 并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。--> 24. 25. 26. <div>div 标签 1</div> 27. <div>div 标签 2</div> 28. <span>span 标签 1</span> 29. <span>span 标签 2</span> 30. </body> 31. </html>
id 选择器
id 选择器的格式是：
#id 属性值{
属性：值;
}
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>ID 选择器</title> 6. <style type="text/css"> 7. 8. #id001{ 9. color: blue; 10. font-size: 30px; 11. border: 1px yellow solid; 12. } 13. 14. #id002{ 15. color: red; 16. font-size: 20px; 17. border: 5px blue dotted ; 18. } 19. </style> 20. </head> 21. <body> 22. <!-- 需求 1：分别定义两个 div 标签， 23. 第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色， 24. 字体大小 30 个像素。边框为 1 像素黄色实线。 25. 第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大 小 20 个像素。 26. 边框为 5 像素蓝色点线。 27. --> 28. <div id="id002">div 标签 1</div> 29. <div id="id001">div 标签 2</div> 30. </body> 31. </html>
class 选择器（类选择器）
class 类型选择器的格式是：
.class 属性值{
属性：值;
}
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>class 类型选择器</title> 6. <style type="text/css"> 7. 8. .class01{ 9. color: blue; 10. font-size: 30px; 11. border: 1px solid yellow; 12. } 13. 14. .class02{ 15. color: grey; 16. font-size: 26px; 17. border: 1px solid red; 18. } 19. </style> 20. </head> 21. <body> 22. 23. <!--需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 24. 需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。--> 25. 26. <div class="class02">div 标签 class01</div> 27. <div class="class02">div 标签</div> 28. <span class="class02">span 标签 class01</span> 29. <span>span 标签 2</span> 30. </body> 31. </html>
组合选择器
组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>class 类型选择器</title> 6. <style type="text/css"> 7. 8. .class01 , #id01{ 9. color: blue; 10. font-size: 20px; 11. border: 1px yellow solid; 12. } 13. </style> 14. </head> 15. <body> 16. 17. <!-- 需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签， 18. 字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。--> 19. 20. <div id="id01">div 标签 class01</div> <br /> 21. <span >span 标签</span> <br /> 22. <div>div 标签</div> <br /> 23. <div>div 标签 id01</div> <br /> 24. </body> 25. </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特性的视频和在网上找的资料 以及自己的理解总结出来的笔记希望可以帮助大家，感谢大家的耐心观看 如有错误请即使联系我 我会及时修正
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)