下午无聊，做了一遍W3school中的html5&css实战题目，在这里归纳一些用到的小知识点。
关于引入Google字体
<link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet” type=”text/css”>
一个好看的字体：font-family: Lobster;
在所有浏览器中都有几种可用的默认字体。这些包括 Monospace 、Serif 和 Sans-Serif。
关于后两种字体的区别，看到一篇文章，附上链接：Serif和Sans-serif字体的区别
当某种字体不可用时，你可以让浏览器将其 “降级” 为另一种字体。
单选按钮是 input 输入框的一种类型。
每个单选按钮都应该嵌套在自己的 label(标签) 元素中。
所有关联的单选按钮应具有相同的 name 属性。
<label><input type=”radio” name=”indoor-outdoor”> indoor</label>
<label><input type=”radio” name=”indoor-outdoor”> outdoor</label>
复选按钮是 input 的输入框的一种类型。
每一个复选按钮都应嵌套在其自己的 label元素中。
所有关联的复选按钮输入应该具有相同的 name属性。
<label><input type=”checkbox” name=”personality”> Loving</label>
<label><input type=”checkbox” name=”personality”> Loving</label>
<label><input type=”checkbox” name=”personality”> Loving</label>
所有复选按钮的name属性必须为personality
使用 checked 属性，你可以设置一个单选框和复选框默认被选中。
只需在 input 元素中添加属性checked 。例如：
<input type=”radio” name=”test-name” checked>
关于id属性的一个很酷的事情是，像类选择器一样，你可以使用CSS来设计样式。
以下是一个示例，说明如何使用 cat-photo-element 的id属性来获取元素 ，并设置背景颜色为绿色。在你的style 元素中：
#cat-photo-element {
background-color: green;
}
有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素与其边框 border 之间的距离。
元素的 margin （外边距）控制元素 border （边框）和周围元素实际所占空间的距离。
如果将一个元素的 margin 设置为负值，则元素将会变大。
有时你将需要自定义一个元素，使它的每一个边具有不同的 padding。
CSS 允许使用 padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding。
有时你将需要自定义一个元素，使它的每一个边具有不同的 margin。
CSS 允许使用 margin-top、margin-right、margin-bottom 和 margin-left 属性来控制元素四个方向的margin。
除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，如下所示：
padding: 10px 20px 10px 20px;（注意只有在最后写封号）
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
常用！！！
margin一样四个值以顺时针方式排列。
浏览器是从上到下读取CSS。这意味着，如果发生冲突，浏览器将使用最后的任何CSS声明。
id属性始终是具有更高的优先级。
id 声明都会覆盖 class 声明，不管它在你的 style 元素 CSS 的哪个位置进行声明。
还有其他方法可以覆盖CSS 即内联样式。
还有最后一个方法来覆盖CSS。这是所有的最强大的方法。。
在许多情况下，使用CSS库。这些可能会意外覆盖自己的CSS。所以当绝对需要确定一个元素具有特定的CSS时，可以使用 !important。
比如我们来给 pink-text 元素的 color 声明加上关键字 !important，以使 100% 确保你的 h1 元素是粉色的。
颜色篇
数字 0 是十六进制代码中最低的数字，表示完全没有颜色。。
数字 F 是十六进制代码中最高的数字，表示最大可能的亮度。
#000000 黑色
#FFFFFF 白色
hex code（十六进制代码） 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。
所以要得到绝对的纯红色，你只需要在第一和第二位使用 F （最大可能的数值），且在第三、第四、第五和第六位使用 0 （最小可能数值）。
许多人对1600 万种颜色感到不可思议，并且 hex code（十六进制代码） 很难记住。幸运的是，你可以缩短它。
例如，红色的十六进制码 #FF0000 可以缩短为 #F00。这个缩写形式给出一个数字为红色，一个数字为绿色，一个数字为蓝色。
这将把所有可能的颜色总数减少到大约4000种，但是浏览器会把 #FF0000 和 #F00 解释为完全相同的颜色。
在 CSS 中表示颜色的另一个方法是使用 RGB 值。
代表黑色的 RGB 值如下所示：
rgb(0, 0, 0)
代表白色的 RGB 值如下所示：
rgb(255, 255, 255)
使用 RGB，是使用RGB指定每个颜色的亮度，数字介于0到255之间，而不是像使用十六进制代码那样使用六个十六进制数字。
如果你做个算术，一个颜色的两位数字等于16 乘以 16，这给我们256个总值，因此，从零开始计数的 RGB 具有与十六进制代码完全相同数量的可能值