HTML基础3

一、div容器：其余的标签置于div标签中时视为总体一个块，子标签能够继承父级容器标签的类属性。

二、id 选择器：能够给每一个标签赋予id属性，在style中经过ID选择器来设置元素样式。

<style>
  #cat{
     font-size:14px;
     background-color:green;
  }
</style>
<a href=# id="cat">you are not alone</a>

三、css优先级覆盖

在 <style> 部分中 class 声明的顺序却很是重要，第二个声明老是比第一个具备优先权。由于 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。以下例所示，标签h1的内容最终显示为蓝色。

<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>

id 属性老是具备更高的优先级 ，下例中h1标签内容应显示为橘色。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
  #orange-text{
    color:orange;
  }
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

in-line的样式具备更高的优先级，下例中h1标签内容应显示为白色。

<h1 style="color:white" id="orange-text" class="pink-text blue-text">Hello World!</h1>

!important 声明的属性将具备最高优先级，下例中h1标签内容应显示为粉色。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

四、常见颜色

hex code 表示：

Hex code 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位表明绿色的数量，第五六位表明蓝色的数量。

因此要获得绝对的纯红色，你只须要在第一和第二位使用 F （最大可能的数值），且在第3、第4、第五和第六位使用 0 （最小可能数值）。也可以使用三位简写，如#F00表示红色，此时能够表示的颜色数量仅为4000左右。

黑色： #000000   白色：#FFFFFF   红色：#FF0000  绿色：#00FF00  蓝色：#0000FF  橙色：#FFA500

gray：#808080

RGB 表示：括号中三个数分别表示红绿蓝的的数值，取值范围为0~255。

        用法 ：  黑色   rgb(0, 0, 0);    白色   rgb (255,255,255);  橙色  rgb (255,165,0);