这是我参与「第四届青训营」笔记创作活动的第2天

在学习完HTML之后，今天我们开始学习第二门技术CSS

总体来说 HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。

一、什么是CSS

CSS，是层叠样式表（Cascading Style Sheets）的缩写。

我们都知道一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言。CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。

二、CSS的语法

看一条简单的CSS语句：

h1 {
    color: red;
    font-size: 5em;
}

语法由一个选择器 (selector)起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题<h1>）添加样式
接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。在这里的color和size，这两个就是属性了。冒号后面的pink和15em就是这两个属性的值了。

CSS的工作原理

我们在打开一个网页的过程中，首先会加载HTML，然后解析HTML，在解析的同时加载并解析CSS，等HTML解析好并创建了DOM树之后，浏览器就会把CSS中的样式添加到对应的DOM树节点，类似这样：

三、如何使用CSS

首先我们要建立一个HTML文档，先建立一个index.html 。在与 HTML 文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是 CSS 文件）

让 HTML 文档能够遵守我们给它的 CSS 规则。其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接 CSS。

1.外链使用

在 HTML 文档中，<head> 语句模块里面加上下面的代码：

<link rel="stylesheet" href="styles.css">

在<link> 语句块里面，我们用属性 rel，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 href 指定，寻找 CSS 文件的位置。

2.嵌入使用

在HTML里面新建一个叫做style的非空元素，里面塞入你的css代码

<style>
    h1{
        color: pink;
        size: 15em;
    }
</style>

3.内联使用

我们在具体使用某一个元素的时候，在这个元素的标签中定义它的样式：

<h1 style=" color: pink; size: 15em; " > title </h1>

这里针对h1定义了样式style

四、选择器

我们通过 HTML 元素名规定样式，这些元素名就是选择器，顾名思义我们要选择哪些元素作为样式的修改。（在HTML文档编辑，但是style标签内的是CSS）

1.通配选择器

直接用*，代表所有的元素，表示页面上所有的元素全部加载这个样式表

<h1> title</h1>
<p>text</p>
<style>
    *{
        color: pink;
        size: 15em;
    }
</style>

2.标签选择器

针对某一个标签修改样式

<style>
    h1{
        color: pink;
        size: 15em;
    }
</style>

3.ID选择器

我们可以给每一个标签都设定一个字符串作为id，然后把选择器改成#加上指定的id，就可以让对应的id使用这个样式表了，注意一个id只能被一个元素拥有

相当于起名字，每个人的名字都是独一无二的的

<h1 id="certainid"> title</h1>
<h1>title</h1>
<style>
    #certainid{
        color: pink;
        size: 15em;
    }
</style>

结果如下：虽然都是h1，但是第一个title变成了粉色

QQ截图20220730002621.png

4.类选择器

和ID选择器类似，把id换成class，把#换成.，就可以实现类选择器

但类选择器可以多次使用，就像名字虽然每个人不同，但是有很多人可以属于同一个班级

<h1 class="class"> title</h1>
<h1>title</h1>
<h2 class="class">book</h2>
<style>
    .class{
        color: red;
        size: 15em;
    }
</style>

结果如下，可以多次使用class类

QQ截图20220730003114.png

5.属性选择器

有的时候我们想只对某些特定属性有特定值的元素使用样式表，比如我们希望所有的密码输入框变成红色而其他类型的输入框不受影响，我们就可以使用一个属性选择器

<input type="password">
<br>
<input type="text">
<style>
 input[type = "password"]{
     color: pink;
     size: 15em;
 }
</style>

这个选择器的意思就是我们只对type属性为password的input标签使用样式表。

QQ截图20220730003527.png

比较一下，属性选择器就好像一个人有多个称呼一样，在不同的场合我们用不同的称呼来区别，但都还是属于同一个人。

6. 伪类选择器

因为这种选择器不会去选择某些特定的元素，而是会在某些元素处于某种状态的时候来进行样式表的渲染。比如我们可以让某个链接在被访问之前、被访问之后和鼠标移到连接上时都拥有不同的样式，我们就可以这样写：

<a href="https://juejin.cn">掘金社区官网</a>

<style>
    /*当链接已经被访问过*/
    a:visited{
        color: aqua;
    }
    /*当鼠标移到链接上时*/
    a:hover{
        color: coral;
    }
    /*当链接没有被访问过的时候*/
    a:link{
        color: pink;
    }
</style>

注意到上面用/* */括起来的部分就是CSS的注释，和HTML的注释格式是不一样的

7.选择器的组合

创建一个新的选择器，要求标题和段落的字体都改，但只改变标题的颜色

<h1 class="cls">Title</h1>
<p class="cls">text</p>

<style>
    h1.cls{
        color: aqua;
    }
    .cls{
        size: 20px;
    }
</style>

结果如下，h1.cls就是我们建立的选择器，这个意思是说 选中每个 cls 类的 h1 元素 文本进行更改颜色

四、字体的样式修改

1.基本的样式

颜色，就是color属性，
字体的设置，通过font-famliy属性
字体的大小使用font-size属性来进行调整。我们既可以用不同的单位（px、em或%），也可以使用标准中提供的关键字（如large）等；

2.选择符

看下面一段HTML代码

<h1>I am a level one heading</h1>
<p>This is a paragraph of text. In the text is a <span>span element</span> 
and also a <a href="http://example.com">link</a>.</p>
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
<ul>
    <li>Item <span>one</span></li>
    <li>Item two</li>
    <li>Item <em>three</em></li>
</ul>

<style>
li em {
    color: red;
}

h1 + p {
    font-size: 200%;
}
 </style>

QQ截图20220730010727.png

当我们想仅选择嵌套在<li> 元素内的<em>，我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。
另一是在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符)

3.多种组合选择器和选择符

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

面的代码为以下元素建立样式：在<body>之内，紧接在<h1>后面的<p>元素的内部，类名为 special

前端学习之 CSS 基础 | 青训营笔记