Freecodecamp学习笔记(2)

    xiaoxiao2021-03-25  60

    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-toppadding-rightpadding-bottompadding-left来控制元素上右下左四个方向的padding

     

    49.Add Different Margins to Each Side of an Element调整每条margins

    有时你想要自定义元素,使它的每一个边具有不同的 margin

    CSS 允许你使用 margin-topmargin-rightmargin-bottommargin-left来控制元素上右下左四个方向的 margin

     

    50.Use Clockwise Notation to Specify the Padding of an Element简写顺序

    除了分别指定元素的 padding-toppadding-rightpadding-bottompadding-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

    转载请注明原文地址: https://ju.6miu.com/read-36516.html

    最新回复(0)