CSS颜色与字体属性详解-优快云博客

本篇来认识CSS一些常用的属性：颜色与字体。
颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色

p{color:red;}

2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

这里写图片描述
关于十六进制颜色大家可以打开photoshop里的拾色器查看，如下图

下面，代码演示：

<!doctype>
<html>
    <head>
        <title>CSS属性之颜色</title>
        <meta charset="utf-8">
        <style type="text/css">
            .pa{color:#ff6600;}  /*把它们拆分,其实为红绿蓝的取值范围 #ff(红) 66(绿) 00(蓝)*/
            .pb{color:#f60;}
            .pc{color:#ff0000}   /*红色，可以简写为#f00*/
            .pd{color:rgb(0,255,0)}  /*0-255的取值范围  red green blue 的数字比例决定颜色*/
            .pe{color:rgba(182,22,206,1)}   /*0-1的取值范围*/
            .pf{color:rgba(182,22,206,0.8)} 
            .pg{color:rgba(182,22,206,0.6)} 
            .ph{color:rgba(182,22,206,0.4)} 
            .pi{color:rgba(182,22,206,0.2)} 
            .pj{color:rgba(182,22,206,0.0)} 
        </style>
    </head>
    <body>
        <p class="pa">你好</p>
        <p class="pb">你好</p>
        <p class="pc">你好</p>
        <p class="pd">你好</p>
        <p class="pe">透明度</p>
        <p class="pf">透明度</p>
        <p class="pg">透明度</p>
        <p class="ph">透明度</p>
        <p class="pi">透明度</p>
        <p class="pj">透明度</p>
    </body>
</html>

运行结果：
这里写图片描述
ps:
接下来是字体的属性：

还是给个例子：

<!doctype>
<html>
    <head>
        <title>CSS属性之字体</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                font-size:20px;
            }
            h1{
                font-size:100%;
            }
            h2{
                font-size:200%;
            }
            .ha{
                font-size:smaller;
            }
            .hb{
                font-size:inherit;
            }
            .hc{
                font-size:larger;
            }
            .hd{
                font-family:'微软雅黑','宋体';
            }
            .a{
                font-style:normal;
            }
            .b{
                font-style:italic;
            }
            .c{
                font-size:oblique;
            }
            .d{
                font-size:inherit;
            }
            .pa{
                font-weight:400;
            }
            .pb{
                font-weight:700;
            }
            .pc{
                font-weight:900;
            }
        </style>
    </head>
    <body>
        <h1>回忆的夏天</h1>
        <h2>回忆的夏天</h2>
        <h3 class="ha">举个栗子</h3>
        <h3 class="hb">举个栗子</h3>
        <h3 class="hc">举个栗子</h3>
        <h3 class="hd">字体</h3>
        <h3 class="he">字体</h3>
        <em class="a">呵呵</em>
        <em class="b">呵呵</em>
        <em class="c">呵呵</em>
        <em class="d">呵呵</em>
        <p class="pa">哈哈哈</p>
        <p class="pb">哈哈哈</p>
        <p class="pc">哈哈哈</p>   
    </body>
</html>