html+css学习笔记（二）

Posted on | In |

单选 复选框的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
#cat-photo-form{
    background-color: green;
}
.gray-background {
background-color: gray;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/statics/codecamp/images/relaxing-cat.jpg"></a>

<div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

padding margin border

image

有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素与其边框 border 之间的距离。

元素的 margin （外边距）控制元素 border （边框）和周围元素实际所占空间的距离。

css覆盖class类的声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
#orange-text{
    color:orange;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

image

CSS 十六进制RGB混合颜色

十六进制代码使用6个十六进制数字表示颜色，每 2 个分别表示红（R），绿（G）和蓝（B）成分。

从这三种纯色（红、绿、蓝），我们可以改变每种颜色创造超过1600万种其他颜色！

例如，橙色是纯红，与一些绿色混合，没有蓝色。在十六进制代码中，这转换为 ＃FFA500。

数字 0 是十六进制代码中最低的数字，表示完全没有颜色。

数字 F 是十六进制代码中最高的数字，表示最大可能的亮度。

用正确的十六进制代码替换