span标签和css选择器

JavaWeb入门

Span标签

标签是 HTML 中用于对文本进行部分样式设置或添加特定属性的内联元素。
以下是 标签的一些特点和用途：

样式设置：可以使用 CSS 为 标签包裹的文本单独应用样式，比如更改颜色、字体大小、背景等。

示例：

   <p>这是一段普通的文本，<span style="color:red;">这里是红色的文本</span> 继续普通文本。</p>

逻辑分组：方便对文本的特定部分进行分组，以便通过 JavaScript 等脚本进行操作。

语义区分：虽然它本身没有特定的语义，但在某些情况下可以帮助区分文档中的不同文本片段。

总之， 标签在 HTML 中是一个非常灵活和有用的元素，用于对文本的小部分进行有针对性的样式和操作处理。

Css的引用方式

行内，内嵌（style标签），外联（css样式表）

1.行内

such as: < h1 style = " ">

2.内嵌

<style> 
H1{
}

</style>

3.外联

从本地文件夹中的style.css中引入样式表

  <link rel="stylesheet" href="style.css">

CSS的三种选择器

元素选择器

h1{
	color ：rgb(0,0,0);
}

ID选择器

#hid{
 color : red;
}

<h1 id = "hid"> 西南交通大学不放假 </h1>

类选择器

.cls{
	color:red;
}

<h1 class="cls"> CSS class Selector </h1>

CSS的选择器优先级

!important 规则具有最高优先级。它会强制覆盖其他任何声明，除非有另一个带有 !important 规则的更具体的选择器。例如：

p {
  color: red!important;
}

内联样式，直接写在 HTML 元素的 style 属性中的样式优先级次之。例如：

<p style="color: blue;">这是一段文本</p>

接下来是选择器的优先级：
ID 选择器（#id）的优先级高于类选择器（.class）、属性选择器（[attribute]）和伪类选择器（:hover 等）。

比如：

    #myDiv {
      color: green;
    }
  .myClass {
      color: orange;
    }

在上述例子中，#myDiv 中的样式会生效。
类选择器、属性选择器和伪类选择器的优先级高于元素选择器（div 等）和伪元素选择器（::before 等）。
例如：

    div {
      color: black;
    }
  .mySpecialDiv {
      color: purple;
    }

此时，应用 .mySpecialDiv 中的样式。
需要注意的是，如果多个选择器具有相同的优先级，那么后面出现的样式声明会覆盖前面的。