1、HTML5 教程
W3School HTML5 教程:http://www.w3school/html5/index.asp
菜鸟网站 HTML5教程:http://www.runoob/html/html5-intro.html
知乎 零基础如何迅速学习HTML:https://www.zhihu/question/27018083
请问如何从头开始学习制作一款HTML5 小游戏?:https://www.zhihu/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/css/css-tutorial.html
CSS 参考手册:https://www.runoob/cssref/css-reference.html
w3school css
- :https://www.w3school/css/index.asp
- :https://www.w3cschool/search?w=CSS
- :https://www.w3cschool/search?w=CSS3
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/p/35478792
CSS Box Model (盒子模型)
CSS 在线编辑:https://tool.chinaz/Tools/cssdesigner.aspx
可视化 CSS 在线 编辑器
- :http://www.ab173/ui/CssDesigner.php
- :http://www.zhongguosou/computer_question_tools/css_online_designer.html
- :https://www.runoob/tool/css3/
- :CSS样式在线编辑器:http://www.webmasterhome/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 等单位定义宽度或高度。 |
% | 基于包含它的块级对象(父元素)的百分比宽度或高度。 |
rpx ( responsive pixel)响应单位
在小程序中尺寸的大小一般用 px 或者 rpx 为单位,其中 px 就是传统意义上的像素值,不能很好的适应不同分辨率的手机,因此 rpx 出现了
- 1、rpx 可以自适应手机分辨率,适配当前机型。rpx 是微信小程序独有的、可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为750rpx。通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配。
- 2、px 是绝对大小。
rpx 和 px 之间的换算
- 在普通网页开发中,最常用的像素单位是px
- 在小程序开发中,推荐使用rpx这种响应式的像素单位进行开发
- 以 iPhone6 为例,iPhone6 的屏幕宽度为 375px,共有 750个物理像素,则 750rpx = 375px = 750 物理像素
- 得出公式:1 rpx = 0.5 px = 1 物理像素
- 举个例子:在iPhone6上,如果要绘制一个宽为100px,高为30px的盒子,换算成rpx单位,宽高分别为200rpx 和 60rpx
rpx 和 iPhone 设计稿的关系
官方建议:开发微信小程序时,设计师可以以iPhone6 作为视觉稿的标准,如果要根据iPhone6的设计稿,绘制小程序的页面,可以直接把单位 px 替换成 rpx 。例如:假设iPhone6设计稿上,要绘制一个宽高为 200px 的盒子,换算为 rpx为200rpx
以 iPhone6为设计稿标准,单位 px 直接替换成 rpx的原因
- 设计师在出设计稿的时候,出的都是二倍图,也就是说如果在这个设计稿上有一个宽高为200px的盒子,那么它最终画到页面上实际上是一个宽高为100px的盒子,那么再换算成rpx需要乘以2,就又变成了200rpx,跟设计稿上的数字是一样的,所以我们可以保持数字不变,直接将单位 px 替换成 rpx
更多推荐
HTML5、CSS、CSS3、SCSS (SASS) 相关教程
发布评论