CSS详解(一)

1、css工作中使用场景

 美化网页(文字样式、背景样式、边框样式、盒子模型、定位、动画、),布局页面(flex布局、响应式布局、媒体查询)


2、CSS 规则

通常由两个主要部分组成选择器和样式声明 

2.1选择器

选择器指定了哪些 HTML 元素将被应用样式。它可以是元素的名称、类名、ID、属性等,用于定位文档中的特定元素。

 2.2样式声明

样式声明定义了选择器选中的元素应该如何显示。它包含在花括号 {} 中,每个声明都由属性和值组成,以键值对的形式表示。属性冒号分隔值,每个声明以分号结束。

p {/* 样式声明 */color: blue; /* 属性: 值 */font-size: 16px; /* 属性: 值 */
}
在这个例子中,选择器是 p,样式声明包括 color: blue; 和 font-size: 16px;

3、选择器的作用

指定要应用样式的 HTML 元素。通过选择器,你可以精确地选择文档中的特定元素,并为其定义样式,从而实现对网页外观和布局的控制。

3.1定位元素: 选择器允许你准确地定位到 HTML 文档中的特定元素,无论其是嵌套在其他元素中还是作为根元素。

3.2应用样式: 通过选择器,你可以为选定的元素或一组元素定义样式规则,包括颜色、字体、边框、背景等。

3.3层叠样式: CSS 选择器允许你定义多个样式规则,这些规则可以根据选择器的优先级和特定的层叠规则来应用于元素,从而形成最终的样式。

3.4响应式设计: 使用选择器,你可以根据不同的屏幕尺寸或设备类型应用不同的样式,从而实现响应式设计,使网页在各种设备上呈现良好的外观和用户体验。

3.5增强交互性: 选择器还可以与 JavaScript 结合使用,通过添加或删除特定的 CSS 类来实现交互效果,例如悬停、点击、展开/折叠等。

4、css选择器

4.1 标签选择器

选择指定类型的 HTML 元素。例如,p 选择所有 <p> 元素。

4.1.1标签选择器的优点

4.1.1.1简单易用: 标签选择器非常简单明了,只需指定要修改的 HTML 标签即可,无需添加额外的标识符。

4.1.1.2全局生效: 修改样式的效果会在整个文档中生效,适用于需要一致样式的情况,比如全站样式。

4.1.1.3适用性广泛: 标签选择器可以应用于任何页面,而不需要考虑特定的上下文或结构。

4.1.2标签选择器的缺点

4.1.2.1缺乏精确性: 标签选择器会影响到所有匹配的标签,可能会导致意外的样式覆盖或冲突,特别是在大型项目中。

4.1.2.2无法定位特定元素: 无法选择文档中的特定或唯一元素,因为标签选择器会匹配所有相同的 HTML 标签。

4.1.2.3难以维护: 当需要修改样式时,由于样式规则作用范围广泛,可能需要更多的时间和工作来确保修改不会影响到其他部分的布局和外观。

4.1.2.4不灵活: 不能针对特定上下文或状态应用样式,如悬停或焦点状态,因为标签选择器只能选择标签本身,无法选择标签的状态或上下文。

4.2 类选择器

选择具有指定类的 HTML 元素。类选择器以点号 . 开头,后面跟类名。例如,.my-class 选择所有具有 class="my-class" 的元素。

4.3 id选择器

选择具有指定 ID 的 HTML 元素。ID 选择器以井号 # 开头,后面跟 ID 名称。例如,#my-id 选择具有 id="my-id" 的元素。

  /* 选择 ID 为 "header" 的元素,并将它们的字体加粗 */
#header {font-weight: bold;
}

ID 选择器具有唯一性,每个 HTML 元素的 ID 属性在文档中应该是唯一的,因此不能像类选择器一样多次多个使用。 

错误写法!

<div id="demo demo2">大盒子</div>
#demo {width: 100px;height: 100px;background-color: red;}#demo2 {width: 100px;height: 100px;background-color: blue;}

 只能这样哈!!!

<div class="demo demo2">大盒子</div>

4.4 通配符选择器

选择所有 HTML 元素。通配符选择器使用星号 * 表示。例如,* 选择所有元素。

不建议大量使用。

/* 选择所有元素,并将它们的边框样式设为实线 */
* {border-style: solid;
}

 4.5 属性选择器

根据元素的属性值来选择元素。例如,[href] 选择具有 href 属性的所有元素,[title="example"] 选择 title 属性值为 "example" 的所有元素。

/* 选择所有带有 title 属性的元素,并将它们的颜色设为蓝色 */
[title] {color: blue;
}/* 选择所有带有 href 属性值以 "https://" 开头的链接,并将它们的颜色设为绿色 */
[href^="https://"] {color: green;
}

4.6 后代选择器

选择某个元素的后代元素。选择器之间使用空格隔开。例如,div p 选择 <div> 元素内的所有 <p> 元素。

  /* 选择所有 <div> 元素内部的 <p> 元素,并将它们的文字颜色设为灰色 */
div p {color: gray;
}

4.7 子元素选择器

选择某个元素的直接子元素。子元素选择器使用 > 符号。例如,ul > li 选择 <ul> 元素下直接的 <li> 子元素。

  /* 选择 <ul> 元素下的直接子元素 <li>,并将它们的列表样式设为圆点 */
ul > li {list-style-type: disc;
}

4.8 相邻兄弟选择器

选择紧接在另一个元素后面的元素。相邻兄弟选择器使用 + 符号。例如,h2 + p 选择紧跟在 <h2> 元素后面的 <p> 元素。
 

  /* 选择紧跟在 <h2> 元素后面的 <p> 元素,并将它们的文字颜色设为橙色 */
h2 + p {color: orange;
}

4.9 兄弟选择器

选择与某个元素相邻的所有兄弟元素。兄弟选择器使用 ~ 符号。例如,h2 ~ p 选择所有与 <h2> 元素相邻的 <p> 元素。
 

 /* 选择所有紧跟在 <h2> 元素后面的 <p> 元素,并将它们的文字颜色设为紫色 */
h2 ~ p {color: purple;
}

4.10 伪类选择器

用于选择处于特定状态的元素。伪类选择器以冒号 : 开头,后面跟伪类名称。

  1. :link:未访问链接的样式。
  2. :visited:已访问链接的样式。
  3. :hover:鼠标悬停在链接上时的样式。
  4. :active:链接被激活(例如鼠标点击但尚未释放)时的样式。
  <ul><li><a href="https://example.com">未访问链接</a></li><li><a href="https://example.com/visited">已访问链接</a></li><li><a href="https://example.com/hover">鼠标悬停链接</a></li><li><a href="https://example.com/active">被激活链接</a></li></ul>/* 未访问链接的样式 */a:link {color: blue;text-decoration: none; /* 移除下划线 */}/* 已访问链接的样式 */a:visited {color: purple;}/* 鼠标悬停在链接上时的样式 */a:hover {color: red;text-decoration: underline; /* 添加下划线 */}/* 链接被激活时的样式 */a:active {color: green;}

 

绿色是我点下那一瞬间展现的

4.11 伪元素选择器

用于选择元素的特定部分。伪元素选择器以冒号 :: 开头,后面跟伪元素名称。

::first-letter:选择元素的第一个字母,并可以为其应用样式,常用于美化文字段落的首字母。

::first-line:选择元素的第一行,并可以为其应用样式,常用于美化段落的首行。

::before:在选定元素的内容前插入内容,通常用于添加装饰性的内容或图标。

::after:在选定元素的内容后插入内容,同样通常用于添加装饰性的内容或图标。

  /* 在每个 <h1> 元素前面插入一个红色的小圆点 */
h1::before {content: "•";color: red;
}

4.12 并集选择器

用于同时选择多个元素并将它们的样式合并在一起。它的语法是通过在选择器之间使用逗号隔开。

 /* 选择所有段落和所有标题元素,并将它们的文本颜色设置为红色 */
p, h1, h2, h3 {color: red;
}/* 选择所有具有类名为 "highlight" 的元素和所有段落元素,并将它们的背景颜色设置为黄色 */
.highlight, p {background-color: yellow;
}

4.13交集选择器 

用于同时选择匹配多个条件的元素。它是由两个或多个选择器组合而成的,只有同时满足所有选择器条件的元素才会被选中。

交集选择器使用两个选择器,它们之间没有空格或其他字符分隔。

5、font-family字体

注意点:

1.英文字体不需要加引号,中文需要加引号。

2.如果英文字体之间有空格 -- 也需要加引号。

3.设置多个字体时候,一定要把英文字体放在前,中文放在最后。

font-family: Arial, Helvetica, sans-serif, "Microsoft YaHei", "微软雅黑", "PingFang SC", "苹方", "Hiragino Sans GB", "STHeiti", "华文细黑", sans-serif;

6、font-size

font-size 属性用于设置文本的大小。常见的单位包括像素(px)、百分比(%)、em、rem 等,其中像素(px)是最常用的单位。

在谷歌浏览器中,默认的字体大小是 16px。这意味着如果你没有明确设置文本的 font-size,那么浏览器会使用 16px 作为默认字体大小。

font-size: 16px;

7、font-style

font-style 属性用于设置字体的风格

  • normal:正常的字体风格,即不倾斜。
  • italic:斜体字体风格,字体会倾斜显示。

css部分

.font-normal {font-style: normal;
}.font-italic {font-style: italic;
}

html部分

<p class="font-normal">这是正常的字体。</p>
<p class="font-italic">这是斜体的字体。</p>

8、font-weight 

font-weight 属性用于设置文本的粗细程度

  • normal:定义标准的字符权重。通常对应于字体的普通粗细。
  • bold:定义粗体字符权重。通常对应于字体的加粗粗细。
  • 数字:可选值范围从 100 到 900 之间,以 100 为间隔。但并非所有字体都提供了九种粗细,因此有些数值指定后可能看不出明显的变化。

常用值:

  • 400:等同于 normal,定义正常字体。
  • 700:等同于 bold,定义加粗字体。

9、font复合写法 

font 复合属性是 CSS 中用来设置字体样式的简写属性,它可以一次性设置字体的多个属性,包括字体样式、字体粗细、字体大小、行高和字体系列等。虽然它在某些情况下能够提供简洁的写法,但在实际开发中使用频率相对较低。

注意事项:

9.1属性书写顺序不可颠倒: 在使用 font 复合属性时,需要按照固定的顺序书写属性,即 font-stylefont-weightfont-size/line-heightfont-family。如果颠倒了属性的顺序,可能导致样式不生效或产生意料之外的结果。

9.2不要的属性可以省略: 虽然 font 复合属性可以设置多个属性,但在实际使用时,你可以只包含需要的属性,而省略不需要的属性。但是,为了确保样式的完整性,必须保留字体大小和字体族(即 font-sizefont-family),这是使用 font 属性的最小要求。

10、color颜色 

在 CSS 中,颜色可以使用多种方式表示,包括英文名称、RGB 值和十六进制值。

10.1英文名称:例如:red(红色)、green(绿色)、blue(蓝色)等。这些颜色名称直接指代了常见的颜色。

10.2RGB 值:使用 rgb() 函数表示,其中包含三个参数,分别表示红色、绿色和蓝色的强度,取值范围为 0 到 255。例如:rgb(255, 0, 0) 表示红色,rgb(0, 255, 0) 表示绿色,rgb(0, 0, 255) 表示蓝色。

10.3十六进制值:使用 # 符号表示,后跟六位十六进制数字,每两位代表红、绿、蓝三个颜色通道的强度。例如,红色可以表示为 #ff0000,绿色为 #00ff00,蓝色为 #0000ff。每两位十六进制数的范围是 00 到 ff,对应于十进制的 0 到 255。这种表示方法在实际工作中使用最广泛。

11、text-align 设置盒子里文本的水平对齐方式

在 CSS 中,text-align 属性用于设置文本在其容器盒子中的水平对齐方式。它可以应用于块级元素和表格元素的容器盒子,并影响其中文本的对齐方式。

11.1text-align: left; 文本左对齐。默认情况下,大多数浏览器会将文本设置为左对齐。

11.2text-align: right; 文本右对齐。

11.3text-align: center; 文本居中对齐。

11.4text-align: justify; 文本两端对齐。在这种情况下,浏览器会调整单词和字母的间距,使得每行的文本尽可能填满整个容器宽度。

text-align 只影响文本的水平对齐方式,并不影响其垂直对齐方式。如果需要控制文本的垂直对齐方式,可以使用其他属性,如 vertical-align

12、文本装饰 text-decoration

  • none:取消文本的装饰效果。
  • underline:在文本下方添加下划线。

13、首行缩进text-indent

text-indent 属性用于设置段落(或其他块级元素)第一行的缩进。通常使用的值包括:

  • 像素(px):指定一个固定的像素值作为缩进。
  • 百分比(%):相对于父元素宽度的百分比值作为缩进。
  • em:相对于当前元素的字体大小来设置缩进,1em 等于一个字体的宽度。

 

14、line-height行高 

line-height 属性用于设置行与行之间的距离,也称为行高。它可以接受多种类型的值,包括:​​​

  • 使用无单位的数字:这个数字会乘以当前元素的字体大小来计算行高。
  • 使用相对单位,如 em 或百分比:这些值是相对于当前元素的字体大小来计算行高的。
p {line-height: 1.5; /* 1.5倍当前字体大小作为行高 */
}h1 {line-height: 120%; /* 行高为当前字体大小的120% */
}

15、元素的显示模式

就是标签以什么样的方式进行显示

在 CSS 中,每个 HTML 元素都有一个默认的显示模式,但可以通过 CSS 来改变这个显示模式。

15.1 块元素的特点

15.1.1独占一行: 块级元素会自动开始新的一行,并在上下文中占据其父元素的整个可用宽度,因此一个块级元素独占一行。

15.1.2默认宽度为父元素宽度: 块级元素的宽度默认为其父元素的100%,因此它会充满父元素的宽度。

15.1.3可设置宽度和高度: 块级元素可以通过设置宽度(width)和高度(height)来控制其尺寸。

15.1.4可包含内联元素和其他块级元素: 块级元素可以包含其他块级元素和内联元素。它们可以容纳大多数其他元素,包括内联元素、其他块级元素以及其他一些特殊的元素。

15.1.5可设置内外边距以及边框: 块级元素可以通过设置内外边距(margin)、边框(border)和填充(padding)来调整其与周围元素的间距和外观。

15.1.6默认情况下会换行: 块级元素在默认情况下会自动换行,即它们会排列在垂直方向上,一个接一个地显示。

一些常见的 HTML 块级元素包括 <div><p><h1><h6><ul><ol><li> 等。这些元素通常用于组织页面结构、定义段落、标题、列表等内容。

15.2 行内元素特点

15.2.1不会独占一行: 行内元素不会自动开始新的一行,它们会在同一行内水平排列,直到达到行的末尾才会换行。

15.2.2默认宽度为内容宽度: 行内元素的宽度默认由其内容决定,不会像块级元素一样充满父元素的宽度。如果没有设置宽度,行内元素会尽可能地占据其内容所需的空间。

15.2.3不可设置宽度和高度: 行内元素的宽度和高度通常由其内容决定,不能通过设置 width 和 height 属性来直接控制。

15.2.4不能包含块级元素: 行内元素通常不能包含块级元素,但可以包含其他行内元素。

15.2.5可以设置内外边距和填充: 行内元素可以通过设置内外边距(margin)、边框(border)和填充(padding)来调整其周围的间距和外观,但这些属性对行内元素的影响通常是垂直方向上的,水平方向上的影响有限。

15.2.6常用于包裹文本和内联元素: 行内元素通常用于包裹文本和其他内联元素,如超链接 <a>、强调文本 <em>、加粗文本 <strong> 等。

一些常见的 HTML 行内元素包括 <span><a><em><strong><img><br> 等。这些元素通常用于添加文本样式、创建链接、插入图片等操作。

15.3 行内块特点

15.3.1可以在同一行内水平排列: 类似于行内元素,行内块元素可以在同一行内水平排列,不会自动开始新的一行。

15.3.2可以设置宽度和高度: 与块级元素不同的是,行内块元素可以设置宽度(width)和高度(height),并且会按照设置的宽度和高度进行显示。

15.3.3可以设置内外边距和填充: 行内块元素可以通过设置内外边距(margin)、边框(border)和填充(padding)来调整其周围的间距和外观。

15.3.4可以包含其他行内块元素和行内元素: 行内块元素既可以包含其他行内块元素,也可以包含行内元素,这使得它具有更灵活的布局能力。

15.3.5默认不会独占一行: 类似于行内元素,行内块元素默认不会独占一行,它们会在同一行内水平排列,直到达到行的末尾才会换行。

一些常见的 HTML 行内块元素包括 <span><img>(在没有设置 display 属性时是行内块元素)、<input>(在没有设置 display 属性时是行内块元素)、<button> 等。这些元素通常用于创建按钮、插入图片、容纳内联元素等操作。

15.4 隐藏元素

藏元素是在网页中不显示某个元素,但又不移除它在文档流中所占据的位置。这通常通过 CSS 中的 display 属性实现,将元素的显示模式设置为 none,从而隐藏该元素。

.hidden-element {display: none;
}

.hidden-element 是要隐藏的元素的类名,通过将其 display 属性设置为 none,该元素就会在页面上被隐藏起来,不会显示出来,也不会占据任何空间。

需要注意的是,通过设置 display: none; 隐藏元素后,该元素不会在页面上显示,也不会触发任何与用户交互相关的事件,比如点击事件、鼠标悬停事件等。

隐藏元素的常见应用场景

  1. 响应式设计: 在响应式网页设计中,可能会根据不同的屏幕尺寸或设备类型隐藏或显示特定的元素。

  2. 交互元素控制: 在某些情况下,可能需要通过 JavaScript 控制某些交互元素的显示与隐藏,以实现特定的交互效果。

  3. 无关内容屏蔽: 在某些情况下,可能需要隐藏某些内容以提升用户体验,比如在打印页面时隐藏广告或导航栏。

总之,隐藏元素是一种常见的网页布局和交互设计技术,可以通过设置 display: none; 来实现。

15.5模式转换

转换为 块元素     display:block;

转换为 行内元素     display:inline;

转换为 行内块元素     display:inline-block;

16、 单行文本在盒子中垂直居中

行高 等于  盒子高度。

16.1 使用行高(line-height): 设置行高等于盒子的高度,这样文本就会在垂直方向上居中显示

.container {height: 100px; /* 盒子的高度 */line-height: 100px; /* 行高等于盒子的高度 */
}

16.2使用 Flexbox 布局:将父容器设置为 Flex 容器,并使用 align-items: center; 将子项在垂直方向上居中对齐

.container {display: flex;align-items: center; /* 垂直方向居中对齐 */
}

16.3 使用 Grid 布局:将父容器设置为 Grid 容器,并使用 align-items: center; 将子项在垂直方向上居中对齐。

.container {display: grid;align-items: center; /* 垂直方向居中对齐 */
}

16.4 使用绝对定位:将文本元素设置为绝对定位,并使用 top: 50%; transform: translateY(-50%); 将其垂直居中

.text {position: absolute;top: 50%;transform: translateY(-50%);
}

17、background-color背景颜色

用于指定元素的背景颜色。

.element {background-color: #ff0000; /* 使用十六进制颜色值 */
}

.element 是你要设置背景颜色的元素的类名,#ff0000 是一个代表红色的十六进制颜色值。你可以根据需要将颜色值替换为任何你想要的颜色。

除了使用十六进制颜色值之外,你还可以使用其他颜色表示方式,例如:

  • RGB(红绿蓝)值:background-color: rgb(255, 0, 0);
  • RGBA(带透明度的红绿蓝)值:background-color: rgba(255, 0, 0, 0.5);(最后一个参数表示透明度,取值范围为 0 到 1)
  • 颜色关键词:background-color: red;

在背景颜色属性中使用 CSS 渐变、图像等复杂的背景效果 

.element {background-color: linear-gradient(to right, #ff0000, #00ff00); /* 使用渐变 */
}

 这将创建一个从红色到绿色的水平渐变背景。

18、背景图片background-image

.element {background-image: url('path/to/your/image.jpg'); /* 设置背景图片的路径 */background-size: cover; /* 设置背景图片的尺寸适应元素大小 */background-position: center; /* 设置背景图片在元素中的位置为中心 */background-repeat: no-repeat; /* 禁止背景图片重复 */
}

在这个示例中:

  • .element 是你要设置背景图片的元素的类名或 ID;
  • url('path/to/your/image.jpg') 指定了背景图片的路径。你需要将 'path/to/your/image.jpg' 替换为你自己的图片路径;
  • background-size: cover; 设置背景图片的尺寸,使其覆盖整个元素,并保持宽高比;
  • background-position: center; 将背景图片在元素中的位置设置为中心;
  • background-repeat: no-repeat; 禁止背景图片在元素中重复。

19、background-repeat背景平铺

用于指定背景图像重复方式的属性。它可以控制背景图像在水平和垂直方向上的重复方式,常见的取值有以下几种:

19.1 repeat:默认值,背景图像在水平和垂直方向上重复平铺。

19.2 repeat-x:背景图像在水平方向上重复平铺,垂直方向上不重复。

19.3 repeat-y:背景图像在垂直方向上重复平铺,水平方向上不重复。

19.4 no-repeat:背景图像不重复,只出现一次。

body {background-image: url('background-image.jpg'); /* 设置背景图像的路径 */background-repeat: repeat-x; /* 在水平方向上重复平铺 */
}

这段 CSS 代码会使背景图像在水平方向上重复平铺,而在垂直方向上不重复。

20、背景平铺 

background-position: 水平方向 垂直方向;

其中,水平方向和垂直方向都是方位名词,具体取值如下:

水平方向:left、center、right

垂直方向:top、center、bottom

如果只指定一个值,则另一个值默认为 center。

background-position: center bottom;
背景位置设置在水平方向居中,垂直方向在底部

技巧 -- 先水平后写垂直

20.1 如果只写一个固定值px单位,那么该值一定是x坐标值,另一个值默认是center。

举例来说,如果你设置了背景位置为background-position: 100px;,那么背景图片将水平向右移动100像素,垂直方向则默认居中对齐。

20.2 如果方位名词和固定值混合使用;第一个值是x坐标,第二个是y坐标。

举例来说,如果你设置背景位置为 background-position: 100px 50%;,那么背景图片将水平向右移动100像素,垂直方向则在容器高度的50%位置。

21、背景固定background-attachment:fixed;

用于控制背景图像是否固定在视口中,即在页面滚动时是否固定背景图像的位置。

当设置为 fixed 时,背景图像会相对于视口固定,不会随着页面的滚动而滚动,这意味着即使页面滚动,背景图像的位置也不会改变

body {background-image: url('background.jpg');background-attachment: fixed;
}

这样设置后,页面的背景图像将会固定在视口中,不会随着页面的滚动而移动。

22、背景复合写法 

当在 CSS 中编写背景属性时,可以使用一种称为“背景复合写法”的方法,它允许你将多个背景相关的属性合并到一个声明中,这样可以简化代码并提高可读性。这种写法遵循以下原则:

22.1 可以省略不需要的属性: 如果你只想设置其中几个背景属性,而不需要设置所有属性,你可以只写需要的那些属性,而省略其他属性。

22.2 属性和值之间用空格隔开: 在背景复合写法中,属性和对应的值之间用空格隔开,而不是使用冒号分隔。这样的写法更加简洁清晰。

22.3没有先后顺序问题: 在这种写法中,属性和值的顺序没有严格的要求,你可以根据需要灵活调整属性的顺序。

background: url('background.jpg') #f00 repeat-x top fixed;

这样设置后,背景图片为 background.jpg,背景颜色为红色,背景重复方式为水平平铺,背景位置在顶部,且背景图像固定在视口中。

23、背景透明

background:rgba(0,0,0,0.4); -- 最后一个参数取值范围是0~1之间。

背景半透明,是盒子透明;里面的内容不受影响。

opacity属性:设置元素的不透明级别。 取值范围:0~1之间。

<div>学习满满,正能量</div>.div {width: 200px;height: 200px;/* 下面两行代码:盒子和里面的内容,都看不到了 */background: red;opacity: 0;}.div {width: 200px;height: 200px;/* 下面一句话:盒子虽然看不到了,但里面的内容不受影响 */background: rgba(100, 0, 0, 0); }

24、css三大特性

24.1 层叠性

CSS 样式可以从多个来源(如外部样式表、内部样式表、内联样式以及用户代理样式表)中进行层叠和继承,最终确定元素应用的样式。这种层叠性使得样式可以有序地应用于文档,并且具有优先级规则来确定最终的样式结果。

如果样式发生冲突,后面的样式层叠前面的冲突样式   -- 谁离得body近,谁优先。

<div class="box" style="color: red;">Hello</div>.box {color: blue;
}

 这种情况,内联样式的 color: red; 会覆盖外部样式表中的 color: blue;,因为内联样式的优先级更高。

24.2 继承性

某些样式属性可以从父元素继承到子元素。


<div style="color: green;"><p>Hello</p>
</div>

text- font- line- 这些开头的可以被继承。 color 也可以继承。

<template><div><div class="son">asd</div><ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li></ul></div>
</template><script setup>const getlist = () => {}
getlist();
</script><style>
body {font: 14px/2 '黑体';
}ul li {/* 下面两行:自己有字体大小,自己有行高;最后就参考自己的;字体大小为20px 行高=20px * 3 */font-size: 20px;line-height: 3;
}
</style>

24.3 优先级

当多个样式规则应用于同一个元素时,CSS 通过计算选择器的特殊性来确定哪个样式优先。

  1. 元素选择器:权重值为 0,0,0,1。
  2. 类选择器/伪类选择器:权重值为 0,0,1,0。
  3. ID 选择器:权重值为 0,1,0,0。
  4. 行内样式:权重值为 1,0,0,0。
  5. !important:特殊标志,权重最高。
    <template><div id="header" class="box" style="color: blue;">Hello</div>
    </template><script setup>const getlist = () => {}
    getlist();
    </script><style>
    /* 元素选择器 */
    div {color: red;
    }/* 类选择器 */
    .box {color: green;
    }/* ID 选择器 */
    #header {color: blue;
    }/* 行内样式 */
    p {color: orange !important;
    }
    </style>

    按照权重计算,每个选择器的权重值分别为:0,1,1,1(ID 选择器 + 类选择器 + 行内样式)。因此,最终应用的样式是蓝色,因为 ID 选择器的权重最高。若没有行内样式,颜色将为绿色,因为类选择器的权重大于元素选择器。

类选择器永远大于标签选择器 

下一篇cssCSS详解(二)-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4551.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言-用二分法在一个有序数组中查找某个数字

1.题目描述 有15个数按由大到小顺序放在一个数组中&#xff0c;输入一个数&#xff0c;要求用折半查找法找出该数是数组中第几个元素的值。如果该数不在数组中&#xff0c;则输出“无此数” 二.思路分析 记录数组中左边第一个元素的下标为left&#xff0c;记录数组右边第一个…

Spring AI聊天功能开发

一、引入依赖 继承父版本的springboot依赖&#xff0c;最好是比较新的依赖。 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.2.4</version><relativePat…

【JavaScript】转化为布尔值boolean的几种情况

1 转化为布尔值boolean时为false的6种情况 下面6种值转化为布尔值时为false&#xff0c;其他转化都为true&#xff1a; 1、undefined2、null&#xff08;代表空值&#xff09;3、0&#xff08;数字0布尔值为false&#xff0c;字符串"0"布尔值为true) (数字0转布尔类…

C++笔试强训day10

目录 1.最长回文字符串 2.买卖股票的最好时机(一) 3.过河卒 1.最长回文字符串 链接 一开始没认真看题目&#xff0c;直到提交了好几遍没过还是没去检查题目&#xff0c;一直检查代码逻辑&#xff0c;哎呦&#xff0c;难受了。 我以为是收尾字母相同就行了。 错误代码&…

为什么二维数组初始化第一维数组长度可以为空,第二维不可以为空呢?

注意&#xff0c;数组第二维的长度声明永远不能省略。这是因为C语言中的二维数组元素在c编译程序为其分配的连续存储空间中是按行存放的&#xff0c;即存在完整第一行后存第二行&#xff0c;然后再第三行&#xff0c;以此类推。存放时系统必须知道每一行有多少个元素才能正确计…

一文讲解Android车载系统camera架构 - EVS

Android的camera开发中&#xff0c;使用最多的是camera2 以及现在Google主推的cameraX 架构&#xff0c;而这两个架构主要针对的是手机移动端上camera的流程。 而今天介绍的EVS(Exterior View System)架构是不同于camera2上的手机架构&#xff0c;针对Automotive的版本&#x…

软文伪原创工具有哪些,推荐3款强大的软文伪原创工具

软文作为一种重要的营销和传播手段&#xff0c;受到了越来越多的关注。而随着科技的不断发展&#xff0c;各种软文生产的工具相续出现&#xff0c;如&#xff1a;软文伪原创工具&#xff0c;它能为人们提供便捷、高效的文章生产方式&#xff0c;也及可以节省文章写作的时间与精…

车载系统的 加减串器应用示意

overview 车载系统上使用加减串器来实现camera&#xff0c; led液晶显示屏等 图像数据的远距离传输&#xff0c;将原先在短距离传输视频信号的mipi csi&#xff0c;dsi 等的TX&#xff0c;RX中间&#xff0c;插入加减串器&#xff0c;实现长距离的可靠传输。 示意图如下 往往…

Vue从入门到精通-01-Vue的介绍和vue-cli

MVVM模式 Model&#xff1a;负责数据存储 View&#xff1a;负责页面展示 View Model&#xff1a;负责业务逻辑处理&#xff08;比如Ajax请求等&#xff09;&#xff0c;对数据进行加工后交给视图展示 关于框架 为什么要学习流行框架 1、企业为了提高开发效率&#xff1a;…

图像处理:乘法滤波器(Multiplying Filter)和逆FFT位移

一、乘法滤波器&#xff08;Multiplying Filter&#xff09; 乘法滤波器是一种以像素值为权重的滤波器&#xff0c;它通过将滤波器的权重与图像的像素值相乘&#xff0c;来获得滤波后的像素值。具体地&#xff0c;假设乘法滤波器的权重为h(i,j)&#xff0c;图像的像素值为f(m,…

Cranck-Nicolson隐式方法解线性双曲型方程

Cranck-Nicolson隐式方法解线性双曲型方程 Cranck-Nicolson方法在抛物型方程里面比较常用&#xff0c;双曲型方程例子不多&#xff0c;该方法是二阶精度&#xff0c;无条件稳定&#xff0c;然而&#xff0c;数值震荡比较明显&#xff0c;特别是时间演化比较大以及courant数比较…

网工内推 | 云计算运维,厂商云相关认证优先,股票期权,全勤奖

01 国科科技 招聘岗位&#xff1a;云计算运维 职责描述&#xff1a; 1、负责私有云平台的运维管理工作,包括云平台日常运维、故障处理、扩容、版本升级、优化和维护等。 2、根据业务需求,从技术角度支持及配合各业务系统上云工作。 3、为云上业务系统提供云产品、云服务方面的…

python ERA5 画水汽通量散度图地图:风速风向矢量图、叠加等高线、色彩分级、添加shp文件、添加位置点及备注

动机 有个同事吧&#xff0c;写论文&#xff0c;让我帮忙出个图&#xff0c;就写了个代码&#xff0c;然后我的博客好久没更新了&#xff0c;就顺便贴上来了&#xff01; 很多人感兴趣风速的箭头怎样画&#xff0c;可能这种图使用 NCL 非常容易&#xff0c;很多没用过代码的小…

【idea】idea 中 git 分支多个提交合并一个提交到新的分支

一、方法原理讲解 我们在 dev 分支对不同的代码文件做了多次提交。现在我们想要把这些提交都合并到 test 分支。首先我们要明白四个 git 操作&#xff0c; commit&#xff1a;命令用于将你的代码变更保存到本地代码仓库中&#xff0c;它创建了一个新的提交&#xff08;commit…

idea的插件,反编译整个jar包

idea的插件&#xff0c;反编译整个jar包 1.安装插件1.1找到插件1.2 搜索插件 2.反编译整个jar包2.1 复制jar包到工件目录下&#xff1a;2.2 选中jar包&#xff0c;点出右键 3.不用插件&#xff0c;手动查看某一个java类3.1 选中jar包&#xff0c;点出右键 1.安装插件 1.1找到插…

Linux网络编程---Socket编程

一、网络套接字 一个文件描述符指向一个套接字(该套接字内部由内核借助两个缓冲区实现。) 在通信过程中&#xff0c;套接字一定是成对出现的 套接字通讯原理示意图&#xff1a; 二、预备知识 1. 网络字节序 内存中的多字节数据相对于内存地址有大端和小端之分 小端法&…

同事上班这样摸鱼,我坐边上咋看他都在专心写代码啊

我边上有个同事&#xff0c;我坐他边上&#xff0c;但是每天看着他都眉头紧锁&#xff0c;忙的不亦乐乎&#xff0c;但终于有一天&#xff0c;我发现了他上班摸鱼的秘诀。 我劝你千万不要学会这4招&#xff0c;要不就该不好好上班了。 目录 1 上班看电影&#xff1f; 2 上班…

自建SQL server 服务无法启动,提示评估期已过

问题背景 在服务器内安装的SQL server无法启动&#xff0c;报错提示如下截图&#xff0c;提示错误代码17051&#xff1a; 结合系统日志查看应用程序日志详情提示评估期已过&#xff0c;报错如下 问题原因 出现此报错原因是SQL server 安装时&#xff0c;使用的评估版本&#xf…

网络安全的防护措施有哪些?

1. 安全策略和合规性 2. 物理和网络安全 3. 数据加密 4. 软件和系统更新 5. 访问控制 6. 威胁监测和响应 7. 员工培训和安全意识 8. 备份和灾难恢复 零基础入门学习路线 视频配套资料&国内外网安书籍、文档 网络安全面试题 网络安全的防护措施多种多样&#xff0c…

基于Spring Boot的商务安全邮件收发系统设计与实现

基于Spring Boot的商务安全邮件收发系统设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 已发送效果图&#xff0c;用户可以对已发送信息…