使用颜色

• 在计算机中，传统的模型之一为RGB模型，所有颜色都是通过红色、蓝色、绿色三种颜色进行组合；我们通过数值去表示

• 例如：
• 红色（255.0.0）、蓝色（0.0.255）、绿色（0.255.0）
• 白色（255.255.255）、黑色（0.0.0）
• 洋红色（255.0.255）、青色（0.255.255）、黄色（255.255.0）

CSS中rgb的表示方法

• CSS中，我们可以使用rgb方法或者十六进制方法去表示颜色
• 例如
• rgb(0,255,255)
  #表示青色
  
  rgb（244，179，63）
  #橙色
• 
  
• 除此之外，我们还可以设置透明度，称之为alpha
• 例如

rgba（0，255，255，0.3）
#看上去稍微淡一点的青色

十六进制表示法

• 我们将使用0-FF的比例来代表颜色，最常用

例如

#00ffff
表示青色，FF和255都一样，只是FF是用十六进制表示

注：在写VS代码中，我们经常会使用颜色板去查找颜色且在实际生活中，我们经常会使用十六进制去表示颜色，但是如果我们需要使用到透明度，我们还是会使用rgba函数

注意：在RGB模型中，三种颜色所占的比例一致时，就是灰色。所以灰色有很多种不同的灰色

回到之前的代码中

• 我们将标题1设置一个颜色

h1 {
font-size: 26px;
text-transform: uppercase;
font-style: italic;
color:#1098ad
}

• 但是我们需要列表都是一个颜色，用一个列表选择器代替上面的写法

h1,
h2,
h3 {
color: #1098ad;
}

• 除此之外，我们现在将所有的段落字体设置为好看的灰色

h1,
h2,
h3,
h4,
p,
li {
font-family: sans-serif;
color: #444;
}
h1,
h2,
h3 {
color: #1098ad;
}

注意：h123的颜色还是#1098ad，CSS中如果一个元素多次被定义颜色，使用最后的那个；

• 为了突出我们的页眉部分，我们将页眉部分添加好看的灰色底色

###HTML代码
<header class="main-header">
    <h1>代码介绍</h1>
    <nav>
      <a href="./blog.html">BLOG</a>
      <a href="#">挑战</a>
      <a href="#">弹性盒子</a>
      <a href="#">CSS</a>
    </nav>
  </header>
   
   
  ###CSS代码
  .main-header {
background-color: #f7f7f7;
}

• 除此之外，我们将下方的模块添加一个好看的边框

###HTML代码
<aside>
    <h4>相关文章</h4>
    <ul class="related">
      <li>
        <img
           src="img/related-1.jpg"
           alt="related-1"
           width="75px"
           height="75px"
        /><a href="#">如何去学习网页开发</a>
        <p class="related-author">作者：乔纳斯·施梅德特曼</p>
      </li>
      <li>
        <img
           src="img/related-2.jpg"
           alt="related-2"
           width="75px"
           height="75px"
        />
        <a href="#">CSS 的未知力量</a>
        <p class="related-author">作者：吉姆.狄龙</p>
      </li>
      <li>
        <img
           src="img/related-3.jpg"
           alt="related-3"
           width="75px"
           height="75px"
        />
        <a href="#">为什么 JavaScript 很棒</a>
        <p class="related-author">作者：玛蒂尔达</p>
      </li>
    </ul>
  </aside>

###CSS代码
aside {
 background-color: #f7f7f7;
 border: 5px solid #1098ad;
}

###border: 边框5px粗 实心 边框颜色

• 但是我们只希望顶部和底部有边框，很简单，如下

aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
}