CSS|青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天所做的课堂笔记。本文若有错误或不足之处，欢迎指

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

重点内容

CSS入门
- CSS的作用、语法、工作流程
选择器(Selector)
- 简单选择器（通配、类、id、属性、伪类）
- 组合
- 选择器组
颜色
- RGB与十六进制
- HSL
- 颜色的值
- 透明度
字体(font-family)
- font-family的作用
- 通用字符集
- Web Fonts
- 字重font-weight
- 行高line-height
- 文本对齐方式text-align
- 装饰text-decoration
- 空格合并/多个换行 white-space

详细知识点介绍

CSS入门

CSS(Cascading Style Sheets) 层叠样式表
在CSS文档中单独定义了各种样式使用规则，控制页面的外观样式，实现内容与样式的分离。
样式包括但不仅限于：
- font-size, color
- position, size
- animation
语法
最外层的选择器
(Selector)
，大括号，属性
(Property)
和属性值
(Value)
，属性和属性值共同构成声明
(Declare)
将CSS用于页面布局的方法
1. 外链：即使用，需要外部文档**※推荐！**
2. 嵌入：使用，无需外部文档
3. 内联：直接在tag中使用style属性，无需单独的代码块，但是并不推荐 （虽然UI组件库也会使用内联的方法，但还是不推荐）
图解CSS工作流程，不难看出HTML是CSS能实现应用定义的基础

选择器(Selector)

找出页面中的元素，以对其设置样式。找元素的方法有：
- DOM树中的位置
- - 通配选择器，对当前页面所有文字定义样式并使用，会覆盖局部的样式设置
- 类选择器："."开头，相比id选择器，使用更多
- id选择器："#"开头，同时要求id在页面内是唯一的，否则会报错
- 属性选择器：格式 tags[attribute]
  [href^="#"]表示选择前缀为#的元素
  [herf$=".png"]表示选择后缀为.png的元素
  em是一种相对单位，1em = 1 font-size(默认font-size为16px)，div中更改font-size则1em的大小也会变
- 伪类(pseudo-classes)
  不基于标签和属性定位元素。有2种伪类:
  - 状态伪类
    处于某一种特定状态下才会被访问，格式tags:case
    常见状态：hover,visited,first-child,last-child
  - 结构性伪类
  - style中常用组合(Combinators)
  - 选择器组：上述简单的选择器及组合均可使用","分割

颜色

RGB表示方法：rgb(0-255,0-255,0-255)
如：rgb(143,172,135)
十六进制，每两位表示不同的颜色
如：#8fac87
RGB和十六进制都没法很好地将颜色与使用习惯关联起来
HSL(Hue Saturation Lightness)
- 色相(Hue):色彩的基本属性，取值范围0-360；
- 饱和度(Saturation)：取值范围0-100%；
- 明度(Lightness)：取值范围0-100%。
如：hsl(210,66%,50%)
直接指定颜色的值
如：deepskyblue
透明度(alpha)，说是透明度，但是其实表示的是不透明度，取值范围0-1（默认为1）
如：hsla(0,100%,40%,0.47)

实践练习例子

CSS

语法与CSS在页面布局的应用(h4标题, color: cornflowerblue; font-size: 100%;)

<link rel="stylesheet" href="style.css">
<h4>语法(h4标题, color: cornflowerblue; font-size: 100%;)</h4>
<style>
    h4{
        color: cornflowerblue;
        font-size: 100%;
    }
</style>

选择器

id_Selector
class_Selector
href_1^=
href_2$=

<h4>选择器</h4>
<ol><li id="id_Selector">id_Selector</li>
    <li class="class_Selector">class_Selector</li>
    <li><a href="#wanna" target="_blank">href_1^=</a></li>
    <li><a href="wanna.png" target="_blank">href_2$=</a></li></ol>
<style>
    #id_Selector{
        color: goldenrod;
        font-size: 18px;
    }
    .class_Selector{
        color:lightcoral;
        font-size:18px;
    }
    a[href^="#"]{
        color: deepskyblue;
        background: 0 center/1em url(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34ced32d8aa14ffe9cbab487b8e62d93~tplv-k3u1fbpfcp-watermark.image?) no-repeat;
        padding-left: 1.1em;
    }
    a[href$=".png"]{
        color: chartreuse;
        background: 0 center/1em url(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34ced32d8aa14ffe9cbab487b8e62d93~tplv-k3u1fbpfcp-watermark.image?)no-repeat;
        padding-left: 1.1em;
    }
    a:hover{
        color: orange;
    }
    a:visited{
        color:palevioletred;
    }
</style>

特异度测试

<article><h5 class="test"><a href="https://www.bilibili.com/video/BV1PG4y1A7qE/?spm_id_from=333.851.b_7265636f6d6d656e64.3&vd_source=4bbcd4f052810d01dcb6e646ef6870e4">特异度测试</a></h5></article>
<style>
    .test{
        color:lightcoral;
    }
    article.h4{
        color:skyblue;
    }
</style>

布局

border, 4-colored, margin:auto
scroll_1
scroll_2
scroll_3
scroll_4
很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字

<ol><li><p>border, 4-colored, margin:auto</p></li>
    <li><article>
        scroll_1<br>scroll_2<br>scroll_3<br>scroll_4<br>
        </article></li>
    <li><p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bc1706dc3924b24b2fba16a90d4d8d6~tplv-k3u1fbpfcp-watermark.image?" alt="float_img" height="200px">很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字很多字</p></li></ol>