CSS 教程之 CSS 基础语法

2019-01-112022-12-15Web Site40 minutes read (About 6048 words)

CSS 中的基础语法，包括：CSS 语法规则、CSS 选择器、嵌入 CSS 样式以及 CSS 注释。

CSS 语法规则

CSS 样式由一系列的规则组成，这些规则会被 Web 浏览器解析，然后应用于 HTML 文档相应的元素上。

CSS 样式规则由两个主要的部分构成，分别是：1）选择器，2）一条或多条样式声明，如下图：

其中 >>>

选择器（Selector）：用来指定你想要应用样式于哪些 HTML 元素上，由 HTML 元素的 id、class 属性或元素名本身（p、h1…）以及一些特殊符号构成；
样式声明（Declaration）：是由 property:property_value（样式属性:属性值）构成的对（: 连接），多条样式声明使用 ; 隔开，并且需要使用大括号 {} 将所有样式声明括起来。

为了让 CSS 可读性更强，你可以在定义 CSS 时每一行代码上只放置一个声明：

/* 属性较少时可放一行 */
h1 {
    color: blue;
    font-size: 12px;
}

事实上，学习 CSS，就是学习有哪些选择器，支持设置哪些样式属性以及可以使用什么样的样式值。

需要注意的是，CSS 中的属性和大部分值都是不区分大小写的，但 CSS 中的选择器通常区分大小写！！！

CSS 选择器

上面提到选择器（Selector）用来指定你想要应用样式于哪些 HTML 元素上，它由 HTML 元素的 id、class 属性或元素名本身（p、h1…）以及一些特殊符号构成。

你可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式，与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。

CSS 中提供了多种不同类型的选择器，常用选择器的定义方式如下：

Tag 选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过 具体的标签名称 来匹配文档内所有同名的标签。

示例所示：

1
2
3

p {
    color: red;
}

p 选择器能够匹配 HTML 文档中所有的 <p> 标签。

ID 选择器

ID 选择器用来匹配 HTML 文档中 具有指定 ID 属性值 的标签，ID 选择器的定义需要用到井号 #。

示例所示：

1
2
3

#nav {
    color: red;
}

#nav 选择器能够匹配文档中具有 id="nav" 属性的标签。

ID 属性值不要以数字开头，数字开头的 ID 在某些浏览器中可能不起作用。

Class 选择器

类选择器用来匹配 HTML 文档中所有 具有指定 Class 属性值 的标签，类选择器的定义需要用到一个英文的句号 .

需要注意的是：具有相同 class 属性的标签看作一个标签组，对其操作会应用于所有具有相同 class 属性的标签中。

示例所示：

1
2
3

.black {
    color: black;
}

.black 选择器能够匹配文档中所有具有 class="black" 属性的标签组。

[1] >>> 指定标签中使用 Class 选择器

由于 class 属性不是唯一的，可以应用于不同的标签，因此你还可以在定义类选择器时结合标签选择器进行匹配，如下所示：

1
2
3

p.black {
    color: black;
}

p.black 选择器仅会将其中的样式应用到所有具有 class="black" 属性的 <p> 标签中，对于其它的具有 class="black" 属性的标签则没有影响。

[2] >>> 多类选择器

我们知道，一个 HTML 标签中 class 属性可能不止一个，例如：

1 2	<p class="info selected"></p> <p class="info"></p>

假如我们要为所有 class 属性包含 info 的元素设置粗体；为所有 class 属性包含 selected 的元素设置红色字体；为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景。则可以写成下面这样：

.info {
    font-weight: bold;
}
.selected {
    color: red;
}
.info.selected {
    background: blue;
}

这种由多个 class 属性值所组成的类选择器我们可以称之为 多类选择器，而前面介绍的由单个 class 属性值定义的类选择器可以称为 单类选择器。

注意：多类选择器中，多个 class 属性之间是紧挨着的（.info.selected），不需要使用空格分开（.info .selected）。

通配符选择器

通配符选择器用星号 * 表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。

在实际使用中，我们通常使用通配符选择器来清除 HTML 元素中默认的内外边距，如下所示：

* {
    margin: 0 auto;
    padding: 0;
}

注意：虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素，但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点，频繁的使用会给浏览器带来太多不必要的压力。

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是外层标签写在前面，内标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

其标准语法格式如下（子元素可以是孙子）：

1
2
3

父元素 子元素{
    样式声明
}

你可以组合类选择器，匹配具有指定 Class 属性的父元素后代：

1
2
3

.nav li a {
    color: green;
}

需要注意的是，ul li a 选择器仅会匹配无序列表 <ul> 标签的所有后代 <a> 标签。如下：

1
2
3

ul li a {
    text-decoration: none;
}

子选择器

子选择器与后代选择器类似，不过子选择器只能匹配作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

其标准语法格式如下（大于号隔开）：

1
2
3

父元素 > 子元素{
    样式声明
}

子元素必须是亲儿子，其孙子、重孙之类都不归他管。你也可以叫他亲儿子选择器。

事实上，看到这里你也应该知道，子选择器也可组合 Class 选择器（很灵活），可以匹配具有指定 Class 属性的父元素的亲儿子元素。如下：

1
2
3

.nav > a {
    color: green;
}

相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素（拥有同一个父级元素并且不存在嵌套关系），相邻兄弟选择器的定义需要用到加号 +。

相邻兄弟选择器匹配的是加号后面的元素（只修改该元素样式）！！！如下：

h2 + p {
    color: blue;
    font-size: 18px;
}

上面示例，会匹配到所有 h2 元素后紧邻的 p 元素，并设置其样式。

当然了，相邻兄弟选择器也可组合 Class 选择器（很灵活），可以匹配具有指定 Class 属性元素的紧邻兄弟元素。如下：

h2.task + p {
    color: blue;
    font-size: 18px;
}

你可以认为，相邻兄弟选择器用于匹配并设置某个元素的关系最好（紧邻）的兄弟元素。

通用兄弟选择器

与相邻兄弟选择器非常相似，但却没有那么严格（非关系最好或紧邻）。

也即是说，通用兄弟选择器同样会匹配同一父级元素下的所有兄弟元素，兄弟元素之间无需紧邻，定义需要用到波浪号 ~。

示例如下：

h1 ∼ p {
    color: blue;
    font-size: 18px;
}

匹配的是，和 h1 处于同一层（兄弟关系）的所有 p 元素，并设置 p 元素的样式。

同样的，通用兄弟选择器也可组合 Class 选择器（很灵活）使用，如下：

.task ~ p{
    color: #f0f;
    font-size: 30px;
}

并集选择器

并集择器可以将同样的样式规则应用到多个选择器中，每个选择器之间使用逗号 , 进行分隔。这样可以避免定义重复的样式规则，最大程度地减少 CSS 样式表中的代码。

例如，在 CSS 样式表中，不同的选择器中可能包含同样的样式规则（font-weight: normal），如下所示：

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

为了减少 CSS 样式表中的代码（尤其是不同选择器中具有大量的相同样式时），你可以：

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}

需要注意的时，任何形式的选择器都可以作为并集选择器的一部分 >>>

h1,
p,
.pig li {
color: pink;
}

属性选择器

属性选择器用来匹配 具有特定属性 的元素，定义需要用到中括号 [] 来指定标签属性。

例如，匹配具有 title 属性的 p 元素：

1
2
3

p[title] {
   color: blue;
}

需要注意的时，匹配时只要 p 元素中具有 title 属性就会被匹配到。如果你只想匹配具有特定 title 属性值的 p 元素，你可以：

1
2
3

p[title="test"] {
   color: blue;
}

结合正则表达式用法 >>>

例如，属性选择器中方括号 [] 内的属性信息还支持以下几种写法：

[target=_blank]：选择所有具有 target="_blank" 属性的元素；
[title~=flower]：选择 title 属性包含单词 flower 的所有元素；
[lang|=en]：选择 lang 属性正好是 en 或以 en 为开头的所有元素。

| >>> ========================================= Split Line====================================== <<< |

事实上，CSS 中，还可以根据选择器的类型把选择器分为基础选择器和复合选择器。

复合选择器是由两个或多个基础选择器，通过不同的组合而成的。可以实现更加准确、更高效的匹配目标元素。

例如，常用的复合选择器包括：后代选择器 && 子选择器 && 相邻兄弟选择器 && 通用兄弟选择器 && 并集选择器，以及后面我们将会学到的伪类选择器。

HTML 嵌入 CSS 样式

CSS 样式既可以作为单独的文件（后缀为 .css 类型的文件）引入到 HTML 文档中，也可以直接写在 HTML 文档中。

CSS 可以通过以下四种方式添加到 HTML 中:

内联（行内）样式：使用 HTML 标签的 style 属性定义 CSS 样式；
内部样式表：使用 <style> 元素在 HTML 文档头部 <head> 区域定义 CSS 样式；
链接式（外部样式表）：使用 <link> 标签引入外部 CSS 样式表文件；
导入式（外部样式表）：使用 @import 命令导入外部 CSS 样式表文件。

最好的方式是通过外部样式表的方式，为 HTML 页面引入样式，以实现页面内容与表现形式分离。

内联样式

你可以直接使用 HTML 标签的 style 属性来定义 CSS 样式。

其属性值是一个或多个由分号分隔的 CSS 属性:值 对，例如 style = “color:blue; text-align:center“。

一个修改字体、字体背景、字体颜色、字体大小、文本对齐方式以及 Div 块区使用内联样式的示例：

<h1 style="font-family: verdana; text-align: center;">A Center-aligned Heading</h1>
<p style="background-color: aquamarine;">A paragraph with background-color.</p>
<p style="color:aquamarine;">A paragraph with color.</p>
<p style="font-size: 20px;">A paragraph with 20px font-size.</p>

<div style="background-color:bisque; color:blue; text-align: center;">
    <h2>A Heading</h2>
    <p>A paragraph.</p>
    <strong>Inline elements: strong</strong>
</div>

你可以发现，内联样式虽然编写简单，可以发现存在以下缺陷：

每一个标签要设置样式都需要添加 style 属性；
后期维护成本高，当修改页面时需要逐个打开网站每个页面一一修改；
添加如此多的行内样式，页面体积大，门户网站若釆用这种方式编写，那将浪费服务器带宽和流量。

内部样式表

你可以直接使用嵌入到 HTML 文档头部 <head> 区域的 <style> 元素为当前文档定义 CSS 样式。

内部样式表的特点是该样式只能在此页使用，解决内联样式针对标签多次书写的弊端。

一个修改段落标签样式的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 演示</title>
    <style>
        p{
            text-align: left;  /* 文本左对齐 */
            font-size: 14px;   /* 字体大小 14 像素 */
            line-height: 25px; /* 行高 25 像素 */
            text-indent: 2em;  /* 首行缩进两个文字大小空间 */
            width: 500px;      /* 段落宽度 500 像素 */
            margin: 0 auto;    /* 浏览器下居中 */
        }
    </style>
</head>
<body>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。</p>
</body>
</html>

尽管解决了针对具有相同样式标签的多次设置，但仍然未实现网页结构与样式的分离。这就体现在，当样式需要被应用到很多页面的时候，仍然需要针对每个页面都要修改，不灵活啊。

链接式

你可以直接使用 <link /> 标签在 HTML 文档头部 <head> 区域引入外部的 CSS 样式表文件，也称为外部样式表。这是络上网站应用最多的方式，同时也是最实用、最理想的方式。

链接式将 HTML 页面结构和样式完全分离，实现结构层和表示层的彻底分离，使 HTML 代码专门构建页面结构，而美化工作由 CSS 完成。增强了网页结构的扩展性和 CSS 样式的可维护性。

使用链接式为 HTML 代码应用样式示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 演示</title>
    <link rel="stylesheet" href="css/style1.css" type="text/css">
    <link rel="stylesheet" href="css/style2.css" type="text/css">
</head>
<body>
    <h2>百度渊源</h2>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。</p>
</body>
</html>

其中，HTML 中 <link> 标签专门用来定义文档与外部资源的关系，最常见的用途是链接外部样式表。其 href 属性用于定义链接文档的 URL，rel 属性定义当前文档与被链接文档之间的关系，type 属性用来定义被链接文档的 MIME 类型。

两个外部样式表内容如下 >>>>

style1.css 文件代码：

h2{
    background-color: aqua;
    height: 50px;
    line-height: 50px;
}

style2.css 文件代码：

p{
    text-align: left;  /* 文本左对齐 */
    font-size: 14px;   /* 字体大小 14 像素 */
    line-height: 25px; /* 行高 25 像素 */
    text-indent: 2em;  /* 首行缩进两个文字大小空间 */
}

通常，网站制作者会将公共部分样式放入一个 CSS 文件，当前页面样式编写新的样式文件。

链接式导入 CSS 样式的好处：

CSS 文件可以应用于不同的 HTML 文件中，使网站所有页面样式统一；
将 CSS 代码放入一个 CSS 文件中便于管理、减少代码以及维护时间；
修改 CSS 文件时，所有应用此 CSS 文件的 HTML 文件都将更新，而不必从服务器上将所有的页面取回再修改完毕后上传。

导入式

你也可以直接使用 @import 命令导入外部 CSS 样式表文件，它是 CSS2.1 新引入的一张导入方式，一些低版本浏览器可能不支持。

这里简单了解一下就行，更多使用的链接式的导入方式。

导入样式使用 @import 命令导入外部样式表。导入样式书写方式：

<style>
@import test.css;
@import "test.css";
@import url(test.css);
@import url('test.css');
@import url("test.css");
</style>

需要注意的是，在 HTML 文档中使用 @import 时，@import 需要定义在 <style> 标签中。如果 <style> 标签中还有其它的 CSS 样式，那么 @import 就必须定义在所有样式的最前面。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 演示</title>
    <style>
        @import url(css/style1.css);
        @import "css/style2.css";
    </style>
</head>
<body>
    <h2>百度渊源</h2>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。</p>
</body>
</html>

和链接式不同的是：使用 <link> 标签引用的样式文件会随页面同时加载，而使用 @import 引用的样式文件会等待页面加载完成后再加载。如果 @import 引用的样式文件过大、加载时间过长的话，在页面加载完成后就会出现没有样式的情况，影响用户体验。

CSS 特性

CSS 中具有如下三大特性：

继承
层叠
优先级

了解 CSS 的三大特性对于深入理解 CSS 样式表匹配、修改 HTML 元素样式具有重要的意义。

CSS 继承

CSS 的继承特性，是指子类元素会继承父类的样式。

也就是说，指对某个元素所设定的样式，不但影响该元素本身，还会影响该元素的后代元素。

示例代码如下：

div { color: red;}

<div>
    Text1.
    <p>Text2.</p>
</div>

此时，如果 p 元素未设置样式的话，它会继承其父类 div 元素。

需要注意的是，HTML 元素通过继承而来的样式显示优先级，仅高于浏览器默认样式（User Agent Stylesheet）。任何方式的嵌入 CSS 样式（内联样式、内部样式表、外部样式表等）都高于继承优先级，会覆盖继承的样式。

CSS 层叠

CSS 的层叠特性是 CSS 最重要的三大特性之一。

多重样式层叠

我们知道，HTML 中允许以多种方式嵌入 CSS 样式：内联样式、内部样式表、外部样式表，甚至可以在同一个 HTML 文档内部引用多个外部样式表。

思考一下 >>> 当同一个 HTML 元素被不止一种嵌入方式定义时，会使用哪个样式呢？！！

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中（多重样式层叠为一），样式声明使用优先级如下：

内联样式 > 内部样式表 > 外部样式表 > 继承 > 浏览器缺省设置（User Agent Stylesheet）。

单样式层叠

上一小节我们讨论了使用多种嵌入 CSS 样式方式同时定义同一 HTML 文档中某一元素样式时的冲突问题。

这里的单样式层叠指的是，仅使用外部样式表（或内部样式表）的方式，可以多次对同一 HTML 元素的同一属性设定 CSS 样式，后面定义的样式会覆盖前面定义的样式。

例如（最终文本显示蓝色）：

div { color: red; }
div { color: blue; }

<div>
    Text1.
</div>

这里我们仅说明了（选择器相同，设置了同样的属性，后者覆盖前者）的情况。

那么，不同类型的 CSS 选择器，设置了同样的属性，还会是后者覆盖前者吗？？？尝试如下样例（解释请参见下一小节）：

<!-- Class Selector -->
.test {
    color: blue;
}
<!-- Tag Selector -->
div {
    color: red;
}

<div class="test">
    Text1
</div>

CSS 优先级

我们知道，不同类型的 CSS 选择器代表不同的 HTML 元素匹配规则。

还是仅讨论单样式层叠的情况，当这些不同的规则都作用到了同一个 HTML 元素上时，如果定义的属性有冲突，那么应该使用那种规则？？？

这就要涉及到 CSS 的优先级特性了~~~

[1] >>> 基础选择器

CSS 层叠优先级展示如下（从高到低）：

!important（见后文说明）
ID 选择器
伪类选择器
属性选择器
类选择器
标签选择器
通配符选择器
继承
浏览器自定义设置（User Agent Stylesheet）

常用排序：!important > 内联样式 > { ID 选择器 > … > 类选择器 > … > 标签选择器 > 通配符选择器 } > 继承 > 浏览器默认属性。

上面涉及到的主要都是基础选择器，那么由基础选择器组成的复合选择器如何判断优先级？？？

[2] >>> 复合选择器

事实上，网络上存在一个权重计算标准：

内联样式表的权值最高 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

复合选择器权重越高，其优先级越高。它等于组成它的基础选择器的权重和！！！例如：

div.test {
    width:100px;
    height: 100px;
}
.test.test1 {
    width:200px;
    height: 200px;
}

其中，div.test 复合选择器权重为：1+10=11，.test.test1 复合选择器权重为：10+10=20。这就意味着后者会覆盖前者的样式。

简洁 && 高效的 CSS

所谓高效的 CSS 就是，让浏览器查找更少的元素标签来确定匹配的 Style 元素。

[1] >>> 不要在 ID 选择器前使用标签名

/* 一般写法 */
div#divBox{color:red;}

/* 推荐写法 */
#divBox{color:red;}

解释：因为 ID 选择器是唯一的，加上 div 反而增加不必要的匹配。

[2] >>> 不要在 Class 选择器前使用标签名

/* 一般写法 */
span.red{color:red;}

/* 推荐写法 */
.red{color:red;}

解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆。

[3] >>> 尽量少使用层级关系

/* 一般写法 */
#divBox p .red{color:red;}

/* 推荐写法 */
.red{color:red;}

[4] >>> 使用 Class 代替层级关系

/* 一般写法 */
#divBox p .red{color:red;}

/* 推荐写法 */
.red{color:red;}

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器在解析时会忽略它。

CSS 注释以 /* 开始，以 */ 结束，进行行、块注释。实例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML 演示</title>

        <style>
            /* 这是一个内部样式表 
             * 这里，使用内部样式表来设定样式
             */
            .test {
                color: blue; /* 设置字体颜色为蓝色 */
            }
            div {
                color: red; /* 设置字体颜色为红色 */
            }
        </style>
    </head>
    <body>
        <div>
            Text1.
            <p></p>
        </div>
    </body>
</html>

CSS 教程之 CSS 基础语法

https://www.orangeshare.cn/2019/01/11/css-jiao-cheng-zhi-css-ji-chu-yu-fa/

Author

Waldeinsamkeit

Posted on

2019-01-11

Updated on

2022-12-15

Licensed under

#Front-End Devp

You need to set install_url to use ShareThis. Please set it in _config.yml.

CSS 教程之 CSS 基础语法

CSS 语法规则

CSS 选择器

Tag 选择器

ID 选择器

Class 选择器

通配符选择器

后代选择器

子选择器

相邻兄弟选择器

通用兄弟选择器

并集选择器

属性选择器

HTML 嵌入 CSS 样式

内联样式

内部样式表

链接式

导入式

CSS 特性

CSS 继承

CSS 层叠

多重样式层叠

单样式层叠

CSS 优先级

简洁 && 高效的 CSS

CSS 注释

Author

Posted on

Updated on

Licensed under

Like this article? Support the author with

Comments

Catalogue