Day 2 -- CSS 入门 | 青训营笔记

72 阅读2分钟

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

本堂课重点内容

  1. CSS是什么
  2. CSS选择器的特异度
  3. CSS求值过程解析
  4. CSS布局

CSS简介

CSS(Cascading Style Sheets)是用来控制网页样式的工具,他可以用来定义页面元素的样式,如设置文字和颜色,设置位置和大小,添加动画效果等。

颜色系统

  • RGB:
    RGB是通过对红(R)、绿(G)、蓝(B)三个颜色的变化以及它们相互之间的叠加来得到各式各样的颜色的颜色系统,是运用最广的颜色系统之一。

截屏2023-01-16 21.01.33.png

RGB系统有两种写法,一是rgb(xxx, yyy, zzz)分别代表着每种颜色的“含量”,另一种是#xxyyzz,六位分别是红绿蓝的含量的十六进制数。

  • HSL:
    HSL分别表示色相(Hue)、饱和度(Saturation)和亮度(Lightness),它常常使用在不想改变颜色只想改变亮度或灰度的时候。

截屏2023-01-16 21.19.55.png

有关字体的调整

  • 大小(font-size)
    px👉🏻指的是像素 em👉🏻指的是父元素的多少倍 百分比👉🏻也是父元素的多少倍

  • 字体样式
    这部分主要有两个知识点:font-family 和 Web Fonts。

  • 行间距(line-height)
    使用方法:
    line-height: 45px;line-height: 1.6;

选择器的特异度和继承及其他内容

截屏2023-01-16 21.37.04.png

一句话概括,越具体的优先级越高。有关于继承,对于可以继承的元素,没有单独写样式的就继承父类的样式,对于不可以继承的元素,可以使用inherit关键词。

CSS中,每个属性都有一个初始值,重置初始值用initial关键词。

CSS的求值过程

CSS布局

这也是今天的内容中我最喜欢的一部分,对于每个盒子,我们有以下几种属性

截屏2023-01-16 21.57.01.png

IMG_5890.jpg

  • 行级排版上下文(IFC)

截屏2023-01-16 22.06.43.png

  • 块级排版上下文(BFC)

截屏2023-01-16 22.07.23.png

  • flex-box

  • grid排版

    1. 划分网格 IMG_5894.JPG

    2. 选网格(两种方式) 截屏2023-01-16 22.20.53.png