CSS入门(样式表|class类|选择器|背景|!important|文本颜色|字体|注释)

为什么学习CSS，因为QSS vs CSS 相似度极高，学好CSS对于QSS和QML都有潜移默化的作用。记住不管学习什么，我们都在围绕Qt集成。

入门

介绍

CSS 功能丰富，不仅仅是布局页面

外部样式表 <link>

在给定的HTML代码中，我们有一个<link>标签，用于在HTML文档中引入外部CSS样式表。让我们逐句解释每一行：

• <link>：这是一个HTML标签，用于定义当前文档与外部资源之间的链接。

• href="./path/to/stylesheet/style.css"：href属性指定了样式表文件的路径，这里"./path/to/stylesheet/style.css"是样式表文件的相对路径。

• rel="stylesheet"：rel属性定义了当前文档与被链接资源之间的关系，这里是指当前文档将使用被链接资源作为样式表。

• type="text/css"：type属性指定了被链接资源的MIME类型，这里是指被链接资源是CSS样式表文件。

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

内部样式表 <style>

代码是一个HTML样式块（style block），用于定义页面的样式。让我们逐句解释每一行：

• <style>：这是一个HTML标签，用于定义内部样式表。

• body：这是CSS选择器，指定了要应用样式的HTML元素，这里是body元素。

• {}：这是CSS的语法，用于包含样式规则。

• background-color: linen;：这是一个CSS属性和值对，用于设置body元素的背景颜色为"linen"（亚麻色）。

<style>
  body {
    background-color: linen;
  }
</style>

内联样式 style

代码展示了两个HTML元素，一个是<h2>标签，一个是<p>标签，用于显示不同样式的文本。让我们逐句解释每一行：

• <h2 style="text-align: center;">：这是一个<h2>标签，并使用style属性来定义其样式。text-align: center;属性将文本居中对齐。

• 居中文本：这是<h2>标签中的文本内容，将以居中对齐的方式显示。

• <p style="color: blue; font-size: 18px;">：这是一个<p>标签，并使用style属性来定义其样式。color: blue;属性将文本颜色设置为蓝色，font-size: 18px;属性将文本字体大小设置为18像素。

• 蓝色，18像素文本：这是<p>标签中的文本内容，将以蓝色和18像素的字体大小显示。

<h2 style="text-align: center;">
  居中文本
</h2>
<p style="color: blue; font-size: 18px;">
  蓝色，18像素文本
</p>

添加 class 类

<div class="classname"></div><div class="class1 ... classn"></div>

支持一个元素上的多个类

---

选择器

h1 { } 
#job-title { }
div.hero { }
div > p { }

选择器类型指的是在CSS中用于选择和应用样式的不同方式。下面是对每个选择器类型的解释：

1. h1 { }：这是一个元素选择器，它选择所有的<h1>标签并应用相应的样式。这意味着所有的<h1>标签都将具有相同的样式。

2. #job-title { }：这是一个ID选择器，它选择具有特定ID值的元素并应用相应的样式。在这种情况下，选择器选择具有ID为"job-title"的元素，并为其应用样式。ID选择器是唯一的，每个页面上只能有一个具有特定ID的元素。

3. div.hero { }：这是一个类选择器，它选择具有特定类名的元素并应用相应的样式。在这种情况下，选择器选择所有属于"class"为"hero"的<div>元素，并为其应用样式。类选择器可以同时应用于多个元素。

4. div > p { }：这是一个子元素选择器，它选择作为另一个元素的直接子元素的元素，并应用相应的样式。在这种情况下，选择器选择所有作为<div>元素的直接子元素的<p>元素，并为其应用样式。只有紧接在<div>元素内部的<p>元素才会被选择。

背景

background-color: blue;background-image: url("nyan-cat.gif");background-image: url("../image.png");

!important

.post-title { color: blue !important;}

覆盖所有以前的样式规则

!important 是CSS中的一个声明修饰符，用于提高样式规则的优先级。当样式规则使用了!important修饰符时，它将覆盖其他具有相同选择器的样式规则，无论其他规则是否更具体或更早出现。

具体来说，当一个样式规则使用了!important修饰符时，它将具有最高的优先级，即使其他规则具有更高的特殊性或者出现在其他位置。这意味着带有!important的样式规则将始终被应用，除非存在另一个具有相同选择器并且也使用了!important的规则。

然而，过度使用!important并不是一个好的实践，因为它可能导致样式的混乱和难以维护。在编写CSS时，应尽量避免使用!important修饰符，而是通过正确的选择器特殊性和样式规则的顺序来管理样式的优先级。

文本颜色

color: #2a2aff;color: green;color: rgb(34, 12, 64, 0.6);color: hsla(30 100% 50% / 0.6);

字体

.page-title {  font-weight: bold; // 加粗  font-size: 30px; // 大小  font-family: "Courier New"; }

注释

/* 这是一行注释 *//* 这是 多行注释 */