寒假提升｜ Day3 CSS 第一部分 #629

2022-12-14T16:08:02Z

giscus[bot]
bot Dec 14, 2022

寒假提升｜ Day3 CSS 第一部分

本系列文章将会记录寒假期间的学习计划，主要是知识点和同学们当前进度的检查。

https://icodeq.com/2022/5daa3ac54db2/

zkeq · 2022-12-14T16:08:58Z

zkeq
Dec 14, 2022 — with giscus
Maintainer

今日打卡：

- 一. 说说你对元素语义化的理解
- 二. 说说你对SEO的理解
- 三. 什么是字符编码？
- 四. CSS编写样式的方式以及应用场景
- 五. 最常见的CSS样式以及作用
- 六. 自行查找2个案例练习
	根据之前学习的HTML元素和CSS样式找2个案例练习
- 七. 颜色的表示方式
	每个同学自己总结;

2 replies

Nihaoseteve Dec 15, 2022 — with giscus

元素的语义化：用正确的元素做正确的事情。
优点：
方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
有利于SEO；元素的样式内联样式（inline style）
内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）
作用
内联样式表存在于HTML元素的style属性之中
将CSS放在HTML文件元素里的
外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来
background-color决定背景色
color属性用来设置文本内容的前景色；包括文字、装饰线、边框、外轮廓等的颜色
颜色关键字（color keywords）：是不区分大小写的标识符，它表示一个具体的颜色；
RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；  RGB各个原色的取值范围是 0~255；

zkeq Dec 20, 2022 — with giscus
Maintainer

不错

penndu · 2022-12-14T18:12:00Z

penndu
Dec 14, 2022 — with giscus

日常打卡！

1 reply

zkeq Dec 15, 2022 — with giscus
Maintainer

杜老师好！

wslsy12 · 2022-12-15T04:44:42Z

wslsy12
Dec 15, 2022 — with giscus

第一题简答

元素的语义化：用正确的元素做正确的事情。

这样做的好处是

方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
有利于SEO；

第二题简答

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

第三题简答

利用计算机只可以直接存储和处理二进制数字的特点，制定一个统一的、标准的转换规则
即：文字——>字符编码——>计算机语言——>字符解码——>文字

第四题简答

CSS提供了3种方法，可以将CSS样式应用到元素上：

内联样式（inline style）
内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）

作用

内联样式表存在于HTML元素的style属性之中
将CSS放在HTML文件元素里的
外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来

第七题简答

background-color决定背景色
color属性用来设置文本内容的前景色；包括文字、装饰线、边框、外轮廓等的颜色
颜色关键字（color keywords）：是不区分大小写的标识符，它表示一个具体的颜色；
RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；  RGB各个原色的取值范围是 0~255；

1 reply

zkeq Dec 15, 2022 — with giscus
Maintainer

收到！好棒好棒好棒，gogogo

AAAikun · 2022-12-15T08:45:15Z

AAAikun
Dec 15, 2022 — with giscus

一. 说说你对元素语义化的理解
元素的语义化：用正确的元素做正确的事情。

这样做的好处是

方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
有利于SEO；
二. 说说你对SEO的理解
搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

三. 什么是字符编码？
利用计算机只可以直接存储和处理二进制数字的特点，制定一个统一的、标准的转换规则
即：文字——>字符编码——>计算机语言——>字符解码——>文字
四. CSS编写样式的方式以及应用场景
CSS提供了3种方法，可以将CSS样式应用到元素上

五. 最常见的CSS样式以及作用
内联样式（inline style）

内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）

外部样式表（external style sheet）

作用

内联样式表存在于HTML元素的style属性之中
将CSS放在HTML文件元素里的
外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来
六. 自行查找2个案例练习
根据之前学习的HTML元素和CSS样式找2个案例练习

七. 颜色的表示方式
background-color决定背景色
color属性用来设置文本内容的前景色；包括文字、装饰线、边框、外轮廓等的颜色
颜色关键字（color keywords）：是不区分大小写的标识符，它表示一个具体的颜色；
RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；  RGB各个原色的取值范围是 0~255；

这里养了一只kun kun 路过的ikun可以过来摸赞一次
⠀⠀⠀ ⠰⢷⢿⠄
⠀⠀⠀⠀⠀⣼⣷⣄
⠀⠀⣤⣿⣇⣿⣿⣧⣿⡄
⢴⠾⠋⠀⠀⠻⣿⣷⣿⣿⡀
⠀ ⢀⣿⣿⡿⢿⠈⣿
⠀⠀⠀⢠⣿⡿⠁⠀⡊⠀⠙
⠀⠀⠀⢿⣿⠀⠀⠹⣿
⠀⠀⠀⠀⠹⣷⡀⠀⣿⡄
⠀⠀⠀⠀⣀⣼⣿⠀⢈⣧

2 replies

Future330 Dec 15, 2022 — with giscus

6

zkeq Dec 20, 2022 — with giscus
Maintainer

不错，下次注意排版格式

Future330 · 2022-12-15T08:53:50Z

Future330
Dec 15, 2022

一. 说说你对元素语义化的理解

用正确的元素做正确的事情

二. 说说你对SEO的理解

搜索引擎优化是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。
三. 什么是字符编码？
利用计算机只可以直接存储和处理二进制数字的特点，制定一个统一的、标准的转换规则
- 即：文字——>字符编码——>计算机语言——>字符解码——>文字
为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字。
四. CSS编写样式的方式以及应用场景
内联样式
- 内联样式表存在于 HTML 元素的 style 属性之中。

内部样式
- 将 CSS 放在 HTML 文件 <head> 元素里的 <style> 元素之中。

外部样式
- 外部样式表 (external style sheet) 是将 css 编写一个独立的文件中，并且通过 <link> 元素引入进来；
  1. 第一步：将 css 样式在一个独立的 css 文件中编写 (后缀名为.css);
  2. 第二步：通过 <link> 元素引入进来；
- link
- @import
五. 最常见的CSS样式以及作用
font-size : 文字大小
color : 前景色 (文字颜色)
background-color : 背景色
width : 宽度
height : 高度
等等……...............................

六. 自行查找2个案例练习

七. 颜色的表示方式：

color keywords(颜色关键字)
RGB
- 十六进制: #aabbcc;
- 缩写: #abc
- 函数: rgb(0~~255, 0~~255, 0~255)

3 replies

AAAikun Dec 15, 2022 — with giscus

6
⠀ ⠰⢷⢿⠄
⠀⠀⠀⠀⠀⣼⣷⣄
⠀⠀⣤⣿⣇⣿⣿⣧⣿⡄
⢴⠾⠋⠀⠀⠻⣿⣷⣿⣿⡀
⠀ ⢀⣿⣿⡿⢿⠈⣿
⠀⠀⠀⢠⣿⡿⠁⠀⡊⠀⠙
⠀⠀⠀⢿⣿⠀⠀⠹⣿
⠀⠀⠀⠀⠹⣷⡀⠀⣿⡄
⠀⠀⠀⠀⣀⣼⣿⠀⢈⣧

Future330 Dec 15, 2022 — with giscus

小黑子没你6

zkeq Dec 15, 2022
Maintainer

你小子，再发举报了

Wanderlus · 2022-12-15T09:23:22Z

Wanderlus
Dec 15, 2022 — with giscus

一. 说说你对元素语义化的理解

元素的语义化：用正确的元素做正确的事情。

这样做的好处是

方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
有利于SEO；

二. 说说你对SEO的理解

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

三. 什么是字符编码？

利用计算机只可以直接存储和处理二进制数字的特点，制定一个统一的、标准的转换规则
即：文字——>字符编码——>计算机语言——>字符解码——>文字

四. CSS编写样式的方式以及应用场景

CSS提供了3种方法，可以将CSS样式应用到元素上

五. 最常见的CSS样式以及作用

内联样式（inline style）
内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）

作用
- 内联样式表存在于HTML元素的style属性之中
- 将CSS放在HTML文件元素里的
- 外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来

六. 自行查找2个案例练习

根据之前学习的HTML元素和CSS样式找2个案例练习

七. 颜色的表示方式

background-color决定背景色
color属性用来设置文本内容的前景色；包括文字、装饰线、边框、外轮廓等的颜色
颜色关键字（color keywords）：是不区分大小写的标识符，它表示一个具体的颜色；
RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；  RGB各个原色的取值范围是 0~255；

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

好棒！

W-princess · 2022-12-15T10:36:52Z

W-princess
Dec 15, 2022 — with giscus

一. 说说你对元素语义化的理解
元素的语义化：用正确的元素做正确的事情。

这样做的好处是

方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
有利于SEO；
二. 说说你对SEO的理解
搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

三. 什么是字符编码？
利用计算机只可以直接存储和处理二进制数字的特点，制定一个统一的、标准的转换规则
即：文字——>字符编码——>计算机语言——>字符解码——>文字
四. CSS编写样式的方式以及应用场景
CSS提供了3种方法，可以将CSS样式应用到元素上

五. 最常见的CSS样式以及作用
内联样式（inline style）

内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）

外部样式表（external style sheet）

作用

内联样式表存在于HTML元素的style属性之中
将CSS放在HTML文件元素里的
外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来
六. 自行查找2个案例练习
根据之前学习的HTML元素和CSS样式找2个案例练习

七. 颜色的表示方式
background-color决定背景色
color属性用来设置文本内容的前景色；包括文字、装饰线、边框、外轮廓等的颜色
颜色关键字（color keywords）：是不区分大小写的标识符，它表示一个具体的颜色；
RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；  RGB各个原色的取值范围是 0~255；

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很不错，下次注意排版格式

Tqrepeoti · 2022-12-15T10:55:43Z

Tqrepeoti
Dec 15, 2022 — with giscus

说说你对元素语义化的理解

元素的语义化：用正确的元素做正确的事情。
语义化的好处
- 方便代码维护；
- 减少让开发者之间的沟通成本；
- 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；

说说你对SEO的理解

通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

[

什么是字符编码？

在计算机上表示、存储和处理像文字、符号等等之类的字符，将这些字符转换成二进制。

CSS编写样式的方式以及应用场景

内联样式（inline style），也称行内样式。
内联样式表存在于HTML元素的style属性之中。
```
<div style="color:red; font-size:20px;">
 我是div元素
</div>
```

内部样式表（internal style sheet）
将CSS放在HTML文件元素里的<style>元素之中。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .title {
        margin: 20px 0;
        font-size: 24px;
        font-weight: 700;
      }
      .box {
         width: 100px;
         height: 100px;
         background-color: red;
      }
    </style>
</head>

外部样式表（external style sheet）
是将css编写一个独立的文件中，并且通过元素引入进来；

最常见的CSS样式以及作用

font-size : 文字大小
color : 前景色 (文字颜色)
background-color : 背景色
width : 宽度
height : 高度

颜色的表示方式

color keywords (颜色关键字)
RGB[A]
- 十六进制: #RRGGBB[AA]
- 缩写: #RGB[A]
- 函数: rgb[A](0~255, 0~255, 0~255)

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

好棒好棒 gogogo

lhaa1 · 2022-12-15T11:30:36Z

lhaa1
Dec 15, 2022 — with giscus

说说你对元素语义化的理解

用正确的元素做正确的事情。
理论上来说，所有的 HTML 元素，我们都能实现相同的事情
方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应;有利于 SEO;

说说你对SEO的理解

搜索引擎优化是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

什么是字符编码？

计算机一开始发明出来时是用来解决数字计算问题的，后来人们发现，计算机还可以做更多的事，例如文本处理。

但计算机其实挺笨的，它只 “认识” 010110111000… 这样由 0 和 1 两个数字组成的二进制数字；
这是因为计算机的底层硬件实现就是用电路的开和闭两种状态来表示 0 和 1 两个数字的。
因此，计算机只可以直接存储和处理二进制数字。
为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字。
- 当然，肯定不是我们想怎么转换就怎么转换，否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况，因此必须得定一个统一的、标准的转换规则

CSS编写样式的方式以及应用场景

CSS提供了3种方法，可以将CSS样式应用到元素上

最常见的CSS样式以及作用

内联样式(inline style)
内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
外部样式表(external style sheet

作用

内联样式表存在于HTML元素的style属性之中
将CSS放在HTML文件元素里的
外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来

颜色的表示方式

每个同学自己总结;

RGB color 十六进制函数

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很棒

MGwaanjai · 2022-12-15T12:35:38Z

MGwaanjai
Dec 15, 2022 — with giscus

day03 作业

一. 说说你对元素语义化的理解

用正确的元素做正确的事情。

二. 说说你对SEO的理解

搜索引擎优化(SEO):是通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式。

三. 什么是字符编码？

是把字符集中的字符编码为指定集合中某一对象，以便文本在计算机中存储和通过通信网络的传递。

四. CSS编写样式的方式以及应用场景

CSS提供了3种方法，可以将CSS样式应用到元素上：

内联样式:存在于HTML元素的style属性之中
内部样式:将CSS放在HTML文件元素里的<style>元素之中。
外部样式:将css编写一个独立的文件中，并且通过link元素引入进来;

五. 最常见的CSS样式以及作用

font-size：文字大小
color：前景色（文字颜色）
background-color：背景色
width ：宽度
height：高度

七. 颜色的表示方式

颜色关键字（color keywords）：
- 是不区分大小写的标识符，它表示一个具体的颜色；

RGB颜色：
- *RGB**是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色
- RGB各个原色的取值范围是 0~255；

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很棒加油 gogogo

Beeyll · 2022-12-15T12:44:31Z

Beeyll
Dec 15, 2022

一. 说说你对元素语义化的理解

元素的语义化 : 用正确的元素做正确的事情。
理论上来说，所有的 HTML 元素，我们都能实现相同的事情:

好处：

方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应； 有利于 SEO;

二. 说说你对SEO的理解
搜索引擎优化 (英语:search engine optimization，缩写为 SEO ) 是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。
在后续我们还会讲解 SPA 以及 SSR` 相关的概念
- 它们也有 SEO、首屏渲染速度有关；

三. 什么是字符编码？

字符编码的发展历史（文章）：https://www.jianshu.com/p/899e749be47c

四. CSS编写样式的方式以及应用场景

CSS 表示层叠样式表(Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表)，是为网页添加样式的代码。
CSS 是一种语言吗？(知道即可)
- MDN 解释: CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言；
- 维基百科解释：是一种计算机语言，但是不算是一种编程语言；

编写样式：
1.内联样式(inline style)，也有人翻译成行内样式。

内联样式表存在于 HTML 元素的 style 属性之中。

CSS 样式之间用分号 ; 隔开，建议每条 CSS 样式后面都加上分号 ;
很多资料不推荐这种写法:
- \1. 在 原生的HTML编写 过程中确实这种写法是不推荐的
- \2. 在 Vue的template 中某些动态的样式是会使用内联样式的；

2.内部样式表(internal style sheet)

将 CSS 放在 HTML 文件 <head> 元素里的 <style> 元素之中。

3.外部样式表(external style sheet) 是将 css 编写一个独立的文件中，并且通过元素引入进来；

使用外部样式表主要分成两个步骤:
- 第一步：将 css 样式在一个独立的 css 文件中编写 (后缀名为.css);
- 第二步：通过元素引入进来；

应用场景：

CSS 的出现是为了美化 HTML 的，并且让结构 (HTML) 与样式 (CSS) 分离；

为 HTML 添加各种各样的样式，比如颜色、字体、大小、下划线等等；
对 HTML 进行布局，按照某种结构显示 (CSS 进行布局 – 浮动、flex、grid);
五. 最常见的CSS样式以及作用
样式：
内联样式(inline style)
内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
外部样式表(external style sheet)
作用：
font-size : 文字大小
color : 前景色 (文字颜色)
background-color : 背景色
width : 宽度
height : 高度
background-color 决定背景色
color 属性用来设置文本内容的（包括文字、装饰线、边框、外轮廓等的颜色）

CSS 属性的官方文档
CSS 官方文档地址

https://www.w3.org/TR/?tag=css
CSS`推荐文档地址:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95
-由于浏览器版本、 CSS 版本等问题，查询某些 CSS 是否可用:
可以到 https://caniuse.com/ 查询 CSS 属性的可用性；
这个网站在后续的 browserlist 工具中我们再详细说明；
六. 自行查找2个案例练习

七. 颜色的表示方式

color keywords (颜色关键字)
RGB
- 十六进制: #aabbcc;
- 缩写: #abc
- 函数: rgb(0~255, 0~255, 0~255)
在 CSS 中，颜色，有以下几种表示方法:
颜色关键字 (color keywords):
- 是不区分大小写的标识符，它表示一个具体的颜色；
- 可以表示哪些颜色呢？
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E8%AF%AD%E6%B3%95
RGB 颜色:
- RGB 是一种色彩空间，通过 R(red，红色)、G(green，绿色)、B(blue，蓝色) 三原色来组成了不同的颜色；
- 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；
- RGB 各个原色的取值范围是 0~255;

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

好棒很详细 gogog

Aueve · 2022-12-15T13:32:41Z

Aueve
Dec 15, 2022 — with giscus

作业：

day03 作业布置

一. 说说你对元素语义化的理解

用正确的元素去做正确的事情

方便程序员进行代码维护和修改

有利于SEO的优化

二. 说说你对SEO的理解

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式

三. 什么是字符编码？

也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉冲），以便文本在计算机中存储和通过通信网络的传递。

四. CSS编写样式的方式以及应用场景

一共有三种方法
- 内联样式
  - 应用于放在HTML某个元素中的使用
- 内部样式
  - 应用于HTML中head里面进行样式添加
- 外部样式
  - 将样式编写放在一个独立的css文件中，在HTML中使用link元素进行链接外部这个css资源

五. 最常见的CSS样式以及作用

font-size：文字大小
background-color：背景色
color：前景色
width：宽度
height：高度

六. 自行查找2个案例练习

根据之前学习的HTML元素和CSS样式找2个案例练习

七. 颜色的表示方式

每个同学自己总结;
- color keywords：red/blue/white
- rgb：rgb(0-255,0-255,0-255)
  - #aabbcc

笔记：

初识css

css的编写
- 声明一个（Declaration）一个单独的css规则，例如color：red；用来指定添加的css样式
  - 属性值（Property name）：要添加的css规则的名称；
  - 属性值（Property value）：要添加的css规则的值；
css的应用方式（三种），可以将css样式应用到元素：
- 内联样式（inline style）
- 内部样式表（internal style sheet）、文档样式表（dovument style sheet）、内嵌样式表（embed style sheet）
- 外部样式表（external style sheet）
  
  内联样式，也有人翻译成行内样式。
- 内联样式只存在HTML元素的style属性之中。
如下面代码

<div style="color= red; font-size="60px; background-color= red;">
    
</div>

css样式之间用分号；隔开，建议每条css样式后都加上分号；

内部样式表（internal style sheet）

将css放在HTML文件中元素里面的<style>元素之中

外部样式表（external style sheet）

外部样式表是将css编写在一个独立的文件中，并且通过元素引进进来
使用外部样式表主要分为两个步骤
- 第一步：将css样式在一个独立的css文件中编写（后缀名为.css）
- 第二步：通过元素引进进来；

@import

可以在style元素或者css文件中使用@import导入其他css资源

css的注释

css代码也可以添加注释来方便阅读
- css的注释和html的注释是不一样的；
- /注释内容/

常见的css元素

必须掌握的css属性

必须掌握的css属性
- 再开发中90%的时间写的都是这些属性；
css的官方查阅网站
- https://www.w3.org/TR/?tag=css
css推荐文档地址（mdn）
- https://developer.mozilla.org/zhCN/docs/Web/CSS/Reference#%E5%85%B3%E9%94%AE%E5%AD%97%E7%B4%A2%E5%BC%95

目前需要掌握的css属性

最基础最常用的css属性
- font-size：文字大小
- color：前景色
- background-color：背景色
- width：宽度
- height：高度

元素语义化

用正确的代码去做正确的事

字符串编码

计算机本质01010110
编码/解码
历史：文章链接

颜色的表示方式

color keywords(颜色关键字)
RGB
- 十六进制：#aabbcc
- 缩写：#abc
- 函数：rgb(0~~255,0~~255,0~255)

浏览器的渲染流程

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很棒不错好详细啊加油！

ljltd · 2022-12-15T14:58:55Z

ljltd
Dec 15, 2022

一. 说说你对元素语义化的理解

用正确的元素做正确的事情。

二. 说说你对SEO的理解

搜索引擎优化 (英语:search engine optimization，缩写为 SEO ) 是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

三. 什么是字符编码？

计算机它只 “认识” 010110111000… 这样由 0 和 1 两个数字组成的二进制数字

为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字

当然，肯定不是想怎么转换就怎么转换，否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况，因此必须得定一个统一的、标准的转换规则

这个规则就是字符编码

四. CSS编写样式的方式以及应用场景

内联样式(inline style)

在 Vue的template 中某些动态的样式是会使用内联样式的；

内部样式表(internal style sheet)

在 Vue 的开发过程中，每个组件也会有一个 style 元素，和内部样式表非常的相似 (原理并不相同)

外部样式表 (external style sheet)

当一种css样式想要同时应用到多个网页时比较适用

五. 最常见的CSS样式以及作用

font-size : 文字大小
color : 前景色 (文字颜色)
- 用来设置文本内容
- 包括文字、装饰线、边框、外轮廓等的颜色
background-color : 背景色
width : 宽度
height : 高度

六. 自行查找2个案例练习

七. 颜色的表示方式

颜色关键字 (color keywords):

是不区分大小写的标识符，它表示一个具体的颜色

RGB 颜色:

RGB是一种色彩空间，通过R(red，红色)、G(green，绿色)、B`(blue，蓝色) 三原色来组成了不同的颜色；

也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色；

RGB 各个原色的取值范围是 0~255;

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

好棒可以的加油！

vionchina · 2022-12-16T12:22:25Z

vionchina
Dec 16, 2022

day3

一. 说说你对元素语义化的理解

用正确的元素做正确的事情。

二. 说说你对SEO的理解

搜索引擎优化(SEO):是通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式。

三. 什么是字符编码？

是把字符集中的字符编码为指定集合中某一对象，以便文本在计算机中存储和通过通信网络的传递。

四. CSS编写样式的方式以及应用场景

CSS提供了3种方法，可以将CSS样式应用到元素上：

内联样式:存在于HTML元素的style属性之中
内部样式:将CSS放在HTML文件元素里的<style>元素之中。
外部样式:将css编写一个独立的文件中，并且通过link元素引入进来;

五. 最常见的CSS样式以及作用

font-size：文字大小
color：前景色（文字颜色）
background-color：背景色
width ：宽度
height：高度

六.

七. 颜色的表示方式

颜色关键字（color keywords）：
- 是不区分大小写的标识符，它表示一个具体的颜色；
RGB颜色：
- *RGB**是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色；也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色
- RGB各个原色的取值范围是 0~255；

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很棒很详细可以的

Lovehmj · 2022-12-16T12:59:58Z

Lovehmj
Dec 16, 2022 — with giscus

2 replies

zkeq Dec 20, 2022 — with giscus
Maintainer

下次直接发markdown到评论区不要截图，不要用记事本记笔记哈

zkeq Dec 20, 2022 — with giscus
Maintainer

还是不错的

HyggeJohn · 2022-12-16T14:15:03Z

HyggeJohn
Dec 16, 2022 — with giscus

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

下次直接发 markdown ，复制 markdown 到评论区不要截图！

还是很不错的，gogogo

zhixu001 · 2022-12-16T16:55:51Z

zhixu001
Dec 16, 2022 — with giscus

day3:内容回顾

一. 知识点补充

1.1. 元素语义化

用正确的元素去做正确的事情

不要全部用div

1.2. SEO优化

SEO原理

通过修改网站关键词提高网站在搜索引擎的排名！
过程/流程
什么是SEO

1.3. 字符串编码

计算机的本质010101

机器只认识二进制的字符（所以需要将人类的语言转化成机器编码》》再整成二进制计算机才可以）
编码/解码
历史: 文章链接(了解)

二. 邂逅CSS

2.1. 认识CSS

CSS的概念

{层叠样式表：是为网页添加样式的代码<是计算机语言但不是编程语言>}
作用: 美化网页
- 方式一: 添加各种样式;
- 方式二: 布局;
历史:
- CSS3 -> Modules

2.2. CSS规则

属性名: 属性值
color:pink;
名称:值;

2.3. 三种编写规则

内联样式
内部样式（文档，内嵌）相对来说用的最多了
外部样式
- link
- @import

2.4. CSS中的注释

/* 注释 */

不是很熟练的样式都添加一下注释》》{在关键的地方写注释，不需要全部写，认识的不需要注释}

2.5. 常见的CSS

Xmind
最常见的CSS
- font-size{字体大小}
- color{前景颜色}
- background-color{背景颜色}
- width{宽度}
- height{高度}

要学会查文件

w3.org

developer.mozilla

caniuse.com

2.6. 案例练习

星球介绍

有水平排布(了解)

三. 知识点补充

3.1. link元素

link链接站点图标
dns-prefetch(了解)

3.2. 进制

人类十进制
计算机: 二进制/八进制/十六进制

3.3. 颜色表示方法

color keywords(颜色关键字)
RGB
- 十六进制: #aabbcc;
- 缩写: #abc
- 函数: rgb(0~~255, 0~~255, 0~255)

3.4. Chrome调试工具

F12》右键

3.5. 浏览器的渲染流程

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

很棒可以的很详细加油 gogog

ybrxy · 2022-12-20T04:38:28Z

ybrxy
Dec 20, 2022

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

下次直接复制 markdown 到评论区哈不要截图，还是很不错的

Zhq-nb · 2022-12-22T08:13:48Z

Zhq-nb
Dec 22, 2022 — with giscus

一.说说你对元素语义化的理解

元素语义化就是用正确的元素做正确的事情。虽然在理论上，所以的 html 元素都可以通过 css 样式实现相同的事情，但是这么做会使事情复杂化，所以我们需要元素语义化来降低复杂度。

元素语义化在我们实际的开发中有很多好处，比如：

提高代码的阅读性和可维护性；
减少 coder 之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
有利于 SEO (Search Engine Optimization)

二.说说你对 SEO 的理解

SEO 就是搜索引擎优化 (Search Engine Optimization)，SEO 通过了解搜索引擎的运行规则来调整网站，以提高网站的曝光度，以及网站的排名。

Google 搜索引擎的工作流程主要分为三个阶段：

抓取：Google 会使用名为 “抓取工具” 的自动程序搜索网络，以查找新网页或更新后的网页。Google 会将这些网页的地址（即网址）存储在一个大型列表中，以便日后查看。我们会通过许多不同的方法查找网页，但主要方法是跟踪我们已知的网页中的链接。

编入索引：Google 会访问它通过抓取得知的网页，并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件，尝试了解网页的主题。这些信息存储在 Google 索引中，而 Google 索引是一个存储在海量计算机中的巨大数据库。

呈现搜索结果：当用户在 Google 上进行搜索时，Google 会尝试确定最优质的搜索结果。“最佳” 结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询。例如，在用户搜索 “自行车维修店” 后，Google 向巴黎用户显示的答案与向香港用户显示的答案有所不同。支付费用不能提高网页在 Google 搜索结果中的排名，网页排名是完全依靠算法完成的。

三.什么是字符编码？

计算机只认识 0 和 1，但我们各个国家的人都需要在计算机上使用各自的文字，为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制。

于是就出现了字符编码，字符编码将我们的自然语言编码成二进制给计算机看，然后再把这些二进制解码为自然语言给我们看。

四. CSS 编写样式的方式以及应用场景

css 有三种常用的编写方式，分别是内联样式、内部样式表和外部样式表

内联样式的应用场景：在 Vue 的 template 中某些动态的样式会使用内联样式
内部样式表的应用场景：Vue 开发中，每个组件都有一个 style 元素，使用的是内部样式表的方式，不过原理并不相同
外部样式表的应用场景：外部样式表是开发中最常用的方式，将所有 css 文件放在一个独立的文件夹中，然后通过 link 元素引入到需要的文件中.
也可以在 index.css 文件中通过 @import url (路径) 引入其他 css 样式

五.最常见的 CSS 样式以及作用

最常见的 css 样式有：

font-size：设置文字大小
color：设置前景色 (颜色)
background-color：设置背景色
width：设置宽度
height：设置高度

六.案例

0 replies

寒假提升 ｜ Day3 CSS 第一部分 #629

giscus[bot] bot Dec 14, 2022

寒假提升 ｜ Day3 CSS 第一部分

Replies: 18 comments · 23 replies

zkeq Dec 14, 2022 — with giscus Maintainer

Nihaoseteve Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus Maintainer

penndu Dec 14, 2022 — with giscus

zkeq Dec 15, 2022 — with giscus Maintainer

wslsy12 Dec 15, 2022 — with giscus

zkeq Dec 15, 2022 — with giscus Maintainer

AAAikun Dec 15, 2022 — with giscus

Future330 Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus Maintainer

Future330 Dec 15, 2022

一. 说说你对元素语义化的理解

二. 说说你对SEO的理解

三. 什么是字符编码？

四. CSS编写样式的方式以及应用场景

五. 最常见的CSS样式以及作用

六. 自行查找2个案例练习

七. 颜色的表示方式：

AAAikun Dec 15, 2022 — with giscus

Future330 Dec 15, 2022 — with giscus

zkeq Dec 15, 2022 Maintainer

Wanderlus Dec 15, 2022 — with giscus

一. 说说你对元素语义化的理解

二. 说说你对SEO的理解

三. 什么是字符编码？

四. CSS编写样式的方式以及应用场景

五. 最常见的CSS样式以及作用

六. 自行查找2个案例练习

七. 颜色的表示方式

zkeq Dec 20, 2022 — with giscus Maintainer

W-princess Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus Maintainer

Tqrepeoti Dec 15, 2022 — with giscus

说说你对元素语义化的理解

说说你对SEO的理解

什么是字符编码？

CSS编写样式的方式以及应用场景

最常见的CSS样式以及作用

颜色的表示方式

zkeq Dec 20, 2022 — with giscus Maintainer

lhaa1 Dec 15, 2022 — with giscus

说说你对元素语义化的理解

说说你对SEO的理解

什么是字符编码？

CSS编写样式的方式以及应用场景

最常见的CSS样式以及作用

颜色的表示方式

zkeq Dec 20, 2022 — with giscus Maintainer

MGwaanjai Dec 15, 2022 — with giscus

day03 作业

一. 说说你对元素语义化的理解

二. 说说你对SEO的理解

三. 什么是字符编码？

四. CSS编写样式的方式以及应用场景

五. 最常见的CSS样式以及作用

七. 颜色的表示方式

zkeq Dec 20, 2022 — with giscus Maintainer

Beeyll Dec 15, 2022

zkeq Dec 20, 2022 — with giscus Maintainer

Aueve Dec 15, 2022 — with giscus

day03 作业布置

一. 说说你对元素语义化的理解

二. 说说你对SEO的理解

三. 什么是字符编码？

四. CSS编写样式的方式以及应用场景

五. 最常见的CSS样式以及作用

六. 自行查找2个案例练习

七. 颜色的表示方式

初识css

内联样式，也有人翻译成行内样式。

内部样式表（internal style sheet）

外部样式表（external style sheet）

@import

css的注释

常见的css元素

必须掌握的css属性

寒假提升｜ Day3 CSS 第一部分 #629

giscus[bot]
bot Dec 14, 2022

寒假提升｜ Day3 CSS 第一部分

Replies: 18 comments 23 replies

zkeq
Dec 14, 2022 — with giscus
Maintainer

zkeq Dec 20, 2022 — with giscus
Maintainer

penndu
Dec 14, 2022 — with giscus

zkeq Dec 15, 2022 — with giscus
Maintainer

wslsy12
Dec 15, 2022 — with giscus

zkeq Dec 15, 2022 — with giscus
Maintainer

AAAikun
Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

Future330
Dec 15, 2022

zkeq Dec 15, 2022
Maintainer

Wanderlus
Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

W-princess
Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

Tqrepeoti
Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

lhaa1
Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

MGwaanjai
Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

Beeyll
Dec 15, 2022

zkeq Dec 20, 2022 — with giscus
Maintainer

Aueve
Dec 15, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

ljltd
Dec 15, 2022

zkeq Dec 20, 2022 — with giscus
Maintainer

vionchina
Dec 16, 2022