概述
当前 WordPress
等许多开源网站大部分的主题都在使用 Google
的在线字体方案 —— Google Fonts
,Google 服务在大陆的崩溃情况使得大量的独立网站字体无法加载,大大影响到了国内相关网站的网页响应速度,现将解决方案总结如下:
解决方案一:本地加载字体包(推荐)
- 在 CSS 中找到被导入的 Google Fonts
|
|
本书籍是自己学习 HTML + CSS 前端技术的学习笔记,笔记最开始发布到个人博客,现在整理到这里方便查看。
作者在写作和整理过程中花费了大量时间和精力,另外服务器费用也是一笔不小的开支,如果你觉得我的文章和书籍对你有所帮助,可以请我喝杯咖啡或者农夫山泉:
如果在阅读过程中有任何疑问,可以去作者博客对应页面留言, 你也可以从我的体系树中找到对应文章。
现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式,喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解,我们先来普及一下什么是图像的混合模式。
要理解混合模式需要理解,图层、通道、RGB模式原理。
图层 比较好理解,就是我们的图像通过一层一层的叠加,最终形成我们所看到的图像,换句话说就是拆解图像到不同图层进行编辑。 通道 一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。
上面显示的是 RGB 通道, 每个通道的像素都代表这种种颜色从 0~255 之间的一个值,三个通道叠加就会形成这个图像,而 alpha 通道是一个虚拟通道,比如我们可以创建一个选区来生成一个 alpha 通道。
RGB模式 RGB是光色三原色,通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
目前的显示器大都是采用了 RGB 颜色标准,在显示器上,是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的,目前的电脑一般都能显示32位颜色,有一千万种以上的颜色。如下图所示,假设三个灯都不开就是 0x000000 (黑色),只开红灯就是 0xff0000 (红色),三个灯都开就是 0xffffff (白色), rgb 三个值为等值的时候如 0x666666 是灰值(没有色相),RGB 模式称之为加色模式(相加成白色)。
CSS 中的混合模式是通过 background-blend-mode
和 mix-blend-mode
实现的。
|
|
|
|
上面给 section 设置了多个背景(用逗号隔开),默认第一个背景图片在最上面(image2.gif),类似的我们可以添加多个背景。
CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素, 这样在我们设置 100% 的窗口的时候就计算起来特别麻烦,后来引入了一个 border-box
来解决这个问题。
|
|
|
|
之前我们写布局都是基于浏览器的盒模型,通过浮动的方式来排列界面的,这种方式有很多浏览器的 bug 和困扰我们的问题, 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。
flexbox 是基于两个坐标轴来实现的, 类似于 Android 中的线性布局 LinearLayout, 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;
。
flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下:
我们先来定义一个 flexbox 容器, 在里面放几个 flexitem:
|
|
|
|
在 CSS 中可以区分屏幕和打印机做不同的样式处理:
|
|
上面代码表示 screen.css
只会在设备屏幕中起作用,而 print.css
样式表只会在打印机中起作用。
在 CSS3 中除了能区分屏幕和打印机外,还可以根据屏幕的尺寸等特征来区分。
媒体类型:
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架Bulma。有了它,即使完全不懂 CSS,也可以轻而易举做出美观的网页。
我们可以使用多种方式来引入并使用bulma:
|
|
OR
使用CDN的方式:https://cdnjs.com/libraries/bulma
OR
下载css样式并引入,下载地址:https://github.com/jgthms/bulma/tree/master/css
如果你要使用图标请记得引入fontawesome
|
|
引入后还需要一些HTML格式上的要求:
|
|
|
|
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
|
|
可以使用内置属性 length 来计算字符串的长度
|
|
代码 | 输出 |
---|---|
\' | 单引号 |
\" | 双引号 |
\\ | 反斜杠 |
\n | 换行 |
\r | 回车 |
\t | tab(制表符) |
\b | 退格符 |
\f | 换页符 |
在 JavaScript 中,字符串写在单引号或双引号中,如果要在字符串中表示双引号和单引号就需要用到上面的转义字符。
|
|
JavaScrip对于网页的作用有提供网页特效、用户交互、表单验证、控制结构和样式。
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是一种脚本语言, 主要目的是动态的控制web标准中的结构和样式(结构、样式、行为)
|
|
HTML 中的脚本必须位于 <scrip>与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 通常的做法是把函数放入
部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
|
|
|
|
|
|