【Hello，前端！】用CSS画出缤纷世界（上）｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第2天。今天将

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

由于本节内容较多，CSS部分将分为上下两篇文章发布。

认识CSS

CSS，Cascading Style Sheet，译为层叠样式表，他可以用于修饰HTML元素的样式，今天我们看到缤纷多彩的网页应用，都是一段段CSS代码为页面元素精心修饰得到的。它的主要作用可以分为以下内容

设置字体、颜色等渲染属性
设置元素的位置和大小
为元素添加动画效果

举个栗子

h1 {
 color: white;
 font-size: 14px;
}

上面一小段代码中，各个部分的含义如下：

h1：选择器
color、font-size：属性
white、14px：属性值

如何使用

在页面中引入CSS有以下几种方式：

外链<link>
嵌入<style>
内联，使用style属性进行设置

<! -—外链―—>
<link rel= "stylesheet" href= "/assets/style.css" >

<! --嵌入——>
<style>
    li { margin :0 ;list- style :none; }
    p { margin : lem 0; }
</style>

<!——内联-->
<p style= "margin: lem 0 " >Example Content</p>

Tips：一般我们都不使用第三种方式，因为这样会导致这一段CSS代码始终只为这一个HTML元素服务，不利于代码复用

CSS的工作流程

感知结构.png

CSS选择器

CSS通过选择器Selector找到HTML元素并进行样式控制：

找出页面中的元素，以便给他们设置样式
通过标签名、类名、id选择
按照属性进行选择
按照DOM树中的位置进行选择

常见的选择器

标签选择器，直接使用标签名选择所有该标签
类名选择器，使用.类名的方式选择属于该类的标签
id选择器，使用#id名的方式选择属于该类的标签
属性选择器[属性名]、[属性名="属性值"]，选择所有具有该属性的
通配选择器*，选择所有

span {
  color: red;
  font-size: 20px;
}

.title {
  color: red;
  font-size: 20px;
}

#title {
  color: red;
  font-size: 20px;
}

[disabled] {
  color: red;
  font-size: 20px;
}

* {
  color: red;
  font-size: 20px;
}

伪类

选择特定状态下的标签进行样式设置，如鼠标悬停、首个元素等：

状态伪类，如link、visited、hover
结构伪类，如first—child、last-child

a:hover {
  color: red;
  font-size: 20px;
}

li:first-child {
  color: coral;
}

伪元素

它的来由类似于伪类，在配置样式时，有时我们会想要改变某个元素内部部分内容的样式，但是由于一个元素只能整体选中改变其样式，所以引入了伪元素的概念：

伪元素	样例	含义
`::after`	`p::after`	在每个 `<p>` 元素之后插入的内容。
`::before)`	`p::before`	在每个 `<p>` 元素之前插入的内容。
`::first-letter)`	`p::first-letter`	选择每个 `<p>` 元素的首字母。
`::first-line`	`p::first-line`	选择每个 `<p>` 元素的首行。
`::selection`	`p::selection`	选择用户选择的部分。

通过伪元素选择器，我就可以在不改变HTML结构的情况下去改变元素内部部分内容的样式。

组合选择器

直接组合 AB，同时满足AB
后代组合 A B，选中A的子孙元素B
亲子组合 A>B，选中A的子元素B
兄弟选择器A~B，选中A之后的兄弟元素B
相邻选择器A+B，选择紧跟在A后面的元素B
选择器组，一组选择器可以使用","隔开，表示这一组选择器选中的元素使用同一段样式代码颜色color

article p {
    color: black;
}

article > p {
    color: blue;
}

h2 + p {
    color: red; 
}

h1, h2, h3, h4, h5, h6 {
    color: white;
}

CSS基础样式

CSS颜色

常用的三种颜色写法如下：

十六进制表示法，#8fac87
三原色表示法，rgb(143, 172, 135)
HSL（色相、饱和度、亮度）表示法，hsl(35, 80%, 72%)
使用关键字指定具体的颜色，如white、black等
透明度的表示：#ff000078, rgba(143, 172, 135, 0.52)，hsl(35, 80%, 72%, 0.52)

CSS字体

font-family，设置一组字体，优先级从前到后，页面渲染时检查设备上已有的字体进行选择使用哪一种字体。

h1 {
    font-family: Optima, Georgia, serif;
}

使用建议

字体列表最后写上通用字体族（Serif、Sans-Serif等），这样在用户运行时即使前面的所有字体用户都没有也可以通过匹配通用字体族找到合适的字体
英文字体最好放在中文字体前面，因为中文字体有的包含英文字体资源，会导致中英文都使用了优先级高的通用中文字体

@font-face，可以通过CDN获取网络上的字体资源

@font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}

文本与排版

font-size

font-size和大多数的尺寸属性类似，可以使用以下三种方式赋值：

关键字：small、normal、large
数值：单位可以是px、em等
百分数：以父级元素的font-size为基准

section {
    font-size: 20px;
}

section h1 {
    font-size: 2em;
}

section span {
    font-size: 80%;
}

line-height

line-height属性控制每一行文本的高度，即行高，可以直接写具体数值，也可以使用一个数表示几倍行高

h1 {
    font-size: 30px;
    line-height: 45px;
}

p {
    font-size: 20px;
    line-height: 1.6;
}

font

font可以实现字体样式、粗细、大小、行高、字体的控制

h1 {
    /*斜体 粗细 大小/行高  字体族*/
    font: bold 14px/1.7 Helvetica, sans-serif;
}

text-align

text-align可以控制文本在行内即水平方向上的对齐方向

left，左对齐
center，居中对齐
right，右对齐
justify，两端对齐

spacing

letter-spacing控制字符间距
word-spacing控制单词间距

text-indent

text-indent控制文本缩进

text-decoration

text-decoration可以为文本添加下划线、删除线、上边线，默认为none

white-space white-space可以控制空格文本的显示方式

none，默认值，忽略空白
pre，以<pre>标签的行为模式保留空白
nowrap，强制同行显示
pre-wrap，保留空白且换行
pre-line，合并空白且换行

调试CSS

在浏览器中，我们可以随时方便的在控制台中调试CSS代码，以下是打开控制台的两种方式：

右键页面空白处，点击检查
使用快捷键：
- Ctrl+Shift+I，Windows
- Cmd+Opt+I

End

今天的CSS内容上部就到此结束啦，我们下篇文章再见~

【Hello，前端！】用CSS画出缤纷世界 （上）｜ 青训营笔记