学习笔记之简单了解有关 CSS 那点事儿

LZ-Says：调整心态，多读书，丰富内心，提升个人文化底蕴。

前言

前几天，初步了解了下 HTML 相关的知识点，在学习回顾时，还好，大部分都在，只是新增了一些其他内容，例如自适应等等。
上手还是有点懵逼，说白了还是有点 Low，实践较少。
根据 W3C School 整理资料进行学习，并记录此学习笔记篇。

兄弟，歇好了该干了

我们先来简短的回顾下：

首先，HTML 是由 XML 组成，其次为了规范推出 XHTML，俩者相比，后者显然具有更为严格的“审核机制”，例如比如要有文档说明、标签必须小写等等。随后，在此基础推出 HTML 5，相比前俩者，它具有自己的新特色，并能大部分兼容之前版本，随后慢慢火过一批。（LZ 个人理解，如有误，欢迎拍砖）

一个网页，根据不同业务场景具有不同的效果，那么这些效果是怎么来的呢？

CSS 指定；
JS、JQuery 设置动画等等。

暂时 LZ 能想到的只有这些，下面一起来看 CSS，关于 JS、JQuery 这里不做太多说明。

什么是 CSS？

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称；
CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译；
CSS 语法由三部分构成：选择器、属性和值： selector {property: value} ；
CSS 是由 W3C 的 CSS 工作组发布推荐和维护的，运用 CSS 样式可以让页面变得美观。

使用 CSS 的优势？

内容与表现分离；
使用 CSS 可以减少网页的代码量，增加网页的浏览速度。

如何使用 CSS？

外联式 Linking（也叫外部样式）：将网页链接到外部样式表；
嵌入式 Embedding（也叫内页样式）：在网页上创建嵌入的样式表；
内联式 Inline（也叫行内样式）：应用内嵌样式到各个网页元素；

其中，三者优先级为：内联式 > 嵌入式 > 外联式

选择器？

关于选择器，可以简单理解为就是官方为了我们开发便捷而推出的一些使用小工具。

例如，你可以花十行代码去输出十行♥️，也可以通过三行代码输出十行♥️。

.class 选择器

为所有具有指定类的元素添加样式；
使用 “.” 来选择具有包含特定值的类的元素；
类值的名称必须紧跟在点后面且多个类值可以链接在一起。

PS：如果在点之前没有元素名称，则选择器匹配包含该类值的所有元素。

#id 选择器

指定具有 id 的元素的样式；
使用 “#” 来选择具有包含特定值的 id 的元素；
id 值的名称必须紧跟在 octothorpe（＃）后面。

PS：如果没有元素名称在＃之前，则选择器匹配包含该ID值的所有元素。

*选择器

选择器选择所有元素；
选择器匹配文档中的每个元素，包括html和body元素；
选择器可用于为另一个元素内的所有元素添加样式。

element 选择器

element 选择器将样式添加到具有指定元素名称的所有元素。

。。。

等等等等，还有好多，这里就不一一列举了。

什么是 CSS 盒子模型

CSS 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述
不同部分的说明：

Margin（外边距）： Margin 没有背景颜色，它是完全透明；
Border（边框）： 边框周围的填充和内容。边框是受到盒子的背景颜色影响；
Padding（内边距）： 会受到框中填充的背景颜色影响；
Content（内容）： 盒子的内容，显示文本和图像；

CSS 轮廓（outline）：

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用；
指定了样式，颜色和外边框的宽度；
轮廓（outline）属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。

下面列举一些 LZ 截取 W3C School 为我们整理部分属性：
在这里插入图片描述
而它具有如下几个属性：

个人公众号

不定期发布博文，最近有点忙，感谢老铁理解，欢迎关注～

参考资料

W3C School 官网：https://www.w3cschool.cn/ ；
CSS 官网: http://www.w3.org/Style/CSS/ ；
CSS API 文档: http://www.w3cschool.cn/cssref ；