CSS的基础概念：CSS（层叠样式表）是一种用于定义和布局HTML文档的样式的标记语言。 CSS核心知识： 1.选择器：CSS使用选择器来选择HTML文档中的元素并应用样式。常见的选择器有标签选择器、类选择器和ID选择器。例如，使用标签选择器可以选择所有的段落元素（< p >），使用类选择器可以选择具有相同类名的元素（.class），使用ID选择器可以选择具有唯一ID的元素（#id）。 2.属性和值：CSS属性用于指定要应用于元素的样式，每个属性都有一个对应的值。例如，"color"是一个属性，用于设置元素的文本颜色，而"red"是一个可能的值。可以通过将属性和值放置在大括号内来将样式规则应用于选择的元素。 3.盒模型：CSS中的盒模型描述了每个HTML元素在页面上所占据的空间。它由四个部分组成：内容区域、内边距、边框和外边距。这些部分的尺寸可以使用CSS属性（如width、height、padding和margin）进行控制。 4.样式优先级：当多个CSS规则应用于同一个元素时，会根据样式优先级来确定应用哪个规则。样式优先级的计算基于选择器的特定性和重要性。特定性是指选择器的权重，例如ID选择器的特定性高于类选择器。重要性可以通过使用!important声明来提高某个样式规则的权重。 5.布局和定位：CSS提供了多种布局和定位元素的方法。常用的布局技术包括浮动（float）、定位（positioning）和弹性盒子（flexbox）。浮动可用于将元素从正常的文档流中移动，并使其他元素环绕它。定位允许您将元素放置在文档中的准确位置，并可以使用属性（如top、left、right和bottom）进行微调。弹性盒子是一种用于创建自适应布局的强大技术。 6.响应式设计：响应式设计是一种使网站能够在不同设备和屏幕尺寸上呈现良好的技术。通过使用CSS媒体查询，可以根据屏幕的宽度和其他特性来应用不同的样式。这样，可以为不同设备提供优化的布局和样式。 7.动画和过渡：CSS提供了一些属性和方法来创建动画效果和过渡效果。例如，可以使用@keyframes规则和animation属性来定义关键帧动画，从而实现元素的逐帧动画效果。过渡效果可以使用transition属性来定义，通过设置过渡的属性、持续时间和时间函数，可以实现元素在状态改变时平滑过渡的效果。 8.响应式图像：在响应式设计中，图像也需要根据不同设备的屏幕尺寸进行适应。CSS提供了一些技术来实现响应式图像，如设置max-width属性为100%以确保图像在其容器内自适应大小。此外，可以使用srcset属性指定不同大小的图像，浏览器会根据需要选择最适合的图像。 9.字体样式：CSS允许自定义文本的字体样式。可以使用font-family属性指定字体的名称，如果用户计算机上不存在指定的字体，可以通过font-family属性设置一个备用字体。还可以使用font-size属性设置字体大小，font-weight属性设置字体粗细，font-style属性设置字体样式（如斜体）等。 10.CSS预处理器：CSS预处理器是一种将CSS代码进行扩展和增强的工具，常见的预处理器包括Sass和Less。它们引入了变量、嵌套规则、函数、混合等高级特性，使CSS代码更加模块化和可维护。

总结：CSS是一种强大的样式表语言，用于控制HTML元素的外观和布局。了解CSS的基础概念和核心知识对于构建现代网页和实现各种样式效果至关重要。通过选择器、属性和值，可以选择元素并定义样式。同时，掌握盒模型、布局和定位技术、样式优先级以及响应式设计和动画等方面的知识，可以创建出精美而灵活的页面。此外，了解字体样式和响应式图像等技术，可以进一步增强网页的视觉效果和用户体验。最后，探索CSS预处理器可以提高CSS代码的可维护性和灵活性。

并集选择器

| - | ------------------------- |
| | | | | | | | | | | | | | | | | | | | .p1,p,span{ | | | color: pink; | | | } | | | span{ | | | font-size: 40px; | | | } | | | | | | | | | | | | | | |

交集选择器

| | |

段落

| | |

段落

盒子模型

| - | ---------------------- | | | | | | | | | | | | | | | | | | | | | div{ | | | background-color: red; | | | } | | | .p1{ | | | width: 1cm; | | | height: 1cm; | | | } | | | .p2{ | | | width: 1mm; | | | height: 1mm; | | | } | | | .p3{ | | | width: 1px; | | | height: 1px; | | | } | | | .p4{ | | | width: 10vw; | | | height: 10vh; | | | } | | | | | | | | | | | | | | |

| | |

| | | | | |

[ 理解css | 青训营笔记 ]

交集选择器