CSS属性之颜色与字体

来源：互联网发布：香港中文大学gpa算法编辑：程序博客网时间：2024/04/30 09:07

本篇来认识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>

运行结果：
这里写图片描述

0 0