HTML5+CSS学习笔记（二）
创建单选按钮(radio)
如下创建了两个名为indoor-outdoor的单选选项，分别叫做Indoor\Outdoor
创建复选按钮（checkbox）
如下创建了三个名为checkbox的复选选项，分别叫做Loving\Lazy\Energetic
使单选、复选按钮默认被选中
在input元素中添加checked属性，如使复选按钮中的Loving被默认选中
定义容器并给容器添加属性！（这样我们就可以不分别添加属性，而是把他们括起来一起添加）
我们将两个表都嵌套于一个div中，然后给div应用一个已经创建好的class属性
Things cats love:
- cat nip
- laser pointers
- lasagna
Top 3 things cats hate:
- flea treatment
- thunder
- other cats
创建id选择器！
使用#创建id选择器
#cat-photo-form {
background-color: green;
}
id选择器应用时与类选择器一样，直接给元素添加id属性即可，如下
为元素设置id
为元素添加id属性
padding\margin样式！另一种边框、背景设置
基本边框框架
margin
padding
padding
padding(内边距)、margin(外边距)、border(边框)
红绿箱的大小是相等的，因为他们设置了相同的padding、margin
.red-box {
background-color: red;
padding: 20px;
margin: 20px;
}
.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}
设置margin为负值可以让其将横向填满
.green-box {
background-color: green;
padding: 20px;
margin: -15px;
padding的上下左右值可以直接设置
.green-box {
background-color: green;
padding-top:40px;
padding-right:20px;
padding-bottom:20px;
padding-left:40px;
}
同理、margin也可以
.green-box {
background-color: green;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
有关padding上下左右的集中定义方法：上右下左。
.green-box {
background-color: green;
padding: 40px 20px 20px 40px;
}
同理，有关margin上下左右的集中定义方法：上右下左。
.green-box {
background-color: green;
margin: 40px 20px 20px 40px;
}
初始body元素
每个页面都有一个初始body元素,我们可以通过body元素控制整个页面的某些属性，比如：将所有字体全部设置为绿色，字体为Monospace
body {
background-color: black;
color:green;
font-family:Monospace;
}
属性优先级的研究
1.class部分：在style部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。
.pink-text {
color: pink;
}
.blue-text{
color:blue;
}
2.整体看： class>body定义
如下代码输出的最后结果仍旧是蓝色文字HelloWorld
Hello World!
3.整体看：id>class>body
如下代码输出的是橘色的HelloWorld
Hello World!
4.内行样式(style)>id>class>body
如下代码输出的是白色的HelloWorld
Hello World!
5.标注（！important）>内行样式(style)>id>class>body
如下代码输出的为粉色的Hello World
Hello World!
更多的颜色！
1.可以通过十六进制产生不同的颜色
如：将body的背景颜色设置为橙色
2.可以通过grb设置产生不同颜色
如：将body的背景颜色设置为橙色的
只需将#FFA500替换为rgb(255, 165, 0)即可