Freecodecamp学习笔记（２）

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