HTML5、CSS、CSS3、SCSS (SASS) 相关教程

擒贼先擒王

已于 2022-07-21 16:14:23 修改

阅读量1.5k

点赞数 3

分类专栏： HTML5 文章标签： html5 前端 html

于 2017-07-26 11:22:14 首次发布

本文链接：https://blog.csdn.net/freeking101/article/details/76131635

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、HTML5 教程

W3School HTML5 教程：http://www.w3school.com.cn/html5/index.asp

菜鸟网站 HTML5教程：http://www.runoob.com/html/html5-intro.html

知乎零基础如何迅速学习HTML：https://www.zhihu.com/question/27018083

请问如何从头开始学习制作一款HTML5 小游戏？：https://www.zhihu.com/question/19954833

2、CSS 教程

有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。

HTML 中引入 CSS 方法

内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例：

<head>
<style>
.content {
background: red;
}
</style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

示例：

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

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

<style>
@import url(style.css);
</style>

比较链接方式和导入方式

链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。

link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

小结：我们应尽量使用 <link> 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。

CSS、CSS3、SCSS (SASS) 相关教程

CSS、CSS3

CSS 教程：https://www.runoob.com/css/css-tutorial.html

CSS 参考手册：https://www.runoob.com/cssref/css-reference.html

w3school css

SCSS (SASS) --- 预处理语言

Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，是一种特殊类型的 SASS(Syntactically Awesome Style Sheets)。SCSS 的脚本是在 Saasscript 中完成的。SCSS 包含 CSS 的所有功能，还添加了一些额外的特殊功能，完全兼容 CSS3 的同时继承了Sass强大的动态功能。

使用 SCSS，我们可以向 CSS 添加许多附加功能，例如变量、嵌套等。与编写传统 CSS 相比，所有这些附加功能可以使编写 CSS 变得更加容易和快捷。

在 SASS 或 SCSS 中阅读代码比在 CSS 中阅读要快。

SASS 和 SCSS 在语法方面的唯一区别是缩进 { } 的使用。换句话说，SCSS 只不过是带有缩进的 SASS。

sass 是一款强化 css 的辅助工具，在css的基础上增加了变量(variables)、嵌套(nested nutes)、混合(mixin)，导入(inline imports)等高级功能，使用Sass以及Sass的样式库(如Compass)有助于更好管理样式文件。完全兼容CSS3，通过函数进行颜色值与属性值的运算。

SCSS 对 css3 语法的基础进行拓展，所有css3语法在SCSS中都是通用的，同时加入Sass的特色功能，此外可以css hacks写法以及浏览器前缀写法(vender-specific syntax)，以及早期的IE滤镜写法。这种格式采用.scss格式写法。

官网快速入门：https://www.sass.hk/guide/

官网文档：https://www.sass.hk/docs/

SCSS简明上手指南：https://zhuanlan.zhihu.com/p/35478792

CSS Box Model (盒子模型)

CSS 在线编辑：https://tool.chinaz.com/Tools/cssdesigner.aspx

可视化 CSS 在线编辑器

：http://www.ab173.com/ui/CssDesigner.php
：http://www.zhongguosou.com/computer_question_tools/css_online_designer.html
：https://www.runoob.com/tool/css3/
：CSS样式在线编辑器：http://www.webmasterhome.cn/tool/cssDisplay.asp

所有 HTML 元素可以看作盒子，在 CSS 中，"box model "这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型 (Box Model)：

不同部分的说明：

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

为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

提示：在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

提示：参考 CSS盒子模型的内部结构可以了解更多的信息。

CSS 标准的盒子模型

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：

width 和 height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

使用 width 和 height 属性

width 和 height 属性可以设置元素的宽度和高度，定义的是元素内容区的宽度和高度，不包括填充，边框，或页边距。

属性值：

值	描述
auto	默认值。浏览器可计算出实际的宽度或高度。
length	使用 px、cm 等单位定义宽度或高度。
%	基于包含它的块级对象（父元素）的百分比宽度或高度。