css样式规则大全（css样式有几种类型）_课本解读

本文目录一览：

1、CSS样式就近原则是什么
2、怎么给div+css样式表命名的规则
3、CSS--@规则

CSS样式就近原则是什么

1、CSS样式的就近原则指：当多种样式规则同时作用于同一元素且权重相同时，距离元素更近或定义顺序更靠后的样式具有更高的优先级。核心要点解析：在CSS中，当多个选择器指向同一元素且权重计算结果一致时，浏览器会依据样式定义的“距离”和“顺序”决定最终生效的样式。

2、所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是重点。样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。

3、样式优先级行内样式内部样式外部样式（后两者是就近原则）例如：行内样式和内部样式比较优先级：！DOCTYPE行内样式和内部样式表的优先级！--内部部样式表--p{color： blue；}！--行内样式--我是p段落浏览器运行效果：结论：行内样式优先级高于内部样式表。

怎么给div+css样式表命名的规则

1、DIV+CSS样式表命名不能随意而为，否则以后进行维护时困难很大。如同软件开发中对类名的仔细处理一样，DIV+CSS样式表命名也需要遵循规则。

2、比如主导航就是MainNav，如果还有必要在区分就是MainNav_1，MainNav_2等等。也可以使用类型+变量名称的规则来命名，比如写一个红色字体的class，可以.f_red {}（f是font 字体的缩写）。总之原则是：大小写、_、缩写，大大增强代码的可读性。

3、命名规则主要是要求在同一维度，让同一个团队的成员都能明白的。当然，也有公共命名方式的，例如head，body等等的。例如，我们做一个DIV+CSS，就板块而言，先划分好：头部，通栏，左栏，右栏，内容区，底部等的大区块。然后，采用统一的命名。

CSS--@规则

在CSS中，@规则主要包括@charset、@import、@namespace、嵌套的@规则、@media、@page、@font-face、@keyframes、@supports和@document等。charset用于指定样式表使用的字符编码。其语法为：css @charset UTF-8；import用于导入其他样式表文件的规则。

规则是一个CSS语句，以@符号开头，后跟标识符，并包含至分号或CSS块的内容。以下是一些@规则，由其标识符指定，每种规则具有不同的语法：除了@media、keyframes和@font-face，@supports、@counter-style、@property和@layer等规则已在或即将在Web应用中发挥关键作用。

是CSS的一种选择符，有很多应用场景。最常用的使用场景是用来引用其他的CSS文件，是以@import开始的，例如想在main.css里面应用style.css，那么直接用@import style.css就可以了。此外，还有一种使用场景是媒体选择，它是以@media开始的，表示在不同媒介条件下的样式。

使用 @font-face 引入自定义字体的核心步骤包括定义字体规则、引用字体文件、在HTML元素中应用，并通过备用字体确保兼容性。

font-weight和font-style：若字体有不同粗细或样式（如粗体、斜体），需为每种组合单独定义@font-face规则。font-display：控制字体加载期间的文本显示行为，常用值为swap（先显示系统字体，加载完成后替换）。

CSS 新特性通过容器查询、嵌套、新单位等功能显著提升了开发效率与样式灵活性，为响应式设计和组件化开发提供了强大支持。以下是具体功能解析：容器查询（基于尺寸）允许根据父容器尺寸而非视口尺寸应用样式，语法通过 @container 规则实现。