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

60 阅读1分钟

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

CSS是什么

css是用来定义页面的样式,包括但不限于:

  • 设置字体和颜色
  • 设置位置和大小
  • 设置动画效果

一个基础的css应该包括以下部分:

屏幕截图_20230118_004151.png

在页面使用css有以下方法:

屏幕截图_20230118_004341.png

css选择器样式

  • 通配选择器 *
  • 标签选择器 . 开头
  • id选择器 # 开头
  • 属性选择器 【】 包裹
  • 伪类选择器(不基于标签和属性定位元素)
    • 状态伪类
    • 结构伪类

屏幕截图_20230118_005008.png

屏幕截图_20230118_005046.png

状态伪类

屏幕截图_20230118_005032.png

结构伪类

  • 组合

屏幕截图_20230118_005333.png

  • 选择器组

屏幕截图_20230118_005513.png

css颜色

一般主要是通过 rgba(red,green,blue,alpha) 修改
每个值在0~255之间 alpha为不透明度,当值为1时不透明。

演示

屏幕截图_20230118_005949.png

css字体

font-family字体样式

屏幕截图_20230118_010131.png 通用字体族

屏幕截图_20230118_010217.png

font-family使用建议:

  • 字体列表最后放上通用字体族
  • 英文字体放在中文字体前面

WEB FONT

屏幕截图_20230118_010604.png

使用指定字体,增加浏览器消耗

font-size

  • 关键字
    • small,medium,large
  • 长度
    • px,em
  • 百分数
    • 相对于父元素大小

行高line-height

行高不带单位表示字体的几倍大小

屏幕截图_20230118_010946.png

将文字集中写样式:

屏幕截图_20230118_011209.png

文字排布

text-align

spacing

text-index 首行缩进

text-decroation

white-space

我们可以通过 white-space 来处理文本中的空格。

  • normal(将多个空格给合并)

  • nowrap(强制不换行)

  • pre(展示所有空格)

  • pre-wrap(展示所有空格并按原来规则换行)

  • pre-line(合并空格并按原来规则换行)