css怎么使用颜色？16.CSS中使用颜色

使用颜色

• 在计算机中，传统的模型之一为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方法或者十六进制方法去表示颜色
• 例如
• 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;}