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

第一少帅
76 阅读3分钟

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

课程重点

  1. CSS 代码构成
  2. CSS 使用方法
  3. CSS 流程之选择器组、文本渲染
  4. 调试 CSS

CSS是什么？

  • Cascading Style Sheets----层叠样式表
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

CSS是如何工作的？

image-20230115150930060

选择器Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照DOM树中的位置

伪类（pseudo-classes）

  • 不基于标签和属性定位元素
  • 几种伪类：
    • 状态伪类
    • 结构性伪类

组合（Combinators）

名称语法说明示例
直接组合AB满足A同时满足Binput:focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A>B选中B，如果它是A的子元素section>p
兄弟选择器A~B选中B，如果它在A后且和A同级h2~p
相邻选择器A+B选中B，如果它紧跟在A后面h2+p

选择器组

image-20230115224730980

颜色-RGB

image-20230115224805474

image-20230115224824795

颜色-HSL

image-20230115224841354

image-20230115224911942

image-20230115224957570

alpha透明度

image-20230115225059796

通用字体族

  • Serif衬线体-Georgia、宋体----在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • Sans-Serif无衬线体-Arial、Helvetica、黑体、微软雅黑----字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • Cursive手写体-Caflisch Script、楷体---- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • Fantasy-Comic Sans MS，Papyrus----模仿了人类的笔迹。
  • Monospace等宽字体-Consolas、Courier、中文字体----是装饰性/俏皮的字体。

font-size

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

white-space

  • normal

    连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxes)」时是必要。

  • nowrap

    和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

  • pre

    连续的空白符会被保留。在遇到换行符或者``元素时才会换行。

  • pre-wrap

    连续的空白符会被保留。在遇到换行符或者``元素，或者需要为了填充「行框盒子 (line boxes)」时才会换行。

  • pre-line

    连续的空白符会被合并。在遇到换行符或者``元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。

break-spaces 与 pre-wrap的行为相同，除了：

  • 任何保留的空白序列总是占用空间，包括在行尾。
  • 每个保留的空格字符后都存在换行机会，包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

调试CSS

  • 右键点击页面，选择【检查】
  • 使用快捷键
    • Ctrl+shift+I（Win）
    • Cmd+Opt+I（Mac）
avatar
文章
阅读
粉丝