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

宏猫
516 阅读9分钟

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

一、本堂课重点内容

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

二、详细知识点介绍

1.CSS简介

CSS是什么？

Cascadling Style Sheets（层叠样式表）

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

CSS基础的代码构成

如下图所示，选择器（Selector去选一个HTML标签定义样式）+属性（property,选择要修改的属性）+属性值(对属性的定义)
属性与属性值共同构成了一个声明（declaration）

写文章 - 走进前端技术栈 - CSS｜ 青训营笔记 - 掘金 和另外 4 个页面 - 个人 - Microsoft​ Edge 2023_1_16 21_25_34.png

2.CSS的使用方法

在页面中使用CSS的三种方式

  1. 外链(用link标签去使用CSS文件进行渲染)
  2. 嵌入(用style标签直接写CSS的代码渲染)CodePen Embed - 青训营/CSS/最简Demo
  3. 内联（HTML有全局属性syle,我们可以直接在HTML标签中直接用style来写CSS代码） 不推荐使用内联！！！

写文章 - 走进前端技术栈 - CSS｜ 青训营笔记 - 掘金 和另外 4 个页面 - 个人 - Microsoft​ Edge 2023_1_16 21_25_34.png 现在通常使用组件式的开发，使用Vue写在一个单文件里面，也可以做到样式与内容的分离，也做到关注点分离。

CSS是如何工作的？

写文章 - 走进前端技术栈 - CSS｜ 青训营笔记 - 掘金 和另外 4 个页面 - 个人 - Microsoft​ Edge 2023_1_16 21_29_33.png

3.CSS的选择器

选择器（selector）的作用

  • 找出页面中的元素，以便给他们设置样式（name,id）
  • 使用多种方式去选择元素
  1. 按照标签名，类名或者ID
  2. 按照属性
  3. 按照DOM树中的位置

通配选择器

*{} *指代所有标签
CodePen Embed - 青训营/CSS/统配选择器

标签选择器

p/h1....标签指定样式
CodePen Embed - 青训营/CSS/标签选择器

id选择器

id作为全局属性，可以给任一标签设定id来使用style直接引用id设定样式（id要唯一） CodePen Embed - 青训营/CSS/ID选择器

类选择器

给同一类型的HTML标签设定样式的时候，可以给这些同一类型设定全局属性class来方便设定这一类的统一样式（同样使用style来实现） class可以出现多次，比较常用
CodePen Embed - 青训营/CSS/类选择器

属性选择器

通过一些标签的属性去选择标签设定样式，例如input的disable就可以使用style的[disable]去选中标签设定样式，表示有disable这个属性就可以去选中它
CodePen Embed - 青训营/CSS/属性选择器
如果想让选定属性是一个特定的值时再选中进行样式显示的话，我们可以写成如下 CodePen Embed - 青训营/CSS/属性选择器2
也可以对属性值做一些匹配
a[href^="#"]，表示这个href的属性值以#号开头的话就可以匹配的上
a[href$=".jpg"]，表示href的属性值以.jpg结尾就可以匹配上
CodePen Embed - 青训营/CSS/属性选择器3

伪类（pseudo-classes）选择器

还可以不通过属性选择属性，我们通过伪类（pseudo-classes）这种去选择标签元素

  • 不基于标签和属性定位元素
  • 分为状态伪类和结构性伪类

状态伪类

状态型的伪类不是说具体指某个元素，这个元素还要处与某种特定的状态下，才会被选中
举例子，链接分为访问过的链接（跟非访问的颜色不一样）和非访问过的链接，鼠标选中链接（一般移到链接上面会变黄），和没有选中的不同状态都可以使用伪类进行修改样式

  • a:link默认样式
  • a:visited访问过的样式
  • a:hover鼠标移上去之后显示的样式
  • a:active鼠标按下去之后的显示样式

除了链接之外，其他标签也有多种状态，比如输入框input
默认状态，没点过、点击文字框之后可以输入文字的focus状态
:focus{outline:2px solid orange} outline是选定边框的属性，当被选中时，设定2像素橘色边框，值得注意是链接在按下去之后，也是focus状态。

CodePen Embed - 青训营/CSS/状态伪类

结构性伪类

根据dom结点在dom树中出现的相对位置来决定是否选中这个标签（来改变样式）

  1. 阿凡达
  2. 泰坦尼克号
  3. 星球大战：原力觉醒
  4. 复仇者联盟 3
  5. 侏罗纪世界
对于这样的有序列表来说，我们想给排名第一的列表项目加样式，其他排名就不动，这么做呢?
使用li:first-child来选中它，也可以用li:last-child来选中排名最后一名的列表项目， border-bottom:none;表示没有下边框的意思

CodePen Embed - 青训营/CSS/结构性伪类

4.组合

组合简介

对于前面的讲到的属性，类，我们可以组合的方式把他们放一块来调整样式
在下面例子中，<input>设定了class=error,<span>标签也设定了class=error
在下面的<style>中，.error可以对input标签的输入框改成红色,也可以对后面span的字体改成红色，
如果我们用input.error表示既要是input又要是error二个条件都满足才显示红色
CodePen Embed - 青训营/CSS/组合器

组合类型

那么组合有哪些类型呢？如下图所示

走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_00_17.png 使用例子：
article p{}表示article下的所有p标签
article >p表示article下直接的p标签（article嵌套里面遇到的第一个p标签）
h2+p表示h2后紧跟着的p标签
CodePen Embed - 青训营/CSS/组合器

选择器组

有些时候想同时设定多个选择器，可以用,分隔

走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_02_56.png

5.颜色

RGB的组成

都是0即是黑色
都是255即是白色
具体怎么写颜色的值呢？rgb(红0-255,绿0-255,蓝0-255)
或者#红红绿绿蓝蓝（每个颜色都是2个16进制字符（转化成10进制还是0-255的范围），#8fac87,不区分大小写）
CodePen - 青训营/CSS/RGB (cdpn.io)

颜色-HSL

H代表Hue（色相），色彩的基本属性，取值0-360
S代表Saturation（饱和度）,色彩的鲜艳程度，越高越鲜艳，0-100%
L代表Lightness(亮度),色彩的明亮程度，越高颜色越亮，范围0-100%
即通过Hsl来设定颜色，更加直观的可以调整hsl(Hue,Saturation,Lightness)

调整按钮颜色的话，点击变色的效果，用hsl该后面二个颜色的参数就更方便一些

还可以指定元素的名字（值），但是不常用，因为一般记不住，只能记很纯的颜色 CodePen - 青训营/CSS/HSL (cdpn.io)
CodePen - 青训营/CSS/颜色关键字 (cdpn.io)

颜色-透明度

alpha(透明度)可以理解成不透明度，因为调低是透明（0透明），调高不透明（1不透明）
表现方式#ff0000ff
rgba(255,0,0,1)
hsla(0,100%,50%,1)
a可以省略实际生（新版浏览器）
CodePen - 青训营/CSS/alpha (cdpn.io)

6.字体

字体的使用

通过font-family来设置字体
CodePen Embed - RwLeLWy
为什么要设置多个字体？因为要在不同的设备上面使用，不同的设备可以有的字体是有限的，所以我们可以指定多个字体，多个字体从前到后设备有的就用，没有就往后面换
sans-serif不是具体的字体，实际上是一个通用的字体组，CSS有5种的通用的字体组，如下图所示

走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_10_02.png

  • serif线条不均一，有钩示
  • sans-serif线条均匀，简洁
  • Monospace等宽字体一般编程用，所有字体的宽度一样 组 走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_12_31.png tips:每次设置字体的时候，最好在最后设置通用的字体组，因为这样你设置的字体设备中万一都没有的时候，浏览器会去设备中找一个通用的来显示，至少不容易出错

在中英文混排的时候，最好英文字体写在中文字体前面，实际浏览器渲染会按逐个的字符去找对应的这个字符有没有我所指定的字体，如果中文字体（微软雅黑）放在英文字体（comic sans MS)前面，所有的英文都会用中文字体显示，如果英文放前面，中文放后面的话（一些英文字体里面没有中文字，这样遇到英文会用英文字体，中文会跳过英文字体，用中文字体来显示）

Wed-fonts的使用

如果实在是想显示效果，我们可以把字体文件放在服务器上面（Wed-fonts）

@font-face{
font-family:"Megrm";
src:url(字体链接)}
只不过会有性能上的开销
CodePen Embed - 青训营/CSS/WebFonts
中文字体也可以使用wed-fonts
CodePen Embed - 青训营/CSS/中文WebFonts
注意：中文的字体包比较大，对性能消耗大，可以对字体进行拆解，用到的就放浏览器加载，不用的直接丢了

font-size属性

CodePen Embed - 青训营/CSS/font-size

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

section将其中全部的字体大小设置为20像素
section h1的2em是相对的概念，即20*2=40像素的字体大小（与父元素字体大小相×）
section .note将类为note的字体大小设置为父级大小的80%

front-style属性

CodePen Embed - 青训营/CSS/斜体
可以给字体效果,font-style:italic（表示斜体） normal（正常）

front-weight属性

CodePen Embed - 青训营/CSS/字重
front-weight属性(从100-900)字重的意思
用来设置字体的粗细 正常normal表示400
粗体bold表示700
设置无效，可能是字体本身就没设计出这么多字重在字体库里面

line-height(行高)

二行文字的基准线之间的距离
行高一般表示字体大小的多少倍，h1大小30,行高45，即1.5倍的行高

走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_23_25.png

前面的所有属性都可以变成一个属性(即font) 在font里面这些属性都可以写进去

走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_24_07.png

空格处理

HTML对连续的多个空格会合成一个
怎么处理？

  • normal吃空格，多个只显示一个空格
  • nowrap强制不换行
  • pre保留所有的格式
  • pre-wrap一行显示不下，会自动换行，同时保留空格
  • pre-line需要合并空格，但是保留换行（你怎么换就怎么显示）

走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_26_34.png 走进前端技术栈 - CSS - 掘金 和另外 5 个页面 - 个人 - Microsoft​ Edge 2023_1_16 22_26_09.png

7.调试CSS

浏览器快捷键F12和cttrl+shift+I看下面的样式就可以看CSS代码了

三、课后个人总结：

我认为这次CSS的学习所学习的很多知识都可以总结成一个字：表现，在上节课学完HTML之后，我们就需要学习CSS将HTML干干的内容对其表现形式做出设定，当整个网页变得美观，易读，我们前端服务号用户的职责就已经算是成功一半了。

avatar
文章
阅读
粉丝