46.Adjust the Margin of an Element
47.Add a Negative Margin to an Element
48.Add Different Padding to Each Side of an Element调整每条padding
有时你想要自定义元素,使它的每一个边具有不同的 padding。
CSS 允许你使用 padding-top、padding-right、padding-bottom和 padding-left来控制元素上右下左四个方向的padding。
49.Add Different Margins to Each Side of an Element调整每条margins
有时你想要自定义元素,使它的每一个边具有不同的 margin。
CSS 允许你使用 margin-top、margin-right、margin-bottom和 margin-left来控制元素上右下左四个方向的 margin。
50.Use Clockwise Notation to Specify the Padding of an Element简写顺序
除了分别指定元素的 padding-top、padding-right、padding-bottom和 padding-left属性外,你还可以集中起来指定它们,举例如下:
padding: 10px 20px 10px 20px;
这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左。
51.Use Clockwise Notation to Specify the Margin of an Element同上
52.Style the HTML Body Element body元素
通过将其 background-color 设置为黑色,我们可以证明 body 元素的存在。
我们可以通过将下面的代码添加到我们的 style 元素来做到这一点:
body {
background-color: black;
}
53.Inherit Styles from the Body Element 继承body元素
首先,创建一个文字为 Hello World 的 h1 元素。
然后,让我们通过向 body 元素的样式声明部分添加 color: green; 使页面上的所有元素的颜色为green。
最后,通过向 body 元素的样式声明部分添加font-family: Monospace; 将body 元素的font-family(字体)设置为Monospace。
<h1>Hello World</h1>
<style>
body {
background-color: black;
}
body {
color:green;
font-family:Monospace;
}
</style>
54.Prioritize One Style Over Another元素优先权
class 会 override(覆盖)body 元素的color: green
55.Override Styles in Subsequent CSS元素优先权
<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text{
color:blue;
}
</style>
<h1 class="pink-text blue-text " >Hello World!</h1>
style中有顺序,蓝色要在粉色后面,而class中无顺序
56.Override Class Declarations by Styling ID Attributes id覆盖
给你的 h1 元素添加名为orange-text 的id 属性。记住,id样式看起来是这样的:
<h1 id="orange-text">
在你的 h1 元素中保留 blue-text 和pink-text 两个class。
在你的 style 元素中为你的orange-text id 创建一个CSS 声明,就像下面例子中的样子:
#brown-text {
color: brown;
}
你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的,因为id属性总是具有更高的优先级。
57.Override Class Declarations with Inline Styles 行内样式
in-line style(行内样式) 使 h1元素变为白色。记住,行内样式看起来是这样的:
<h1 style="color: white">
58.Override All Other Styles by using Important 重要样式
color: pink !important;
59.Use Hex Code for Specific Colors使用十六进制代码上色
60.Use Hex Code to Color Elements White
61.Use Hex Code to Color Elements Red
hex code 中的前两位表示颜色中红色的数量,第三四位代表绿色的数量,第五六位代表蓝色的数量
纯红色,你只需要在第一和第二位使用 F (最大可能的数值),且在第三、第四、第五和第六位使用 0 (最小可能数值)。
62.Use Hex Code to Color Elements Green
63.Use Hex Code to Color Elements Blue
64.Use Hex Code to Mix Colors
65.Use Hex Code to Color Elements Gray
66.Use Hex Code for Specific Shades of Gray
67.Use Abbreviated Hex Code
红,hex code 是 #FF0000 ,可被缩写成#F00
<style>
body {
background-color: #F00;
}
</style>
68.Use RGB values to Color Elements使用RGB上色
body { background-color: rgb(0, 0, 0); }
69.Use RGB to Color Elements White
70.Use RGB to Color Elements Red
71.Use RGB to Color Elements Green
72.Use RGB to Color Elements Blue
73.Use RGB to Mix Colors