【前端基础】1 - 2 CSS 入门与选择器

§1-2 CSS 入门与选择器

§1-2 CSS 入门与选择器

1-2.1 CSS 概述

CSS, Cascading Style Sheet，层叠样式表或级联样式表，是 W3C 标准中的表现标准语言。前面我们学习了 HTML 这种结构化标准语言，页面只是有了基础的结构，但并不美观。CSS 可以用于调整页面的表现，俗称美化。

从本节起，我们开始学习 CSS，我们将要学习的内容有：

快速入门 CSS；
CSS 选择器（重难点）；
美化网页；
盒子模型；
浮动与定位；
网页动画。

由于个人时间和精力有限，章节内容并不能覆盖全面。这里提供可用于学习 CSS 学习的站外链接：

w3school 在线教程

CSS3 教程 | 菜鸟教程 (runoob.com)

访问任意一个网页，按下默认快捷键 F12 打开浏览器的开发人员工具（这里以 Microsoft Edge 为例），单击 “元素”（Elements）选项卡，就能看到页面的 HTML 源代码（左）以及 CSS 源码（右）。

下面简要地说明 CSS 各版本的新特性：

CSS 1.0：引入了一套基本样式属性和选择器，提供对字体、颜色、背景、边框等基本样式的控制；
CSS 2.0：div（块） + CSS，体现了 HTML 与 CSS 结构分离的思想，网页变得简单，有利于搜索引擎优化（SEO）；
CSS 2.1：网页浮动、定位与层叠；
CSS 3.0：圆角、阴影、动画等。

1-2.2 CSS 快速入门

下面快速地介绍 CSS 的用法。

1-2.2.1 CSS 语法

CSS 的语法统一遵循下列结构：

/* comment */

selector {
    statement1;
    statement2;
    statement3;
    ...
}

其中，selector 为选择器，用于选中和定位 HTML 页面中的元素。使用花括号 {} 包围针对该元素的声明语句，每条语句建议使用分号 ; 分隔。

下面是一个针对 HTML 页面中所有 h1 元素的 CSS 代码：

h1 {
    color: red;
}

上述代码会将 HTML 文档中的 h1 元素修改为红色。

1-2.2.2 创建并插入样式表

方法一 - 内部样式表：在 HTML 文档中可以在 head 标签中使用 style 标签，在 style 标签中嵌入 CSS 代码：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>内嵌CSS代码</title>
        
        <!-- style 标签内的所有内容都被视为 CSS 代码 -->
        <!-- 早期内容与表现混合的实践 -->
        <style>
            h1 {
                color: red;
            }
        </style>
    </head>
    
    <body>
        <h1>
            这是一个标题。
        </h1>
    </body>
</html>

这种方法是早期的实践，现如今不常使用。若 CSS 代码量大，这会导致页面代码混乱，且会延长加载时间。

方法二 - 外部样式表（推荐）：将 CSS 文件分离，在 HTML 文档的 head 标签内使用 link 标签关联指定样式表。样式表的文件后缀名为 css。

首先，为保证良好的文件结构，一般地，使用这种方法，该页面所配套的文件结构为：

- 页面文件夹
	- css
		- stylesheet1.css
		- stylesheet2.css
		- ...
	- index.html

在 css 文件夹中单独存放所需的 CSS 文件。这里仍以前文所用的 CSS 源码为例，命名为 stylesheet.css，然后，在 index.html 的 head 中使用 link 关联该样式表：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>内嵌CSS代码</title>
        
        <!-- 使用 link 关联样式表 -->
        <!-- CSS3.0 的链接式关联外部样式表 -->
        <link rel="stylesheet" href="css/stylesheet.css">
    </head>
    
    <body>
        <h1>
            这是一个标题。
        </h1>
    </body>
</html>

建议使用这种独立于 HTML 的 CSS 文件。这种做法的优势在于：

内容与表现分离；
网页结构表现统一，可以实现复用；
样式丰富；
利于 SEO，容易被搜索引擎收录。

此外，CSS 2.1 特有的使用导入式导入外部连接表，在 HTML 的 head 中使用 style：

<style>
    @import url("样式表URL")
</style>

方法三 - 内联样式表（不推荐）：在标签中使用属性 style 并在属性中以 CSS 源码作为该属性的值嵌入其中：

<h1 style="color: red;">
    我是标题
</h1>

这种方式不推荐使用，因为它不满足内容与实现分离的思想。

三种使用方式优先级：这三种方式可以同时使用。存在多种导入时，会按照优先级调用指定样式表，优先级原则为就近原则，即选择距离被修饰标签最近的 CSS。因此，行内样式表总是被最先调用。但在一般情况下，优先级为：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式。

1-2.3 选择器

选择器用于选择页面上某一个或某一类的元素。有基本选择器和高级选择器。这里列出一些常用的选择器。

1-2.3.1 基本选择器

基本选择器又分为标签选择器、类选择器、id 选择器三种。

标签选择器：选中页面所有指定的标签。

例如，选中页面中全部的 p 标签并将其文本修改为红色。

p {
    color: red;
}

类选择器：选中页面中所有属性 class 为指定值的标签。使用 .className 访问。

同一 class 属性值可被多个标签复用。例如，修改 class 值为 cnblog 的标签的文本颜色为蓝色。

<!-- 页面的部分 HTML 源码 -->
<h1 class="cnblog">
    这是一个蓝色的标题
</h1>
<p class="cnblog">
    这是一个蓝色的段落。
</p>
<p>
    这也是一个默认黑色的段落。
</p>

/* 示例 CSS */
.cnblog {
    color: blue;
}

id 选择器：选中页面中具有指定 id 属性值的标签。使用 #idName 访问。

id 必须全局唯一。例如，修改 id 为 zebt 的标签颜色为绿色。

<!-- 页面的部分 HTML 源码 -->
<h1 id="zebt">
    这是一个绿色的标题。
</h1>
<h1>
    我就不是一个绿色的标题。
</h1>

/* 示例 CSS */
#zebt {
    color: green;
}

基本选择器的优先级：当同一标签被多种选择器同时选中时，具有以下优先级：

id 选择器 > 类选择器 > 标签选择器

示例：

<!-- 选择器优先级示例 -->
<h1 class="cnblog" id="zebt">
    同时被三种选择器选中的标题。（我是红色的）
</h1>
<h1 class="cnblog">
    同时被类选择器和标签选择器选中的标题。（我是蓝色的）
</h1>
<h1>
    仅被标签选择器选中的标题。（我是绿色的）
</h1>

/* 示例 CSS */
#zebt {
    color: red;
}

.cnblog {
    color: green;
}

h1 {
    color: blue;
}

1-2.3.2 高级选择器

高级选择器有层次选择器、结构伪类选择器、属性选择器。

层次选择器：基于 HTML 文档中元素的树形结构选中具有指定层次结构的标签。

/* 选择所有后代 */
body p {
    /* 将 body 标签内所有 p 标签的文本颜色修改为红色 */
    color: red;
}

/* 选择直接后代 */
body > p {
    /* 将 body 标签内所有 p 子标签（不包含孙标签及其后代）的文本修改为绿色 */
    color: green;
}

/* 向下选择相邻兄弟 */
.active + p {
    /* 将 active 类标签下方的第一个同级 p 标签的文本修改为蓝色 */
    color: blue;
}

/* 向下选择 active 类元素后的每一个 p 元素 */
.active ~ p {
    /* 从 active 类标签（不含该标签）开始，以最大范围选择到下方同级的 p 标签，将它们文本修改为黄色 */
    color: yellow;
}

测试示例：

<body>

<h1>大标题</h1>
<p>段落0</p>
<p class="active">段落1（活跃）</p>
<p>段落2</p>
<p>段落3</p>
<ul>
    <li>
        <p>列表选项 1 - 段落</p>
    </li>
    <li>
        <p>列表选项 2 - 段落</p>
    </li>
    <li>
        <p>列表选项 3 - 段落</p>
    </li>
</ul>
<p>段落4</p>
<p class="active">段落5（活跃）</p>
<p>段落6</p>
<p>段落7</p>

</body>

结构伪类选择器：伪类可用于为标签选择施加条件，或为标签本身施加动作。

/* 选中第一个子元素 */
/* 若该元素的类型不匹配，则不选中 */
ul li:first-child {
    color: red;
}

/* 选中最后一个子元素 */
/* 若该元素的类型不匹配，则不选中 */
ul li:last-child {
    color: green;
}

/* 选中所属父级标签下第几个元素，从1开始 */
/* 若该元素的类型不匹配，则不选中 */
p:nth-child(2) {
    color: blue;
}

/* 选中所属父级标签下该类型第几个元素，从1开始 */
p:nth-of-type(2) {
    color: violet;
}

/* 鼠标悬浮时的显示效果 */
ol li:hover {
    color: blueviolet;
}

测试示例：

<body>

<h1>大标题</h1>
<p>段落0</p>
<p class="active">段落1（活跃）</p>
<p>段落2</p>
<p>段落3</p>
<ul>
    <li>列表选项1</li>
    <li>列表选项2</li>
    <li>列表选项3</li>
    <li>列表选项4</li>
</ul>
<ol>
    <li>有序列表选项1</li>
    <li>有序列表选项2</li>
    <li>有序列表选项3</li>
    <li>有序列表选项4</li>
</ol>
<p>段落4</p>
<p class="active">段落5（活跃）</p>
<p>段落6</p>
<p>段落7</p>

</body>

属性选择器（常用）：根据元素属性选择 HTML 元素。

/* 选择每一个带有指定属性的元素 */
[target] {
    color: red;
}

/* 选择所有带有指定属性和值的元素 */
[target=_blank] {
    color: green;
}

/* 选择指定属性中包含指定内容的元素 */
[title~="hello"] {
    color: blue;
}

/* 选择 lang 属性为 en 或以 en- 开头的所有元素 */
[lang|=en] {
    color: cyan;
}

/* 选择每一个 src 属性开头为 https 的元素 */
[src^=https] {
    color: magenta;
}

/* 选择每一个 src 属性结尾为 pdf 的元素 */
[src$=pdf] {
    color: yellow;
}

/* 选择每一个 src 属性的值包含 zebt 子串的元素 */
[srcc*=zebt] {
    color: violet;
}

1-2.3.3 分组选择器与嵌套选择器

若要同时选中多个元素，进行相同的修改，可以使用分组选择器同时将这些元素选中。例如：

h1, h2, p {
    color: blue;
}

嵌套选择器可用于精确选择某种元素。例如，选中页面中全部带有 class="flagged" 的 <p> 元素：

p.flagged {
    color: blue;
}

1-2.4 背景

CSS 背景属性可用于定义 HTML 元素背景。

背景颜色：background-color 可用于定义背景颜色。
```
/* 修改背景颜色 */
body {
    background-color: #B0C4DE;
}
```
颜色支持使用英文单词、RGB、RGBa、HSL、HSLa。

背景图像：background-image 可用于定义背景图像。

/* 修改背景图像 */
body {
    background-image: url('background.png');
}

默认情况下，背景图像以平铺重复显示，以覆盖整个元素。可以更改背景的平铺方式：

/* 修改平铺方式 */
/*
repeat - 默认，在水平和垂直方向重复
repeat-x - 水平方向重复
repeat-y - 垂直方向重复
no-repeat - 不重复
inherit - 继承父元素设置
*/
body {
    background-image: url('background.png');
    background-repeat: repeat-x;
}

此外，还可以调整背景的定位（起始位置）：

/* 修改背景定位（起始位置） */
body {
    background-image: url('background.png');
    background-repeat: no-repeat;
    background-position: center top;	/* 顶部中央 */
}

此外，还可以调整图像是否固定：

/* 调整背景固定 */
/*
scroll - 默认，背景图像随着页面滚动而滚动
fixed - 背景图片固定不随页面滚动
local - 背景图片随着元素内容滚动
inital - 设置该元素的默认值
inherit - 继承父元素属性
*/
body {
    background-image: url('background.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attatchment: fixed;
}

简写属性：可以将上述的多条控制语句简写为一句，使用 background。
```
body {
    background: color image repeat attatchment position;
}
```
以上属性无需全部使用，按需使用即可，但必须按照上述顺序使用。

posted @ 2024-03-09 20:30 Zebt 阅读(5) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部