HTML第八章总结
Expanding your vocabulary
总述
在上一章节介绍了 CSS 的基础之后,这一章节更加具体地展开关于 CSS 的各种 rules 能够达成的效果。比如
- 字体:font-family
- 字号:font-size
- 字重:font-weight
- 斜体字:font-style:italic/oblique
- 字体的颜色:color
- 背景的颜色:background-dcolor
- 下划线:textdecoration:underline
font-family
在 CSS 中,有5个font-family,而每个 font-family 中包含着很多类型的 font,它们的名字和例子如下:
- Serif family:Times New Roman, Georgia
- San-serif family:Arial,Geneva
- Monospace family:Courier
- Cursive family:Comic Sans
- Fantasy family
他们各自的特点是:
- Serif family:font with serifs
- San-serif family:font without serifs
- Monospace family:fonts that have constant-width characters
- Cursive family:look handwritten
- Fantasy family:contains stylized decorative fonts
对于不同的 font-family,有着对人不同感觉:
Take a good look at the font families:serif fonts have an elegant, traditional look, while sans-serif fonts have a very clean and readable look. Monospace fonts feel like they were typed on a typewriter. Cursive and fantasy fonts have a playful or stylized feel.
设置 font-family specification
当设置 font-family 的 value 的时候,可以这样写:
需要明白以下几点:
- 前面三个字体都是具体字体的名称,这里的大小写是有区别的
- 是否显示相应的字体与对应的浏览器有关,如果浏览器没有 find 到相应的字体,那么寻找下一款字体
- 如果前面的都没有找到,那么就应用浏览器 default 的 sans-serif 字体(sans-serif 并不是一种特定的字体,而是浏览器默认的字体)
- 如果字体的名字是分开的形式,比如 Courier New,应该在 value 中写成"Courier New"
- 在选择字体的时候,最好选择 Windows 和 Mac 系统都支持的字体,它们有:
•Andale Mono
•Arial
•Comic sans
•Courier New
•Georgia
•Impact
•Time New Roman
•Trebuchet MS
•Verdana
Using Web Font
由于系统和浏览器的原因,无法使得每一个网页的 visitor 都可以看到 CSS 中设置的字体,这时候,就可以使用 Web Font 来达成这一目标
How Web fonts Work
- 你储存在 Web Server 对应的 ".woof"格式的文件
- Browser 检测到网页使用了 Web Font,请求 Web Server 用来 retrive 相应的 Web Font
- Web Server 返回相应的字体文件,browser 显示相应的字体的文本。
How to use Web Font to your page
- Find a font:visit sites to find free and licensed font you can use in your websites
- Make sure you have all the format of the font you need
- Place your font files on the Web:You can use font services online , then you'll use the URL of your font files.
- Add the @font-face rule to your CSS:You should assign a name for the font and then note down the src by using URL
- Using the family name in your CSS
这里需要明白和注意几点:
字体的格式:
- Truetype:.ttf
- Opentype:.otf Opentype is on top of Truetype
- Embedded Opentype fonts:.eot supported only on IE
- SVG font:.svg short for Scable Vector Graphics
- Web open font format:.woff Base on Truetype and is developed as a standard Web Font.
关于@font-face :
@font-face 其实是一个 built-in CSS rule(还有其他,比如:@media)这个 rule 与普通的含 selector 的rule 不同,它的语法为:
调节 font-size 的三种方式:
有三种方式去调节字体的大小,分别是:
- px:font-size:14px
- %:font-size:120%
- em:font-size:1.2em
需要注意的是: - px方式:其中的14与 px 之间不要有空格
- %方式和em方式都可以达到相同的效果
- 在使用的时候可以根据 inheritance 来系统地调节字体的大小
Specify 颜色的三种方式
电脑屏幕的颜色显示模式为 RGB 模式,所以显示不同颜色的思路是通过 R,G,B 三种色彩的占比来显示,可以采用:
- By name :CSS 预定义了150种颜色的名字,如 red,blue,yellow 等等, basic color 有16种,可以直接用这些名字:
- By red,green and blue values:可以采用
background-color:rgb(80%,40%,0%)
这样的占比的方式,也可以采用数值的方式background-color:rgb(204,102,0)
- By hex code:比如#cc6600
其他知识
- 一个寻找 Web fonts 的网站:https://www.fontsquirrel.com
- 一个用于搜查颜色的网站:https://en.wikipedia.org/wiki/Web_colors
HTML第八章总结的更多相关文章
- 精通Web Analytics 2.0 (10) 第八章:竞争情报分析
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第八章:竞争情报分析 在现实世界中,收集竞争情报可能意味着雇人在竞争对手的垃圾桶(实际会发生!)翻找. 在虚拟世界中,堆如山的数 ...
- 《Linux内核设计与实现》读书笔记 第十八章 调试
第十八章调试 18.1 准备开始 需要准备的东西: l 一个bug:大部分bug通常都不是行为可靠而且定义明确的 l 一个藏匿bug的内核版本:找出bug首先出现的版本 l 相 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (42) ------ 第八章 POCO之使用POCO
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第八章 POCO 对象不应该知道如何保存它们,加载它们或者过滤它们.这是软件开发中熟 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (46) ------ 第八章 POCO之领域对象测试和仓储测试
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-8 测试领域对象 问题 你想为领域对象创建单元测试. 这主要用于,测试特定的数 ...
- Python之路【第十八章】:Django基础
Django基本配置 Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Se ...
- 读《编写可维护的JavaScript》第八章总结
第八章 避免“空比较” 我们在对传进来的参数做处理之前,肯定需要验证一下是否是我们想要的,也就是说大多数情况下,我们需要对比一下它的类型. 作者首先给了一个看起来都感觉不对的代码: var Contr ...
- 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...
- Getting Started With Hazelcast 读书笔记(第八章-第十章)
第八章到第十章就是一些介绍性的描述,吹的就是Hazelcast能使用在各种地方.. 第八章 -从外面看 1.Hazelcast做了一个memcache的java实现,方便py和php使用. 2.可 ...
- [Effective Java]第八章 通用程序设计
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Laxcus大数据管理系统2.0(10)- 第八章 安全
第八章 安全 由于安全问题对大数据系统乃至当前社会的重要性,我们在Laxcus 2.0版本实现了全体系的安全管理策略.同时我们也考虑到系统的不同环节对安全管理的需求是不一样的,所以有选择地做了不同的安 ...
随机推荐
- 20145221高其_Final
20145221高其_Final 免考题目 密码保密与信息安全大赛--网络攻防 免考内容 CTF简介 CTF(Capture The Flag)中文一般译作夺旗赛,在网络安全领域中指的是网络安全技术人 ...
- bzoj 2115 Xor - 线性基 - 贪心
题目传送门 这是个通往vjudge的虫洞 这是个通往bzoj的虫洞 题目大意 问点$1$到点$n$的最大异或路径. 因为重复走一条边后,它的贡献会被消去.所以这条路径中有贡献的边可以看成是一条$1$到 ...
- 2015,3,10 2(南阳理工ACM)
描述有一个整型偶数n(2<= n <=10000),你要做的是:先把1到n中的所有奇数从小到大输出,再把所有的偶数从小到大输出. 输入 第一行有一个整数i(2<=i<30) ...
- linux命令之crontab定时执行任务【转】
本文转载自:https://www.cnblogs.com/coffy/p/5608095.html 一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护 ...
- 一些常用的mysql语句实例-以后照写
create database blog; create table blog_user ( user_Name char(15) not null check(user_Name !=''), us ...
- P3159 [CQOI2012]交换棋子
思路 相当神奇的费用流拆点模型 最开始我想到把交换黑色棋子看成一个流流动的过程,流从一个节点流向另一个节点就是交换两个节点,然后把一个位置拆成两个点限制流量,然后就有了这样的建图方法 S向所有初始是黑 ...
- (转)Awesome Courses
Awesome Courses Introduction There is a lot of hidden treasure lying within university pages scatte ...
- HDU 3047 Zjnu Stadium(带权并查集)
http://acm.hdu.edu.cn/showproblem.php?pid=3047 题意: 给出n个座位,有m次询问,每次a,b,d表示b要在a右边d个位置处,问有几个询问是错误的. 思路: ...
- HDU 4821 String(BKDRHash)
http://acm.hdu.edu.cn/showproblem.php?pid=4821 题意:给出一个字符串,现在问你可以找出多少个长度为M*L的子串,该子串被分成L个段,并且每个段的字符串都是 ...
- React内三种函数的写法
以下提供三种React内函数的写法,都可以正常运行,有疑问可以留言 写法一:让函数内部的this指向这个类的实例,它是用bind实现的,bind的第一个参数表示context,就是this. //写 ...