Web学习笔记（二）—— 基础CSS

1.简介

级联样式表（CSS）告诉浏览器如何显示您用HTML编写的文本和其他内容。
请注意，CSS区分大小写，因此请注意大写。
CSS已被所有主要浏览器采用，并允许您控制：

• 颜色
• 字型
• 定位
• 间距
• 浆纱
• 装饰物
• 过渡

应用CSS样式的主要方法有三种。您可以使用style属性将内联样式直接应用于HTML元素。另外，您可以将CSS规则放在HTML文档的style标签内。最后，您可以在外部样式表中编写CSS规则，然后在HTML文档中引用该文件。尽管前两个选项都有用例，但大多数开发人员仍喜欢使用外部样式表，因为它们将样式与HTML元素分开。这样可以提高代码的可读性和可重用性。
CSS背后的想法是，您可以使用选择器来定位DOM（文档对象模型）中的HTML元素，然后将各种属性应用于该元素以更改其在页面上的显示方式。

2.更改颜色

我们可以通过更改h2元素的style来实现。
负责元素文本颜色的color属性是样式属性。
这是将h2元素的文本颜色设置为蓝色的方法：

<h2 style="color: blue;">CatPhotoApp</h2>

请注意，以;结尾的内联style声明是一种好习惯。

3.CSS选择器

对于CSS，您可以使用数百个CSS属性来更改元素在页面上的显示方式。
输入<h2 style="color: red;">CatPhotoApp</h2>，您正在h2使用内联CSS设置单个元素的样式，该CSS代表级联样式表。
这是指定元素样式的一种方法，但是有一种更好的应用CSS的方法。
在代码的顶部，创建一个style如下所示的块：

<style>
</style>

在该样式块内，您可以为h2元素创建一个CSS选择器。例如，如果您希望所有h2元素均为红色，则可以添加如下所示的样式规则：

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

请注意，在每个元素的样式规则周围同时使用大括号（{}），大括号是很重要的。您还需要确保元素的样式定义在开始和结束样式标签之间。最后，请确保在每个元素的样式规则的末尾添加分号（;）。

4.CSS类

类是可重用的样式，可以添加到HTML元素中。
这是一个示例CSS类声明：

<style>
  .blue-text {
    color: blue;
  }
</style>

您可以看到我们已经在style标签内创建了一个CSS类blue-text。您可以将类应用于HTML元素，如下所示：

<h2 class="blue-text">CatPhotoApp</h2> 

类允许您在多个HTML元素上使用相同的CSS样式。
请注意，在CSS style元素中，类名以句点（.）开头。在HTML元素的class属性中，类名不包含句点。
请记住，您可以使用元素的class属性将多个类应用于元素，方法是使用空格将每个类名称分隔开。例如：<img class="class1 class2">

5.设置字号

字体大小由CSS属性 font-size 控制，如下所示：

h1 {
  font-size: 30px;
}

6.设置字体

①　可以使用font-family属性设置元素应使用的字体。
例如，如果要将h2元素的字体设置为sans-serif，则可以使用以下

CSS：
h2 {
  font-family: sans-serif;
}

②　除了指定大多数操作系统上常见的字体外，我们还可以指定在我们的网站上使用的非标准自定义Web字体。Internet上有许多Web字体来源。
Google字体是一个免费的网络字体库，您可以通过引用字体的URL在CSS中使用。
要导入Google字体，您可以从Google字体库中复制字体URL，然后将其粘贴到HTML中。对于这个挑战，我们将导入Lobster字体。为此，请复制以下代码段并将其粘贴到代码编辑器的顶部（在开幕style元素之前）：

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

现在，您可以使用FAMILY_NAME的形式在CSS中使用该Lobster字体，如以下示例所示：

font-family: FAMILY_NAME, GENERIC_NAME;（font-family: Lobster;）

GENERIC_NAME是可选的，并且是备用字体，以防其他指定的字体不可用。
姓氏区分大小写，如果名称中有空格，则需要用引号引起来。例如，您需要引号来使用"Open Sans"字体，但是Lobster字体不需要。

③　在所有浏览器中都可以使用几种默认字体。这些通用字体家族包括monospace，serif和sans-serif
当一种字体不可用时，您可以告诉浏览器“降级”为另一种字体。
例如，如果您希望元素使用Helvetica字体，但是在Helvetica不可用时降级为sans-serif，则可以按以下方式指定它：

p {
  font-family: Helvetica, sans-serif;
}

通用字体系列名称不区分大小写。另外，它们不需要引号，因为它们是CSS关键字。

7.图像大小

CSS有一个称为的属性width，用于控制元素的宽度。与字体一样，我们将使用px（像素）指定图像的宽度。
例如，如果我们想创建一个CSS类larger-image，使HTML元素的宽度为500像素，则可以使用：

<style>
  .larger-image {
    width: 500px;
  }
</style>

8.边框

①　CSS边框有这样的属性style，color和width。
例如，如果我们想在HTML元素周围创建一个红色的5像素边框，则可以使用此类：

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

②　我们可以使用名为border-radius的CSS属性来完善边框的角落。可以改尖角为弧角（设置弧度）
例如：

border-radius: 10px;
border-radius: 50%;

③　border-style属性用来定义边框的样式。
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
使用方法：

1. border-style:dotted;
2. border-style:dotted（顶边） dotted（右边） solid（底边） solid（左边）;
   顶边和底边合并，左边与右边合并：border-style:dotted（顶底） solid（左右）;
3. border-top-style:dotted;
   border-right-style:solid;
   border-bottom-style:dotted;
   border-left-style:solid;

④　简写：border:5px solid red;

9.背景色

您可以使用background-color属性设置元素的背景色。
例如，如果您希望元素的背景色为green，则可以将其放在style元素中：

.green-background {
  background-color: green;
}

10.id属性

①　除了类之外，每个HTML元素还可以具有一个id属性。
使用id属性有几个好处：使用id设置单个元素的样式，选择和修改JavaScript中的特定元素。
id属性应该是唯一的。浏览器不会强制执行此操作，但这是公认的最佳实践。因此，请不要将相同的id属性赋予多个元素。
这是一个如何为h2元素提供ID 为cat-photo-app的示例：

<h2 id="cat-photo-app">catphotoapp</h2>

②　关于id属性的一件很酷的事情是，就像类一样，您可以使用CSS设置样式。
但是，一个 id不可重用，而应仅应用于一个元素。一个 id也比类具有更高的特异性（重要性），因此，如果将两者都应用于同一元素并且具有冲突的样式，则将应用 id 的样式。
这是一个示例，说明如何使用id属性为cat-photo-elemen的元素t并为其赋予绿色的背景色。在您的style元素中：

#cat-photo-element {
  background-color: green;
}

请注意，在style元素内部，总是通过在类名之前加上一个 . 来引用它们。总是通过在ID 前面加上一个 # 来引用ID 。

11.填充

所有HTML元素实际上都是小矩形。
三个重要的属性控制围绕每个HTML元素的空间：padding，margin，和border。
元素padding定义元素边框与元素内容之间的空间，即上下左右的内边距。
使用：

1. padding-top:25px;上
   padding-bottom:25px;下
   padding-right:50px;右
   padding-left:50px;左
2. padding:25px 50px 75px 100px;{(上) (右) (下) (左)}
3. padding:25px 75px;{(上下) (左右)}
4. padding:25px;（上下左右）

12.边距

元素margin控制元素border与周围元素之间的空间量。
如果将元素的margin值设置为负值，则元素将变大。
CSS允许您控制margin与元素的所有四个单项两侧margin-top，margin-right，margin-bottom，和margin-left属性。
使用方法：

margin: (top) (right) (bottom) (left);
margin: (top&bottom) (right&left);

13.属性选择器

①　您一直在向想要特定样式的元素添加id或class属性。这些称为ID和类选择器。您还可以使用其他CSS选择器来选择要设置样式的自定义元素组。
使用[attr=value]属性选择器来设置复选框。该选择器使用特定的属性值匹配和设置元素样式。例如，以下代码使用属性type和相应的值更改所有radio元素的边距：

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

②　attribute 属性中包含 value:　
[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en] --> <p lang="en"> <p lang="en-us">

[attribute^=value] 属性的前几个字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">

attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以，例如： a[src$=".pdf"]

14.绝对单位与相对单位

像素是一种长度单位，它告诉浏览器如何调整项目的大小或空间。除了px之外，CSS还有许多不同的长度单位选项供您使用。
长度单位的两种主要类型是绝对和相对。绝对单位是指长度的物理单位。例如，in和mm分别指英寸和毫米。绝对长度单位近似于屏幕上的实际测量值，但根据屏幕的分辨率，会有一些差异。
相对单位（例如em或rem）是相对于另一个长度值的。例如，em基于元素字体的大小。如果使用它设置字体大小属性本身，则它与父级的字体大小有关。
注意：有几个相对单位选项与视口的大小相关联

15.继承覆盖

①　每个HTML页面都有一个body元素，并且它的body元素也可以使用CSS设置样式。
请记住，您可以像其他任何HTML元素一样对body元素进行样式设置，所有其他元素都将继承body元素的样式；
②　类将覆盖 body 元素的 CSS；
③　在 HTML 元素中使用类的顺序并不重要。类声明的顺序才是重要的。 后声明始终优先于先声明；
④　id 属性始终优先类属性；
⑤　内联样式将覆盖样式元素中的所有 CSS 声明。
⑥　添加关键字（color: red !important;）

16.颜色

①　在 CSS 中，我们可以使用6个十六进制数字表示颜色，红色®、绿色(g)和蓝色(b)组
件各两个。 例如，# 000000是黑色的，也是可能的最低值。
②　从这三种纯色(红色、绿色和蓝色)中，我们可以改变每种颜色的数量，从而创造出超
过1600万种其他颜色！例如，橙色是纯红色，混合了一些绿色，没有蓝色。 在十六
进制代码中，转换为 # ffa500。数字0是十六进制代码中最小的数字，表示完全没有
颜色。
③　许多人对超过1600万种颜色的可能性感到不知所措。 而且很难记住十六进制代码。
幸运的是，你可以缩短它。例如，红色的十六进制代码 # ff0000可以缩短为 # f00。
这个缩短形式给红色一个数字，绿色一个数字，蓝色一个数字。这将可能的颜色总数
减少到大约4,000种。 但是浏览器会将 # ff0000和 # f00理解为完全相同的颜色。
④　另一种在 CSS 中表示颜色的方法是使用 RGB 值。黑色的 RGB 值如下：rgb(0, 0, 0)；
⑤　白色的 RGB 值如下:rgb(255, 255, 255)；不像使用十六进制代码那样使用6个十六进
制数字，而是使用 RGB 指定每种颜色的亮度，数字在0到255之间。如果你计算一
下，一种颜色的两个数字等于16乘以16，总共有256个值。 因此，从零开始计数的RGB 与十六进制代码具有完全相同的可能值。就像使用十六进制代码一样，您可以使用不同值的组合在 RGB 中混合颜色。

17.变量

①　要创建一个 CSS 变量，你只需要给它一个前面有两个连字符的名字，然后像这
样给它赋值:

--penguin-skin: gray;

这将创建一个名为 -- penguin-skin 的变量，并将其赋值为 gray。 现在您可以在CSS 中的其他地方使用该变量将其他元素的值更改为灰色。
②　变量是一种强大的方式，可以通过只更改一个值来同时更改许多 CSS 样式属性。
③　创建变量后，可以通过引用给它的名称将其值分配给其他 CSS 属性。

background: var(--penguin-skin);

这将更改您要设置为灰色的元素的背景，因为那是 -- penguin-skin 变量的值。 注意，除非变量名称完全匹配，否则样式不会被应用。
④　当使用变量作为 CSS 属性值时，可以附加一个回退值，如果给定的变量无效，
浏览器将恢复为该值。

background: var(--penguin-skin, black);

如果没有设置变量，这将把背景设置为黑色。请注意，这对于调试非常有用。
注意: 此回退不用于增加浏览器兼容性，也不适用于 IE 浏览器。
⑤　在使用 CSS 时，你可能会遇到浏览器兼容性问题。
当你的浏览器解析一个网页的 CSS 时，它会忽略任何它不认识或不支持的属性。 例如你使用一个 CSS 变量来分配一个网站的背景颜色，Internet Explorer 会忽略背景颜色，因为它不支持 CSS 变量。 在这种情况下，浏览器将使用该属性的任何值。 如果它找不到该属性的任何其他值设置，它将还原为默认值，这通常并不理想。
这意味着如果你确实想提供一个浏览器备份，那么在声明之前提供另一个更广泛支持的值就很容易了。 这样一来，旧的浏览器就有了可以依靠的东西，而新的浏览器就只能解释随后出现的任何声明。
⑥　当您创建一个变量时，您可以在其中创建它的选择器中使用它。 它也可以在该选择器的任何子代中使用。 这是因为 CSS 变量是继承的，就像普通属性一样。
为了利用继承性，CSS 变量通常在: root 元素中定义。: root 是一个伪类选择器，它与文档的根元素(通常是 html 元素)匹配。 通过在: root 中创建变量，它们将全局可用，并且可以从样式表中的任何其他选择器访问。
当您在: root 中创建变量时，它们将为整个页面设置该变量的值。
然后，您可以通过在特定元素中再次设置这些变量来更改这些变量。
⑦　Css 变量可以简化媒体查询的使用方式。
例如，当您的屏幕比媒体查询断点小或大时，您可以更改变量的值，并且它将应用其样式，无论它在哪里使用。

---

参考：

• https://www.freecodecamp.org/learn
• https://www.runoob.com/html/html-tutorial.html