笔记标题 ｜ 青训营笔记

笨鱼fly
67 阅读6分钟

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

前端与 HTML | 青训营笔记

前端入门-基础语言篇

2.走进前端技术栈-CSS

1.CSS是什么？

Cascading Style Sheets 层叠样式表

用来定义页面元素的样式：

设置字体和颜色

设置位置和大小

添加动画效果

image-20230116105133083

2.在页面中使用CSS

image-20230116105348339

3.CSS是如何工作的

image-20230116105633563

4.调试CSS

1、MDN上的CSS

CSS层叠样式表

HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局

使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果

一.CSS第一步

1.CSS用来干什么？

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等

一份文档是由标记语言组织起来的文本文件 —— HTML 是最常见的标记语言，但你可能也听说过其他可标记 语言，如 SVG 或 XML。

展示一份文档给用户实际上是将文档变成用户可用的文件。Browsers：如 Firefox，Chrome, 或 Edge，都可 以将文档在电脑屏幕、投影仪或打印机等设备上进行可视化。

CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。

它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。

它甚至还可以用来做一些特效，比如动画。

2.CSS语法

h1 {
    color: red;
    font-size: 5em;
}

语法由一个 选择器 (selector)起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题`` (en-US)）添加样式。

接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性 (properties) (en-US) 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。

备注： 在 MDN 上的 CSS reference 页面列举了所有的 CSS 属性页面（同时也包括其它的 CSS 特性）。另外，当你想要寻找一个 CSS 特性的更多内容时，多使用你的搜索引擎来搜索 "mdn css-feature-name" 。例如，搜索 "mdn color" 和 "mdn font-size"！

3.CSS模块

CSS 由许多模块 (modules) 构成

举个具体点的例子：如上文中的 Backgrounds and Borders 模块 — 你会发现 background-color 和 border-color 这两个属性在逻辑上相通。并且它也确实如此。

4.CSS规范

所有的标准 Web 技术 (HTML, CSS, JavaScript 等) 都被定义在一个巨大的文档中，称作 规范 specifications (或者简称为 "specs")，它是由 (像是 W3C (en-US), WHATWG, ECMA 或 Khronos (en-US)) 这些规范化组织所发布的，其中还定义了各种技术是如何工作的。

CSS 也不例外——它是由 W3C(万维网联盟) 中的一个名叫 CSS Working Group 团体发展起来的。这个团体是由浏览器厂商和其他公司中对 CSS 感兴趣的人作为代表组成的。也有其他的人员，比如受邀专家 (invited experts) ，他们作为不从属于任何组织的独立声音加入团体。

新的 CSS 特性被开发出来，或是因为某个浏览器热衷于开发新功能，或是因为 Web 设计人员与开发者要求增加一个新特性，又或是 CSS Working Group 内部的讨论决定。CSS 始终在发展，并伴随着新的特性。然而，有一件事情从始至终都未改变，那就是不让新的改变破坏旧的网站，即使是 2000 年建立的网站，如今也能正常访问！

作为一个 CSS 新手，你会发现阅读 CSS 规范 中的内容非常吃力——它旨在为工程师在用户代理 (user agents) 中实现对 CSS 各种特性的支持，而不是作为一本为 Web 开发者理解 CSS 内容的教程。即使是有经验的开发者，也更倾向于使用 MDN 文档或者其它教程。但是，知晓它的存在，理解 CSS、规范 和 浏览器支持（见下文）之间的关系是很有价值的。

5.浏览器支持

当一个浏览器支持 CSS 后，我们就可以用它来进行 Web 开发了。这意味着我们写在 CSS 文件中的代码可以被指令执行，展示到荧幕中。在 CSS 如何工作一节中我们会学习到更多的相关知识。但是让所有的浏览器都同时支持一个 CSS 新特性是不现实的，通常都会一个空档期——一些浏览器已经支持而另一些仍未支持。因此，查看特性的实现状态是非常有用的。在 MDN 上的每个属性的页面中都标有它们对应的状态，你可以通过这种方法来查看你是否可以去使用它

6.image-20230116215950912

image-20230116221951622

二.CSS构建基础

三.样式化文本

四.CSS排版

3.深入CSS（上）

  1. CSS 选择器的特异度
  2. CSS 继承
  3. CSS 求值过程解析
  4. CSS 布局方式及相关技术

4.深入CSS（下）

image-20230116151926179

  1. CSS 盒模型 - 行级

    1.行级排版上下文

    A、IFC：Inline Formatting Context

    B、只包含行级盒子的容器会创建一个IFC

    C、IFC内的排版规则：

    a、盒子在一行内水平摆放

    b、一行放不下时，换行显示

    c、text-align决定一行内盒子的水平对齐

    d、vertical-align决定一个盒子在行内的垂直对齐

    e、避开浮动（float）元素*

  2. CSS 盒模型 - 块级

1.块级排版上下文

A、BFC：Block Formatting Context

B、某些容器会创建一个BFC：

a、根元素

b、浮动、绝对定位、inline-block

c、Flex子项和Grid子项

d、overflow值不是visible的块盒

e、display：flow-root

C、BFC内的排版规则：

a、盒子从上到下摆放

b、垂直margin合并

c、BFC内盒子的margin不回与外面的合并

d、BFC不会和浮动元素重叠

avatar
文章
阅读
粉丝