走进前端技术栈 - CSS | 青训营笔记

60 阅读1分钟

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

在页面中使用css

  • 外链
  • 嵌入
  • 内联

css如何工作

image.png

元素

选择器selector

  • 通配选择器 *
  • 标签选择器 使用标签设置
  • id选择器
  • 类选择器 class
  • 属性选择器
  • 伪类选择器(状态、结构伪类) 标签:

image.png

  • 选择器组

多个选择器并列,用逗号分隔

颜色

  • rgb(num,num,num)

RGB色彩就是常说的光学三原色,R代表Red(红色),G代表Green(绿色),B代表Blue(蓝色)。自然界中肉眼所能看到的任何色彩都可以由这三种色彩混合叠加而成,因此也称为加色模式。

  • #编号
    每两位表示一种,六位组成一个rgb

    16进制表示的方法分为两种:

  1. 以”0x“开头表示,这种表示方法才是标准的16进制的表示方法。例如“0x00ffffff”
  2. "0xffffff"以“#”开头表示,例 如“#FFFFFF”或“#FFF”。 区别:其实也没啥区别,都是16进制的,只是常见的是以“#”开头,”0x“开头多在电子这方面,不用太关注.
  • hsl(h,s,l)
    色相(0-360)饱和度(色彩鲜艳程度100%)亮度(明亮程度0-100%)
  • 关键字colors

例如pink,green,...

  • 透明度alpha

alpha 就是图片的透明度,取值可以在0-255之间或者0.0f---1.0f之间,数值越小透明度越高

字体

通用字体font-family

image.png

  • 中英文混合的时候,默认把英文写前面
  • 使用web front

字体属性

  • 关键字
  • 长度
  • 百分数

多个连续的空格或换行会合并成一个,可以使用

image.png

一张图助你快速记忆CSS所有属性

b11676cc207840ca8dd38c6d8a2db132.jpeg