HTML & CSS 笔记 1

1.当你在大学选课时，面对几百门课程，而因为时间和精力，你只能从中选择十几门

这样的场景就用checkboxes（复选按钮）。

复选按钮是input的输入框的另一种类型。

每一个复选按钮都应该嵌套进label元素中。

所有关联的复选按钮应该具有相同的name属性。

 

下面是复选按钮的例子：

<label><input type="checkbox" name="personality"> Loving</label>

 

2.使用checked属性，你可以设置复选按钮和单选按钮默认被选中。

为此，只需在input元素中添加属性checked

 

<input type="radio" name="test-name" checked>

把你的第一个radio button和第一个checkbox都设置为默认选中。

 

3.除了 class属性之外，每一个HTML 元素还可以使用id 属性。

使用 id 属性有若干好处，一旦当你开始使用jQuery 的时候你会有更深的体会。

id 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的id 属性。

 

下面举例说明了如何设置h2 元素的id属性为cat-photo-app。

<h2 id="cat-photo-app">

 

4.和类选择器一样，你也可以使用ID选择器来声明样式。

声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。：

#cat-photo-element {

  background-color: green;

}

注意：在你的 style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加# 为前缀。

 

5.有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容content和元素边框border 之间的距离。

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。

当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

 

6.元素的外边距 margin控制元素边框 border和元素实际所占空间的距离。

在这儿，我们可以看到绿方块和红方块都位于黄方块之中，注意红方块比绿方块具有更大的外边距 margin，使得它看起来更小。

当你增大绿方块的 margin 时，将会增加元素边框和元素实际所占空间之间的距离。

 

7.但是等一下，还有最后一种覆盖 CSS的方法，这是所有方法中最强大的，但是在讲它之前，我们先讲讲为什么你要覆盖 CSS。

 

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的CSS 时，你可以使用!important。

让我们再回到我们的 pink-text class 声明。还记得不？我们的 pink-text class 被随后的class 声明、id声明和行内样式所覆盖了。

让我们来给 pink-text 元素的 color 声明加上关键字!important，以便100% 确保你的h1 元素是粉色的。

 

举例如下：

color: pink !important;

 

8.0 是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。

F 是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。

让我们通过把 background-color 的 hex code 修改为#FFFFFF，以把body 元素的背景改为白色。