Web前端：CSS篇（一）样式表导入，选择器介绍

梓仁沐白

已于 2024-08-21 17:02:48 修改

阅读量857

点赞数 26

分类专栏： Web前端文章标签：前端 css

于 2024-08-05 00:25:34 首次发布

本文链接：https://blog.csdn.net/sjb2274540432/article/details/140912266

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS介绍

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

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

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

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

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

样式表的三种导入

优先级：内联样式>内部样式表>外部样式表

1.内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

2.内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

3.外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<link>: 这是一个 HTML 元素，用于链接外部资源。它通常位于 <head> 部分，用于链接样式表、图标等。
rel="stylesheet": rel 属性定义了当前文档与链接资源之间的关系。在这里，stylesheet 表示链接的资源是一个样式表。浏览器会根据这个属性来正确地处理和加载 CSS 文件。
type="text/css": type 属性用于指定链接资源的媒体类型（MIME type）。在这里，text/css 指定链接的样式表是 CSS 文件。虽然在 HTML5 中，这个属性是可选的，浏览器通常能够根据文件扩展名自动识别。
href="style.css": href 属性指定了外部资源的路径。在这里，style.css 指向一个 CSS 文件，浏览器将会下载并应用这个文件中的样式到当前网页。这个路径可以是相对路径或绝对路径。

在 styles.css 文件中，你可以定义样式规则。基本的 CSS 结构如下：

/* 选择器 */ 选择器 { 属性名: 属性值; }

例如，你可以为所有的段落（<p> 标签）设置字体颜色和大小：

p {
color: blue; /* 字体颜色为蓝色 */
font-size: 16px; /* 字体大小为16像素 */
}

……

只需要在styles.css文件内把样式表列举出来就行，如果要直接运行html文件的话，CSS文件在相同目录下就行，或者在 href = ___ 这里标明CSS文件的目录。

如果你使用的是后端框架（如 Django、Flask、Ruby on Rails 等），通常会有建议的目录结构。一般情况下，你会将静态文件（包括 CSS）放在指定的静态文件目录中。例如：

Django：静态文件通常放在 static 目录中。
Flask：静态文件通常放在 static 目录中。

/myproject
├── app
│ ├── static
│ │ └── css
│ │ └── styles.css
│ └── templates
│ └── index.html
└── manage.py

CSS 注释

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

CSS注释以 /* 开始, 以 */ 结束

选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置选择器。

1. ID 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

使用 # 标识selector，语法格式：#S{...}（S为选择器名）

以下的样式规则应用于元素属性 id="para1":

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

为了方便，这边都用内部样式表来做例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2. 类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

标识selector，语法格式：.S{...}（S为选择器名）

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

多个 class 选择器元素之间可以使用空格分开：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
.center {
	text-align:center;
}
.color {
	color:#ff0000;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p> 
</body>
</html>

3. 标签选择器

即以 html 标签作为 css 修饰所用的选择器。

<style>
h3{
color:red;
}
</style>

<h3>这是一个h3标签</h3>

这样在使用这个标签时就会直接使用更改样式后的标签

4. 包含选择器

（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p>
<div>
<p>yellow text</p>
</div>

包含选择器除了有 A B{...} 的形式外（A和B都是标签），还可以有这种形式：.A B{...} 的形式（A是类名，B是标签）。

作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

<style>
.first span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容也是红色</span></li>
<li><span>内容也是红色</span></li>
</ol></p>

</body>

5. 子选择器

（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为包含选择器对应的标签内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配

<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p>
<table>
<tr>
<td>
<p>no red text;</p>
</td>
</tr>
</table>
</div>

子选择器除了有 A >B{...} 的形式外（A和B都是标签），还可以有这种形式：.A >B{...} 的形式（A是类名，B是标签）。

作用与上面介绍的相同，会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。

<style>
.first>span{
color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
<li><span>内容不是红色</span></li>
<li><span>内容不是红色</span></li>
</ol></p>

</body>