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特性的视频和在网上找的资料以及自己的理解总结出来的笔记希望可以帮助大家，感谢大家的耐心观看如有错误请即使联系我我会及时修正

CSS的知识点帮助复习和理解

CSS