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.rhkb.cn/news/315249.html

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

相关文章

制作自己的YOLOv8数据集

制作自己的YOLO8数据集 前言 该数据集的格式参照于coco数据集结构✨ 步骤一&#xff1a;收集图像数据 从互联网上下载公开的数据集&#xff0c;也可以使用摄像头或其他设备自行采集图像&#xff0c;确保你的图像数据覆盖了你感兴趣的目标和场景 步骤二&#xff1a;安装Labe…

正点原子[第二期]ARM(I.MX6U)裸机篇学习笔记-1.2

前言&#xff1a; 本文是来自哔哩哔哩网站上视频“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”的学习笔记&#xff0c;在这里会记录下正点原子Linux ARM MX6ULL 开发板根据配套的哔哩哔哩学习视频所作的实验和笔记内容。本文大量的引用了正点原子哔哔哩网…

[论文笔记] EcomGPT:COT扩充数据的电商大模型

社区供稿 | EcomGPT:基于任务链数据的电商大模型(附魔搭推理实践) - 知乎 https://arxiv.org/pdf/2312.15696.pdf EcomInstruct指令数据集构建 数据集组成 COT方式构造垂域训练数据:把原本的垂域任务分解成了原子任务,构造了基于解决原子任务的数据。这样能用类似…

网页模版如何用

现在的网页模版已经得到了许多人的喜爱和使用。随着人们对互联网的需求不断增加&#xff0c;更多的公司和组织需要拥有自己的网站&#xff0c;以推广他们的品牌和服务。而网页模版为他们提供了一个简单而高效的方法来创建自己的网站。 网页模版是预先设计好的网站模板&#xff…

人工智能技术在教育中的潜力有多大

原文&#xff1a;人工智能技术在教育中的潜力有多大&#xff1f; - 知乎 作者&#xff1a;大全Prompt 链接&#xff1a;https://www.zhihu.com/question/637034129/answer/3346272227 来源&#xff1a;知乎 谢邀&#xff1a;在技术快速发展的今天&#xff0c;人工智能&#x…

炒股自动化:券商官方,散户可用,查询订单状态API如何用?

券商官方的接口&#xff0c;个人账户可申请&#xff0c;入金门槛低&#xff0c;接入文档完善&#xff0c;技术支持好的&#xff0c;经过我们筛选后&#xff0c;只有一家符合 会编程&#xff0c;有基础&#xff0c;只是需要API接口的朋友不用看这些&#xff0c;不会写程序的朋友…

【vue2】实现微信截图(复制图片)在项目内可粘贴

需求 后台管理在上传图片地方需要将复制的图片粘贴上传 一、添加事件 在原有上传组件的基础上添加 paste事件 二、方法 onPaste(e) {const items (e.clipboardData || window.clipboardData).items;let blob null;for (let i 0; i < items.length; i) {if (items[i].ty…

设计模式:单例、原型和生成器

在这篇文章中&#xff0c;我们将重点介绍其余的创建模式&#xff1a;Singleton&#xff0c;Builder和Prototype。 在我看来&#xff0c;这些模式不如工厂重要。然而&#xff0c;了解它们仍然很有用。我将提供UML描述&#xff0c;简单的java示例&#xff08;这样即使你不了解jav…

[linux网络编程]UDP协议和TCP协议的使用

目录 看以下内容前&#xff0c;你要先了解main函数带参数有什么用、 了解socket的相关函数接口 如果不了解socket的相关函数接口请先看我这篇文章 main函数带参数有什么用 UDP udp_server 1.生成socket文件描述符 2.填充sockaddr_in信息 3.bind 4.发&#xff08;收&…

渗透之sql注入练气篇

sql注入产生的原因&#xff1a; 由于程序过滤不严谨&#xff0c;导致用户有一些异常输入&#xff0c;最终触发数据库的查询。所以会出现sql注入这个问题。有些恶意的人就会利用这些信息导致数据库泄露。 注意&#xff1a;一般我们存在注入点我们会查询管理员的账号和密码&#…

如何30天快速掌握键盘盲打

失业后在家备考公务员&#xff0c;发现了自己不正确的打字方式&#xff0c;决定每天抽出一点时间练习打字。在抖音上看到一些高手的飞速盲打键盘后&#xff0c;觉得使用正确的指法打字是很必要的。 练习打字&#xff0c;掌握正确的键盘指法十分关键。 练习打字的第一步是找到…

ElasticSearch批处理

在刚才的新增当中&#xff0c;我们是一次新增一条数据。那么如果你将来的数据库里有数千上万的数据&#xff0c;你一次新增一个&#xff0c;那得多麻烦。所以我们还要学习一下批量导入功能。 也就是说批量的把数据库的数据写入索引库。那这里的需求是&#xff0c;首先利用mybat…

C++中布隆过滤器

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

【单链表专题】

单链表专题 1.引入2.链表2.1链表的关系2.2链表的结构 3.代码实现链表 1.引入 对于顺序表而言 中间/头部的插⼊删除&#xff0c;时间复杂度为O(N)增容需要申请新空间&#xff0c;拷⻉数据&#xff0c;释放旧空间。会有不小的消耗。增容⼀般是呈2倍的增⻓&#xff0c;势必会有⼀…

Github进行fork后如何与原仓库同步[解决git clone 太慢的问题]

前言 fork了一个仓库以后怎么同步源仓库的代码&#xff1f; 先说一下git clone太慢的问题&#xff0c;可以通过代理拉取代码&#xff0c;具体请看&#xff1a; https://gitclone.com/ 步骤 1、执行命令 git remote -v 查看你的远程仓库的路径。 以一个实际例子说明&#x…

[Spring Cloud] (4)搭建Vue2与网关、微服务通信并配置跨域

文章目录 前言gatway网关跨域配置取消微服务跨域配置 创建vue2项目准备一个原始vue2项目安装vue-router创建路由vue.config.js配置修改App.vue修改 添加接口访问安装axios创建request.js创建index.js创建InfoApi.js main.jssecurityUtils.js 前端登录界面登录消息提示框 最终效…

微信小程序使用echarts组件实现饼状统计图功能

微信小程序使用echarts组件实现饼状统计图功能 使用echarts实现在微信小程序中统计图的功能&#xff0c;具体的实现步骤思路可进我主页查看我的另一篇博文https://blog.csdn.net/weixin_45465881/article/details/138171153进行查看&#xff0c;本篇文章主要使用echarts组件实…

SpringBoot的自动装配原理

SpringBoot自动装配原理 SpringBoot的启动类上有一个注解&#xff1a;SpringBootApplication 。该注解是三个注解的复合注解。 1.SpringBootConfiguration 注解 点进SpringBootConfiguration 注解&#xff0c;可以发现其核心注解为Configuration注解&#xff1a; Configuration…

python文件 成绩分析

‘’文件score.txt中存储了学生的考试信息,内容如下 小明,98 小刚,90 小红,91 小王,98 小刘,80 请写代码,读取文件数据,并进行如下分析 最高分和最低分分别是多少&#xff1f;得最高分的学生有几个&#xff1f; 得最低分的学生有几个平均分是多少&#xff1f; ‘’’ def rea…

Web3技术解析:区块链在去中心化应用中的角色

引言 在过去几年中&#xff0c;Web3技术已经成为了互联网领域的一个热门话题。作为区块链技术的延伸&#xff0c;Web3不仅仅是数字货币的代名词&#xff0c;更是一个能够为各种应用提供去中心化解决方案的强大工具。本文将深入探讨区块链在Web3去中心化应用中的关键角色&#…