CSS基础一（三种引入规则以及常用选择器和文本基础属性）

本文链接：https://blog.csdn.net/mandarin_blog/article/details/131867591

本文详细介绍了CSS的基础知识，包括三种样式引入规则：内联样式、内部样式和外部样式，以及样式的优先级。此外，还探讨了基本选择器，如元素选择器、id选择器、类选择器、通用选择器和分组选择器，并介绍了CSS的三大机制：特殊性、继承性和层叠。最后，讲解了文本相关的样式，如文本颜色、对齐、垂直对齐、装饰和缩进等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.CSS概述

CSS ( Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

通过使用 CSS 我们可以大大提升网页开发的工作效率。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

CSS 指层叠样式表 (Cascading Style Sheets)；

样式定义如何显示 HTML 元素；

样式通常存储在样式表中；

把样式添加到 HTML 中，是为了解决内容与表现分离的问题；

外部样式表可以极大提高工作效率；

外部样式表通常存储在 CSS 文件中；

多个样式定义可层叠为一个；

二.CSS引入规则

1.CSS语法

CSS 规则由两个主要的部分构成：选择器[核心]，以及一条或多条声明[规则]：

在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素(我们可以通过各种选择器灵性的选择页面的各种元素)。

每条样式声明由一个属性[样式属性】和一个值[样式值]组成。

属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明总以大括号({})括起来。

为了让CSS可读性更强，你可以每行只描述一个属性

2.三种CSS样式引入规则

插入样式表的方法有三种：

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

1.内联样式又叫行内样式

行内样式引入规则：样式写在标签的style属性中行内样式的语法规则:

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>

2.内部样式又叫内嵌式

内嵌样式引入规则：样式放在head或body标签的style标签中:

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

内嵌样式的语法规则:

<head>
  <style type="text/css">
   选择器{
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
       ....
    }
   </style>
</head>

语法中，内嵌式一般写在<head>里面<title>下面。

3.外部样式又叫外链式

外部样式引入规则：一个单独的样式文件存放我们的样式。

后缀名是.css 每个外链式样式表都由link引入html文件中。link标签写在文档的头部<head>里面，<title>下面。

外链式的语法规则：

<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

该语法中， <link> 标记需要放在 <head> 头部标记中，并且必须指定 <link/> 标记的三个属性。如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。

4.样式引入优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况如下：

行内式>内嵌式=外链式外链式放在内嵌式后面，外部样式会覆盖内部样式。

内部样式和外部样式都是通过选择器来选择元素的，所以他们的优先级和文件顺序、选择器优先级有关；

3.CSS注释

CSS注释以 /* 开始, 以 */ 结束。快捷键 Ctrl键+/

/*这是个注释*/
p{
   text-align:center;
   /*这是另一个注释*/
   color:black;
   font-family:arial;
}

三.基本选择器

1.元素选择器

元素选择器根据元素名称来选择 HTML 元素。

p {
   text-align: center;
   color: red;
}

2.id选择器

id 选择器根据元素的 id 属性来选择特定的 HTML 元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id 。

示例如下：

#striking {
text-align: center;
color: red;
}

3.类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

.center {
    text-align: center;
    color: red;
}

html 元素也可以引用多个类、

<p class="center large">这个段落引用两个类。</p>

4.通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
text-align: center;
color: blue;
}

5.分组选择器

分组选择器选取所有具有相同样式定义的 html元素。

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
/* 多个选择器具有同样的属性的话，就可以把选择器写在一起*/
/* 中间逗号(，)隔开
h1,h2,p{
   text-align: center;
   color: red; 
}

4.组合选择器

CSS 组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)

子元素选择器(以大于号 > 分隔）

相邻兄弟选择器（以加号 + 分隔）

普通兄弟选择器（以波浪号～分隔）

1.后代选择器

后代选择器用于选取某元素的后代元素。后面的子元素的子元素也可以被选中。 div里面的所有p元素都可以被选中。

div p {
background-color: yellow;
}

2.子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。div的子集p元素的样式

div > p {
background-color: red;
}

3.相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。div后面相邻着的p元素的样式。

div + p {
background-color: green;
}

4.后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。div后面所有的p标签的样式

div ~ p {
background-color: orange;
}

5.属性选择器

我们可以设置带有特定属性或属性值的HTML元素的样式。

1.[attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

a [target] {
background-color: yellow;
}

2.[attribute=“value”] 选择器

[attribute=“value”] 选择器用于选取带有指定属性和值的元素。

a [target="_blank"] {
background-color: red;
}

3.设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

input[name="nickname"] {
width: 150px;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 48px;
display: block;
}

四。CSS三大机制（!）

1.css样式来源

CSS中的样式一共有三种来源：创作人员、读者和用户代理。

首先，创作人员（author’s+style）样式应该是我们最熟悉的，如果你是一个前端开发者，那么你写的那些样式就叫做创作人员样式。

然后是用户代理样式，用户代理也就是我们通常所说的浏览器（IE、Firefox等等），这些浏览器会提供一些默认的样式，比如IE浏览器中，一个纯粹由html代码构成的网页里，我们会发现超链接会带有一个蓝色的前景色，这其实就用户代理样式，借用一些插件我们可以方便的查看这些默认样式（比如Firefox中的Web+developer）

最后，也是最容易被我们忽略的，读者样式。所谓读者自然就是浏览网页的用户，有些时候这些用户里可能会有人不满意网页的配色，或者字体大小，这时候他们就是通过浏览器提供的接口为网站添加读者样式。

介绍完了来源，我们来说一下如何按权重和来源排序，根据《CSS权威指南》（第三版P79）中总结的权重排序：

创作人员的样式 > 读者人员的样式 > 用户代理的默认样式
标记为重要声明（!important）的读者样式 > 一切样式

有的朋友可能一开始不太明白第二条的意思，实际上这是CSS提供的一个很好的选择机制，也就是说，通常情况下，创作人员样式

会拥有最大的权重，这也是作为开发人员最想要看到的，但是用户拥有最终的选择权，可以通过!important覆盖到任何想要覆盖

的样式。

2.css三大机制

CSS的三大机制是：特殊性[冲突]、继承、层叠。

1.特殊性

所谓的特殊性，其实是CSS样式一种计算声明权重的规则。特殊性是由规则的选择器确定的，然后用户代理会将计算出来的特殊性附加给相应的每一个声明上。

权重计算规则:

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值。

越精准权重就越高：(!)

!important>行内式>id>类选择器>标签选择器>通用选择器>继承

优先级叠加计算公式(!)

第一级：行内样式的个数

第二级：id选择器的个数

第三级：类选择器的个数

第四级：标签选择器的个数

先比较第一级的个数，若相等，则比较下一级的选择器的个数，谁的个数多，谁权重高

然后依次比较下一级的选择器的个数

重要性！important:(放在谁上面谁的权重最高，放在继承上面没用）

有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。

P {
color ; red !important;
background: yellow
}

2.继承性

CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。

上面提到了一个后代的概念，指的是文档元素之间的一种关系。HTML文档的元素是具有层次结构的，html元素为根元素，其余的元素均是挂载在其上。这些元素可以以一种树形的结构表示出来，元素的直接上级为父，直接下级为子，同父级的元素为兄弟元素，元素a若可以通过若干个元素（包括这个元素本身）的父元素联系到另一元素b，则元素a为元素b的后代，相对的元素b为元素a的祖先。

继承的机制需要注意的点

并不是所有的属性都可以继承，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。大多继承的时文字属性。

3.层叠

样式的呈现只有一种效果，而仅仅通过特殊性来决定权重并不能完全解决冲突。想象一下，如果两条作用于同一元素的声明，它的特殊性相同，也就是它们的权重相同时，浏览器应该用哪一条声明呢？这个就与CSS的层叠机制有关了。文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠;

意思就是后面的样式会重叠覆盖掉前面的样式。

五。文本

1.文本颜色

文本颜色有三种表达方式

英文颜色名称

目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色黄色。

优点：方便快捷而且特定颜色比较准确。

缺点：表示颜色数量有限，不支持透明度的表示。

十六进制方式

颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

优点：表示颜色种类多，使用较方便。

缺点：不支持透明颜色。

RGB方式:三原色配色方式

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256x 256 x 256)。

优点：表示颜色种类多，使用较方便

缺点：不支持透明颜色。

每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到100%）。

color 属性用于设置文本的颜色。颜色由以下值指定：

1.颜色名 - 比如 red

2.十六进制值 - 比如 #ff0000

3.RGB 值 - 比如 rgb(255, 0, 0)

h1 {
color: green;
}
p{
    color:#fff
}
span{
    color:rgb(200,32,25)
}

2.文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。（默认文本左对齐）

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

显示效果如下:

在这里插入图片描述

当 text-align 属性设置为 justify 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

p {
text-align: justify;
}

3.垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

vertical-align常用属性值

baseline：默认值，元素放置在父元素的基线上。
top：把元素的顶端与行中最高元素的顶端对齐；
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。

在这里插入图片描述

  <img src="./images/01.jpg" alt="哆啦A梦">
    全国生态环境保护大会

/*垂直居中 :vertical-align  取值middle 在照片上面直接写属性与属性值即可*/
   img{
        vertical-align: middle;
    }

显示效果如下：
在这里插入图片描述

4.文本装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}

显示效果如下：

在这里插入图片描述

也可以用于删除超链接默认的样式

a {
text-decoration: none;
}

5.文本缩进

text-indent 属性用于指定文本第一行的缩进。一般为开头空两格。

p {
text-indent: 2em;
}

显示效果如下：

在这里插入图片描述

6.字符间距

letter-spacing 属性用于指定文本中字符之间的间距。

h2 {
letter-spacing: 12px;
}

显示效果如下：

在这里插入图片描述

7.文本阴影

text-shadow 属性为文本添加阴影。

四个值分别代表：横向阴影长度纵向阴影长度模糊度阴影颜色。

 h2{
    text-shadow: 5px 5px 1px #ccc;
   }

显示效果如下：
在这里插入图片描述