MSN Spaces 从零开始 第一节 共享空间色彩表示
教程须知:
1. 其实我没有详细清晰的大纲与计划, 所以指哪打哪请勿见怪. 另: 我的此类教学不会抄袭任何人的教程, 若有疑问请直接询问我.
2. 所有的教程都会涉及到HTML/CSS等标签, 在此明确几点:
-
我希望大家所有的XHTML标签元素全部使用小写, 不希望大家在自己学习标签元素过程中出现任何大写字母.[MSN Spaces可能会将你辛苦写就的标签元素全部转化为大写, 这是他的病态行为, 请原谅他, 但我们自己要养成决不大写的好习惯.]
-
所有CSS属性的具体值必须用引号标起来, 任何不标引号的属性值都是不正规的. [同样的, [MSN Spaces可能会将你辛苦写就的引号全部去除, 这是他的病态行为, 请原谅他, 但我们自己要养成属性值必须添加引号的好习惯.]
-
不要害怕我到现在说了一些专有名词, 什么"HTML/CSS", "元素/属性/属性值", "标签"等等, 我不会去用一句话解释他们是什么, 因为这样的解释往往全是废话, 等于没说的废话, 我会在具体实践中告诉大家.
-
正如第一/第二条所写的那样, 我可能会莫名地要求大家遵循什么, 不推荐去做什么, 我不会解释为什么, 我只告诉大家, 那样做对你有好处, 无论你今天使用MSN Spaces还是在未来自己学做网页.
扮靓空间的最重要的要素自然是色彩的使用, 那么, 如何在MSN Spaces或者网页中对文字/页面/段落等等使用颜色呢?
Part 1: 颜色表示方法, 首先请了解颜色的表示方法:
|
CSS样式表颜色值表示方法 |
|
表 示 |
解 释 |
取值范围 |
|
red |
颜色名称/关键字表示法 |
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow 还有更多 系统颜色 |
|
#00ffcc |
#rrggbb 三个两位十六进制正整数 |
00-ff 数字越大色彩越浅 |
|
rgb(255,0,0) |
RGB数值表示法 (Red, Green, Blue) 表示红, 绿, 蓝的正整数值 |
(0-255, 0-255, 0-255) 值越大颜色越浅 |
|
rgb(100%,0%,0%) |
RGB百分比表示法 (Red, Green, Blue) 表示红, 绿, 蓝的百分数值 |
(0-100%,0-100%,0-100%) 百分数值越大颜色越浅 |
| |
* 注释
1: 十六进制数的范围从0到F, 也就是说0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f这些数在颜色值中是合法的, 也就是#00cd12是正确的, #1298gc 就是错误的, 因为'g' 超出了范围.
2. 3个两位十六进制数均为同样的值, 则可以省略一个, 例如: #ccdd33可省略写为#cd3; 但是#ccde23则不能省略为#cde23, 这是完全错误的.
3. rgb表示法中超出了限制则自动取边值, 例如: rgb(10, -10, 280) 自动按 rgb(10, 0, 255); rgb(120%, 10%, 30%) 自动按 rgb(100%, 10%, 30%) 取值.
4. 四种表示法中除了第一种表示的颜色数目相对较少外, 其他可以基本做到表示法的完全互换, 例如:
black = #000000 = rgb(0, 0, 0) = rgb(0%, 0%, 0%)
red = #ff0000 = rgb(255, 0, 0) = rgb(100%, 0%, 0%)
5. 如何获得这些颜色的rgb值或者十六进值? 当然你们也可以搜索到更好的.
http://www.codedefect.com/spaces/ColorPicker.aspx
|
以名字/关键字显示的一些颜色以及其相应16进/RGB值
|
|
silver #c0c0c0
rgb(192,192,192) |
gray #808080
rgb(128,128,128) |
aliceblue #f0f8ff
rgb(240,248,255) |
|
aqua #00ffff
rgb(0,255,255) |
teal #008080
rgb(0,128,128) |
black #000000
rgb(0,0,0) |
|
green #008000
rgb(0,128,0) |
navy #000080
rgb(0,0,128) |
blue #0000ff
rgb(0,0,255) |
|
fuchsia #ff00ff
rgb(255,0,255) |
white #ffffff
rgb(255,255,255) |
lime #00ff00
rgb(0,255,255) |
yellow #ffff00
rgb(255,255,0) |
olive #808000
rgb(128,128,0) |
purple #800080
rgb(128,0,128) |
|
maroon #800000
rgb(128,0,0) |
red #ff0000
rgb(255,0,0) |
orange #ffa500
rgb(255,165,0) |
| |
Part 2: 经常用到颜色值的样式属性
当我们了解了颜色值的表示方法后, 我们需要一些需要颜色值的样式表属性. 这些属性包括我们最常用到的字体颜色, 背景颜色, 边框颜色等等,
|
CSS样式表最常用的需要颜色的属性 |
|
属 性 |
解 释 |
具体表示 |
|
color |
文本颜色 |
color:#ff0000 color:blue |
|
background-color |
背景颜色 |
background-color:rgb(240,10,10) |
|
border-color |
边框颜色 |
border-color:black |
| |
* 注释: 其他还有很多属性需要用到颜色值, 例如: scrollbar-face-color[滚动条3D表面的颜色], outline-color[线条轮廓的颜色]等等, 由于滚动条属性只是Internet Explorer的专有属性, 非CSS标准属性, 就不多作介绍了, 以后课程会专门用一节课做滚动条样式的使用.
Part 3: 具体应用
当我们了解了颜色取值后, 我们来具体应用他.
在MSN Spaces表示时元素需要使用style[因为我们不能通过其他途径调用CSS样式表]:
style = "color:#f0c; background:rgb(245,230,245)"
一般来说, 我们经常要用到 <div>, <span>来表示内容, 他们的区别是:
div(division)是一个块级元素, 可以包含段落, 标题, 表格等, 而span是行内元素, span的前后不换行, 它没有结构的意义, 纯粹是应用样式, 当其他行内元素都不合适时, 可以使用span.
<div style = "color:#ff8c00; background-color:#ffffe0">这是div来表示的文字
<br/>我要换行了 呵呵</div>
<span style = "color:#ff8c00; background-color:#ffffe0">这是span来表示的文字
<br/>我也要换行了 呵呵</span>
仅仅从背景色大家就可以看出使用<div>以及<span>来表示一段文字或背景颜色的差异了
<div>可以直接表示一整块, 而<span>则只在行内起作用, 如下:
<div style = "background-color:#ffffe0">你好啊?</div>
<div style = "color:#ff8c00">啊? 我不好啊.</div>
<div style = "background-color:#ffffe0">你干吗不好啊?</div>
<span style = "background-color:#ffffe0">你好啊?</span><span style = "color:#ff8c00">啊? 我不好啊.</span><span style = "background-color:#ffffe0">你干吗不好啊?</span>
Belem强烈建议大家以后在表示文字颜色的时候使用<div>/<span>这两种标签, 绝对不希望看到大家使用<font color="#ffcf02">这是文字颜色</font>, Belem绝对禁止大家在未来使用这种方法!
下面是其他的一些表现手法:
<div style="text-align: center">
<span style="border: rgb(142,96,79) 1px solid; height: 16px">
<a href="http://spaces.msn.com/gb2312" title="Belem"><span style="color: #8e604f">Easy Start To The Day</span></a>
<span style="font-weight: bold; width: 120px; color: #fff; background-color: rgb(142,96,79); text-align: center">Belem's Space</span>
</span>
</div> |
----
|
本节课我们用到的HTML/XHTML元素 |
|
HTML 4.01[共享空间适用] |
XHTML 1.1 |
XHTML 2.0 |
|
元素 |
功能 |
元素 |
功能 |
元素 |
功能 |
|
<div> |
Block-level |
<div> |
Text Module |
<div> |
Structural Module |
|
<span> |
Inline |
<span> |
Text Module |
<span> |
Text Module |
|
|
|
|
| |
|
本节课我们用到的CSS属性及属性值 |
|
CSS 2.1 |
|
属性 |
功能 [值/单位] |
属性 |
功能 [值/单位] |
|
color:#0fc |
文本颜色 |
background-color:#0fc |
背景颜色 |
|
height:16px |
高度 [像素] |
width:120px |
宽度 [像素] |
|
font-weight:bold |
粗体 |
text-align:center |
文字对齐[居中] |
|
border-color:#0fc |
边框颜色 |
|
|
|
|
| |
----
天啊 要是这么写教程不得死人啊
大家最好能动手操作一下, 先学基础, 再做实践 慢慢的就都会了 呵呵 另外 我做了几道关于本节课的测验题, 但愿大家能够做一做 呵呵 如果你在做测验题时添入了你的MSN Spaces地址, 我会按情况把你的地址放到我首页的HTML模块中 向别的朋友展示 呵呵
期待你的反馈!
Tools 
Help
Loading...
