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>

运行结果：

CSS属性之颜色与字体相关推荐

CSS中的颜色和字体
2.CSS里的颜色: (1)关键词:black,silver,white;十六进制值:#ff0000 (2)RGB:rgb(255,0,0);HSL-hsl(0,100%,50%) (3)RGBA:r ...
(前端)html与css，css 5、颜色、字体、字号量取方式、行高
1.颜色:color 色值:十六进制.RGB.rgba.颜色名. 十六进制写法↓ color:#ff0000; color:#ff0000;红色实际中用工具吸取(fw,ps等) 颜色使用:背景色.边 ...
html段落颜色字体字号,(前端)html与css，css 5、颜色、字体、字号量取方式
1.颜色:color 色值:十六进制.RGB.rgba.颜色名. 十六进制写法↓ color:#ff0000; color:#ff0000;红色实际中用工具吸取(fw,ps等) 颜色使用:背景色.边 ...
html字体颜色字号,(前端)html与css，css 5、颜色、字体、字号量取方式
1.颜色:color 色值:十六进制.RGB.rgba.颜色名. 十六进制写法↓ color:#ff0000; color:#ff0000;红色实际中用工具吸取(fw,ps等) 颜色使用:背景色.边 ...
input和textarea设置placeholder属性的颜色、字体大小
刚刚拿到一个设计图中的input的placeholder是白色的然后就给大家整理了一下. 以下是 input 的解决代码: /* WebKit browsers */ input::-webkit-i ...
html标签默认值,HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
简述css属性选择器的几种定义方式_CSS基础试题
一.单选题 1.CSS是利用( B )XHTML标签构建网页布局. A. C. D. 2.在CSS语言中下列哪一项是"左边框"的语法( C ) A.borde ...
week9 day3 CSS属性设置
week9 day3 CSS属性设置一.字体属性二.文本属性三.背景属性四.盒子模型 4.1 什么是盒子模型? 4.2 盒子模型的宽度和高度如何让 height=100% 发挥作用??? 4 ...
CSS笔记（字体样式，文本属性和颜色样式）
1 字体样式 1.1 字体系列(font family) 在CSS中,字体划分为五组"字体系列",分别为: sans-serif字体系列:没有衬线的字体,最常用不为过,如 Ari ...

CSS属性之颜色与字体

CSS属性之颜色与字体相关推荐

最新文章

热门文章