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

LightRain
74 阅读6分钟
这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天✌

课堂笔记

本堂课重点内容：

  • CSS 代码构成
  • CSS 使用方法
  • CSS 流程之选择器组、文本渲染
  • 调试 CSS

详细知识点介绍

CSS 的工作流程及原理

1.什么是CSS？

CSS：Cascading Style Sheet 层叠样式表

用来定义页面元素的样式

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

2.CSS 代码构成

  • 选择器（Selector）：要修饰的对象（元素）
  • 属性名（Property）：修饰对象的哪一个属性（样式）
  • 属性值（Value）：样式的取值
  • 声明（Declaration）：属性名+" ："+属性值

3.CSS引入方式

CSS有三种引入方式，分别为：外链、嵌入、内联。

1. 外链/外部样式（推荐使用）

链接式： 在html文件的<head> 中，用<link>引用css文件:

    <link rel="stylesheet" href="css/style.css">

image.png

2. 嵌入/内部样式

 在<head> 中用<style></style> 可以编写css的代码，每一个声明最好使用分号结尾。

image.png

3. 内联/行内样式（不推荐使用）

在标签中使用style属性，属性值为CSS的声明。

过于杂糅，不利于维护。

image.png

4.CSS工作原理

按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层和栅格化。 image.png

具体流程：

1.渲染进程将 HTML 内容转换为能够读懂DOM 树结构。

2.渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。

3.创建布局树，并计算元素的布局信息。

4.对布局树进行分层，并生成分层树。

5.为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分图块，并栅格化将图块转换成位图。

页面中CSS 使用方法

1.选择器Selector

  • 选定待添加样式的元素
  • 使用多种方式选择元素
    • 按照标签名、类名和id
    • 按照属性
    • 按照DOM树中的位置
  • 使用多种方式选择元素选择器种类

1. 通配选择器

通配符选择器可以匹配任何标签，常用于统一页面样式。

image.png 2.标签选择器

选择页面上所有该标签包含的元素

3.类选择器

  • 选择所有class属性一致的标签，跨标签
  • 优点：可以跨标签归类，可以复用

4.id选择器

  • 选择该id对应的标签
  • 特点：id 必须保证全局唯一

5.属性选择器

  • 选择该属性对应的所有标签元素
  • 使用[]将选中的属性包裹住
  • 可在[属性]前加特定的标签

6.伪类选择器

推荐使用顺序为link、visited、hover、active

  • :link 未访问的链接

  • :visited 已访问的链接

  • :hover 鼠标悬浮到连接上，即移动在连接上

  • :active 选定的链接，被激活

  • focus伪类选择器：focus伪类选择器用于选取获得焦点（光标）的表单元素 一多用于类表单元素

注：默认超链接为：蓝色、下划线

组合(Combinators)/复杂选择器

1. 组合/(并集)选择器（,）

  • 也称为集体声明
  • 将多个具有相同样式的选择器放在一起声明，使用逗号隔开

2. 复合/(交集)选择器（直接组合）

  • 标签选择器和类选择器、标签选择器和ID选择器，一起使用
  • 必须同时满足两个条件才能应用样式

3. 后代选择器 （空格） 不论是父子还是孙代都能应用该样式

4. 子选择器 （>）     使用CSS3中新增的 > 时必须是父子关系方可应用该样式

5. 相邻兄弟选择器 （+）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

6. 通用/后续兄弟选择器 (~)

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用 ~ 隔开。

2.颜色表达方式

1. 英文单词： 比如red，blue等

2. 十六进制值

  • 三位的十六进制；比如#F00(每个颜色由一个十六进制来表示)
  • 六位的十六进制；比如#FF0000(每个颜色由两个十六进制来表示)

3. RGB RGB三原色：RGB(255,0,0)这给定的三个参数表示红，绿，蓝的颜色值，由0到225的十进制表示 RGB，RGB(100%,0%,0%)，使用百分号表示 注：以上几种表达方式都是属于RGB色系(红，绿，蓝)

4. RGBA： 和RGB一样，只是多了一个透明度（alpha），比如RGB(255,0,0,0.5)。第四个值取值范围为0-1，0是完全透明，1是完全不透明

5. HSL： 色相、饱和度、亮度。比如HSL(360,100%,50%)。 色相：是色彩的基本属性，就是平常所说的颜色名称，比如红色等 饱和度：是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值 亮度：就是色彩的明亮程度，色彩的明度越高，色彩越亮；色彩的明度越暗，色彩越暗，取0-100%。 (当要页面要使用一个色系时，可使用HSL)

6. HSLA： 比HSL多了个透明度。

3.字体属性

属性说明属性值举例
font-family字体系列/族Georgia、宋体
font-size字体大小/尺寸16px、2em
font-style字体样式normal（普通）、italic（斜体）
font-weight字重bold、normal、100、200-normal、300-bold
font所有font属性简写书写顺序：font:font-style/font-weight/font-size/font-family

1. 字体族font-family

要求系统中要安装指定的字体 : 衬线体（Georgia、宋体）、无衬线体（Arial、黑体）、手写体（Caflisch、楷体）等。

一般建议写3种字体：首选、其次、备用。以逗号隔开.

2.字体大小font-size

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

3.字体样式font-style

定义字体是否倾斜

  • normal（普通）
  • italic（斜体）

4.字体粗细font-weight

font-weight属性一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900） 取值：

  • normal普通（默认）
  • bold粗体
  • 自定义400 normal 700 bold

4.文本属性

1.行高line-height

上一行字母或文字到下一行字母或文字底部的距离

2.white-space

设置元素中空白的处理方式。

值说明
normal默认。空白会被浏览器忽略。 合并
pre空白会被浏览器保留。
nowrap文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap保留空白符序列，但是正常地进行换行。
pre-line合并空白符序列，但是保留换行符。

调试CSS

  • 右键点击页面，选择检查
  • 使用快捷键
    • Windows：Ctrl+Shift+I
    • Mac：Cmd+Opt+I

课后个人总结

  • 不容易掌握的知识点
    • 不同选择器等的熟练运用
  • 容易混淆的知识点
    • 相邻兄弟选择器和通用兄弟选择器的元素作用范围
    • 子代和后代选择器的元素作用范围

引用参考

blog.csdn.net/weixin_4333…alltop_positive~default-1-106784229-null-null.142^v71^insert_chatgpt,201^v4^add_ask&utm_term=css

blog.csdn.net/qq_38490457…alltop_positive~default-2-108992632-null-null.142^v71^insert_chatgpt,201^v4^add_ask&utm_term=css

blog.csdn.net/dageliuqing…

avatar
文章
阅读
粉丝