字体颜色:CSS教程

@Ta 2012-05-16 17501点击
虎绿林新增加了两个UBB(必须去除=前面和/后面的空格): 
[div =CSS样式规则]内容[/ div] 
[span =CSS样式规则]内容[/ span]
 
正如你所看到的一样,CSS不仅能设置字体颜色,它还能够制造出各种丰富的显示效果,打造出你的个性贴子版面(如果你没看到,就是浏览器不支持CSS。比如mrpUC就看不到效果)。
下面,我们就开始吧。
问:CSS是神马东东?
答:CSS,层叠样式表。它用来控制网页上内容的显示。通过CSS,我们可以指定网页的边框、背景颜色、字体、字体颜色、显示宽度等所有和显示效果相关的细节,控制网页呈现的全过程。
问:CSS怎样控制网页上内容的显示?
答:为了控制网页上内容的显示,人们给网页上的每一个元素都设定了不同的属性。比如,网页上的文字拥有大小、颜色、字体等属性。而CSS就是通过设定这些属性来轻松地改变了网页的显示效果。
如果没有设置这些属性,那么浏览器就会给它们一个默认的属性。比如,在QQ浏览器中,文字的颜色默认是黑色的。
问:CSS是怎样设置这些属性的呢?
答:CSS的语法超级简单。
属性名:属性值;属性名:属性值;…… 
名称与值之间用冒号连接,而多个属性之间用分号连接。如果一个属性对应了多个值(这种情况经常出现),那么这多个值之间就用空格隔来。
CSS属性表:文字
color 颜色
在电子设备中,我们通常使用RGB值表示一个具体的颜色。红Red绿Green蓝Blue是色光的三元色,彩色显示器的每一个像素都由这三个小色点构成,它们的亮度不同,混合出的颜色也就不一样。
RGB有两种表示方法,第一种是数字式:                     
rgb(255,255,255) 
上面这个颜色中,红绿蓝三色都到达了最高亮度,于是它成了白色。也许大家已经知道了,三原色的取值范围都是0到255。值越小,光就越暗,颜色也就越深。而三原色以不同的比例“调和”在一起,就能产生所有你想要的色彩了。
[span =color:rgb(200,0,0);]内容[ /span]你只要去除=与/前面的空格,就可以看到与它一样的红色字体了。
--------
表示方法二:十六进制表示法
#FF00FF
你看到的就是#FF00FF表示的颜色。它与以下表示是等价的:
rgb(255,0,255)
相信你已经看出来了,实际上我们只要简单地把红绿蓝都转换成十六进制数(得到rgb(FF,0,FF)),给不足两位的数前面补0,并以#号开头,就得到颜色的十六进制表示了。
比如,纯红色:rgb(255,0,0)即#FF0000
注:十六进制的基数为0-9 A-F,A-F分别表示10-15,逢16进1,借1当16。在颜色表示中a-f不分大小写。

另外,如果遇到这样的颜色:#AA3377、#FF0055,可以直接简写成#A37、#F05,浏览器会自动还原。
因此,最简单的红色字体代码是:
[div =color:#f00;]内容[/ div]
问:[div]和[span]的区别是什么?
答:举个例子,span就像一个口袋,里面的内容有多大,它就有多大,里面的内容的形状是怎样的,它的形状也是怎样的。
而div不一样,它是一个箱子,不管里面的内容有多少,形状怎么样,它都有固定的高度和宽度,它都是一个正正规规的四方形。
同时,它为了占据一整行的空间,会自动地换一行来显示。
另外,只有div这个箱子才有边框这个属性,span这软软的口袋是木有的。

--------
background-color 背景颜色
它的设置方法和字体颜色是一样的。
比如,我通过下面的代码实现了你所看到的效果:
[div =background-color:#000;color:#fff;]内容[/ div]

--------
text-decoration 文字加线
它有三种取值:
underline 下划线
overline 上划线
line-through 中划线(删除线)
并且这三种效果可以叠加。示例代码:
[span =text-decoration:underline overline line-through]内容[ /span]
看来我叠加的方法错了。
看来我叠加的方法错了。
看来我叠加的方法错了。
经测试,Q浏只支持下划线:
[span =text-decoration:underline]内容[/ span]

--------
text-align 文字对齐方式
一共有四种对齐方式:
left 左对齐
right 右对齐
center 居中对齐
justify 分散对齐(为了对齐,浏览器会自动把字少的行给拉宽)
我们现在看到的效果就是右对齐。
border 边框
边框一共有三个属性:
宽度,采用象素表示,如2px
类型,有以下这些:
solid 实线
dashed 虚线
double 双线
dotted 点线
groove  3D凹槽线(可能不支持)
ridge  3D垄状线(可能不支持)
inset  3Dinset效果(可能不支持)
outset  3Doutset效果(可能不支持)
颜色,可以用#abcdef或者rgb(x,y,z)表示
注意哦,只有div才有边框,span木有。
[div =border:2px solid #f00;]内容[/ div]
于是,边框出现了。
^(oo)^
^(oo)^
^(oo)^
^(oo)^
代码如下:
[div =border:1px solid #0f0;color:#f00;background-color:#ffc;text-align:center;]^(oo)^[/ div]
--------
颜色代码表 
回复列表(689)
  • 1
    @Ta / 2011-07-15
    顶~~
  • 2
    @Ta / 2011-07-15
    颜色太浅,看不清
  • 3
    @Ta / 2011-07-15
    在哪里?
  • 4
    @Ta / 2011-07-15
    试试而以
  • 5
    @Ta / 2011-07-15
    内容
  • 6
    @Ta / 2011-07-15
    内容
  • 7
    @Ta / 2011-07-15
    不会
  • 8
    @Ta / 2011-07-15
    恩,等待更新中
  • 9
    @Ta / 2011-07-15
    谁给几个本站字体颜色代码
  • 10
    @Ta / 2011-07-15
    快更新呀!我想要知道边框咋弄!是不是以后可以自己做表格了?
  • 11
    @Ta / 2011-07-15
    xhtml是没有表格滴
  • 12
    @Ta / 2011-07-15
    等更新完再看吧,不急的~
  • 13
    @Ta / 2011-07-15
    有,但是Q浏和UC都不支持,只有自带能看到效果。
  • 14
    @Ta / 2011-07-15
    呃,我以前研究html的时候,都是用q浏本地网页测试的
  • 15
    @Ta / 2011-07-16
    A6FFA6#CECEFF#ACD6FF#CAFFFF#C1FFE4#BBFFBB#DDDDFF#C4E1FF#D9FFFF#D7FFEE#CEFFCE#ECECFF#D2E9FF#ECFFFF#E8FFF5#DFFFDF#FBFBFF#ECF5FF#FDFFFF#FBFFFD#F0FFF0#467500#424200#5B4B00#844200#642100#548C00#5B5B00#796400#9F5000#842B00#64A600#737300#977C00#BB5E00#A23400
  • 16
    @Ta / 2011-07-16
    分隔线怎么弄?
  • 17
    @Ta / 2011-07-16
    分隔线怎么弄?
    分隔线怎么弄?
  • 18
    @Ta / 2011-07-16
    分隔线怎么弄?
  • 19
    @Ta / 2011-07-16
    分隔线怎么弄?
添加新回复
回复需要登录

[聊天-此处没有老虎] 情醉中国风:Wordpress chat plugin with Telegram Redmi K.O