| rainystar 的个人资料『起点』照片日志列表 |  工具  帮助 |
|
『起点』 Where there is a will there is a way 8月4日 html标记HTML 标记一览：
注： ·● 表示该标记属于围堵标记，即需要结束标记 </标记>。 css篇 CSS--层叠样式表
什么是CSS?
中文翻译为样式表! 它的作用简单的说：就是可以使你在同一页面里使用不同的超链接样式。 更神奇的是，用CSS，仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为网页样式表的强大和灵活特性。
一个样式表由样式规则组成, 以告诉浏览器怎样去呈现一个文档. 有很多将样式规则加入到你的HTML文档中的方法, 但最简单的启动方法是使用HTML的STYLE组件. 这个元素放置于文档的HEAD部分, 包含网页的样式规则. 要注意到尽管STYLE元素是试验样式表的好方法, 它具有某些在用户使用这种方法之前应该考虑的缺点. 不同方法的优点和缺点在将样式表加入到HTML中部分中有讨论。 每个规则的组成包括一个选择符--通常是一个HTML的元素, 例如BODY, P, 或EM--和该选择符所接受的样式. 有很多的属性可以用于定义一个元素. 每个属性带一个值, 共同地描述选择符应该如何呈现. 样式规则组成如下: 选择符 { 属性: 值 } 单一选择符的复合样式声明应该用分号隔开: 选择符 { 属性1: 值1; 属性2: 值2 } 以下是一段定义了H1和H2元素的颜色和字体大小属性:
上述的样式表告诉浏览器用加大、红色字体去显示一级标题, 用大、蓝色字体去显示二级标题. CSS1 规格正式地定义了所有的有效属性和值. 属性和值在本网站的CSS 属性部分也给出了. 本教程专门介绍了CSS非常基础的知识, 以提供足够的信息去让你试验自己的样式. 要获得CSS更深入的知识, 阅读继续阅读以下部分: CSS 结构和规则 CSS 属性 将样式表加入到HTML中 CSS 结构和规则 基本语法 规则选择符任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如， P { text-indent: 3em } 当中的选择符是P。 类选择符单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作者也许希望视其语言而定，用不同的颜色显示代码 : code.html { color: #191970 } code.css { color: #4b0082 } 以上的例子建立了两个类，css和html，供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，
每个选择符只允许有一个类。例如，code.html.proprietary是无效的。 类的声明也可以无须相关的元素: .note { font-size: small } 在这个例子，名为note的类可以被用于任何元素。 一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。 ID 选择符 ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下: #svp94O { text-indent: 3em } 这点可以参考HTML中的ID属性:文本缩进3em 关联选择符关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符 P EM { background: yellow } 是P EM。这个值表示段落中的强调文本会是黄色背景；而标题的强调文本则不受影响。 声明属性一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。 值声明的值是一个属性接受的指定。例如，属性颜色能接受值red。 组合为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } 继承实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。 有些情况是内部选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的；直觉上，一个段落不会有同文档BODY一样的上边界值。 注解样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式: /* COMMENTS CANNOT BE NESTED */ 伪类和伪元素伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如，visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。 伪类或伪元素规则的形式如 选择符:伪类 { 属性: 值 } 或 选择符:伪元素 { 属性: 值 } 伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下: 选择符.类: 伪类 { 属性: 值 } 或 选择符.类: 伪元素 { 属性: 值 } 定位锚伪类伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示，甚至不同字体大小和风格。 一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下: A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% } 首行伪元素通常在报纸上的文章，例如Wall Street Journal中的，文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子: P:first-line { font-variant: small-caps; font-weight: bold } 首个字母伪元素首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如: P:first-letter { font-size: 300%; float: left } 会比普通字体加大三倍。 层叠顺序 当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 ! important 规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。同样地，当网页制作者和读者都指定了重要规则时，网页制作者的规则会超越读者的。以下是! important 声明的例子: BODY { background: url(bar.gif) white; background-repeat: repeat-x ! important } Origin of Rules (Author's vs. Reader's) 正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。 网页制作者应该小心地使用! important 规则，因为它们会超越用户任何的! important 规则。例如，一个用户由于视觉关系，会要求大字体或指定的颜色，而且这样的用户会有可能声明确定的样式规则为! important，因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。 选择符规则: 计算特性 基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。 统计选择符中的ID属性个数。 统计选择符中的CLASS属性个数。 统计选择符中的HTML标记名格式。 最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表: #id1 {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */ UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */ LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */ LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */ 特性的顺序 为了方便使用，当两个规则具同样权重时，取后面的那个。 CSS 属性 以下是CSS的各类属性的索引，你可以直接点击进入需要的内容学习，也可以按页面最下方的“下一节”按钮学习全部内容。 用于属性定义的语法 字体属性 字体属性字体族科 字体风格 字体变形 字体加粗 字体大小 字体 颜色及背景属性 颜色 背景颜色 背景图象 背景重复 背景附件 背景位置 背景 文本属性 文字间隔 字母间隔 文字修饰 纵向排列 文本转换 文本排列 文本缩进 行高 方框属性 上边界 右边界 下边界 左边界 边界 上补白 右补白 下补白 左补白 补白 上边框宽度 右边框宽度 下边框宽度 左边框宽度 边框宽度 边框颜色 边框风格 上边框 右边框 下边框 左边框 边框 宽度 高度 漂浮 清除 分类属性 显示 空白 目录样式类型 目录样式图象 目录样式位置 目录样式 单位 长度单位 百分比单位 颜色单位 统一资源管理(URLs) 用于CSS属性定义的语法 Foo类型的值. 共同类型的讨论在单位章节. Foo 必须原文出现的关键字 (尽管无须限制大小写). 逗号和斜杠也必须原文出现. A B C A 必须存在, 然后是B, 然后是C, 需要按照顺序. A | B A 或B 必须存在. A || B A 或B或两者必须存在, 顺序随意. [ Foo ] 用括号将项目归类在一起. Foo* Foo被重复使用零或更多的次数. Foo+ Foo被重复使用一或更多的次数. Foo? Foo为可选. Foo{A,B} Foo必须存在最少A次，最多B次. 字体属性 字体族科语法: font-family: [[<族科名称> | <种类族科>],]* [<族科名称> | <种类族科>] 允许值: <族科名称> 任意字体族科名称都可以使用 <种类族科> serif (e.g., Times) sans-serif (e.g., Arial or Helvetica) cursive (e.g., Zapf-Chancery) fantasy (e.g., Western) monospace (e.g., Courier) 初始值: 由浏览器决定 适用于: 所有对象 向下兼容: 是 字体族科可以用一个指定的的字体名或一个种类的字体族科。很明显，定义一个指定的字体名不会比定义一个种类的字体族科合适。多个族科的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类族科名随后，以防第一个选择不存在。 字体族科声明的例子如下: P { font-family: "New Century Schoolbook", Times, serif } 留意头两个赋值指定了字体的类型: New Century Schoolbook和Times。可是，因为它们两者都是serif字体，字体族科的种类作为后备列了出来，以防系统没有两者但有另一个serif合资格的字体。 任何包含空格的字体名都必须用单引号或双引号引住。 字体族科也可以用字体属性给出。 字体风格语法: font-style: <值> 允许值: normal | italic | oblique 初始值: normal 适用于: 所有对象 向下兼容: 是 字体风格属性以三个方法的其中一个来定义显示的字体: normal (普通)，italic (斜体) 或oblique (倾斜)。样式表的字体风格声明例子如下: H1 { font-style: oblique } P { font-style: normal } 字体变形语法: font-variant: <值> 允许值: normal | small-caps 初始值: normal 适用于: 所有对象 向下兼容: 是 字体变形属性决定了字体的显示是normal (普通) 还是small-caps (小型大写字母)。当文字中所有字母都是大写的时候，小型大写字母(值)会显示比小写字母稍大的大写字符。稍后版本的CSS将会支持附加的变形，如收缩、扩张、小写数码或其它自定义的变形。字体变形的定义例子如下: SPAN { font-variant: small-caps } 字体加粗语法: font-weight: <值> 允许值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始值: normal 适用于: 所有对象 向下兼容: 是 字体加粗属性用作说明字体的加粗。当其它值绝对时，bolder和lighter值将相对地成比例增长。 注意: 因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择: 500 会被 400代替，反之亦是 100-300 会被指定为下一较细的加粗，如果有的话，否则就是下一较粗的加粗 600-900 会被指定为下一较粗的加粗，如果有的话，否则就是下一较细的加粗 一些字体加粗的定义例子如下: H1 { font-weight: 800 } P { font-weight: normal } 字体大小语法: font-size: <绝对大小> | <相对大小> | <长度> | <百分比> 允许值: <绝对大小> xx-small | x-small | small | medium | large | x-large | xx-large <相对大小> larger | smaller <长度> <百分比> (in relation to parent element) 初始值: medium 适用于: 所有对象 向下兼容: 是 字体大小属性用作修改字体显示的大小。绝对长度(使用的单位为pt-像素和in-英寸) 需要谨慎地考虑到其适应不同浏览环境时的弱点。对于一个用户来说，绝对长度的字体很有可能会很大，或很小。 一些大小指定的定义如下: H1 { font-size: large } P { font-size: 12pt } LI { font-size: 90% } STRONG { font-size: larger } 网页制作者需要清楚Microsoft Internet Explorer 3.x 会错误地将em 和ex单位当作像素，这很可能会令到使用了这些单位的文本不可读。浏览器还会错误地将百分比值视为相对于选中部分的缺省字体大小，而不是上级元素的字体大小。这种做法像 H1 { font-size: 200% } 这是危险的，其大小将被视为IE的一级标题的缺省字体大小的两倍，而不是两倍于上级元素的字体大小。在这种情况中，BODY 通常会被视为上级元素，而且很可能定义一个medium的字体大小，然而，在IE中一级标题的缺省字体大小可能被认为是xx-large。 注意到了这些错误后，网页制作者在使用字体大小属性时，应该小心使用百分比的值，而且应该尽量避免使用em和ex这两个单位。 颜色及背景属性 颜色语法: color: <颜色> 初始值: 由浏览器决定 适用于: 所有对象 向下兼容: 是 颜色属性允许网页制作者指定一个元素的颜色。查看单位可以知道颜色值的描述. 一些颜色规则的例子包括: H1 { color: blue } H2 { color: Navy } H3 { color: #0c0 } 为了避免与用户的样式表之间的冲突，背景和颜色属性应该始终一起指定。 背景颜色语法: background-color: <值> 允许值: <颜色> | transparent (透明) 初始值: transparent (透明) 适用于: 所有对象 向下兼容: 否 背景颜色属性设定一个元素的背景颜色。例如: BODY { background-color: white } H1 { background-color: Navy } 为了避免与用户的样式表之间的冲突，无论任何背景颜色被使用的时候，背景图象都应该被指定。而大多数情况下，background-image: none都是合适的。 网页制作者也可以使用略写的背景属性，通常会比背景颜色属性获得更好的支持。 背景图象语法: background-image: <值> 允许值: <统一资源定位URLs> | none (无) 初始值: none (无) 适用于: 所有对象 向下兼容: 否 背景图象属性设定一个元素的背景图象。例如: BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.htmlhelp.com/bg.png) } 为了那些不载入图象的浏览者，当定义了背景图象后，应该也要定义一个类似的背景颜色。 网页制作者也可以使用略写的背景属性，通常会比背景图象属性获得更好的支持。 背景重复语法: background-repeat: <值> 允许值: repeat | repeat-x | repeat-y | no-repeat 初始值: repeat 适用于: 所有对象 向下兼容: 否 背景重复属性决定一个指定的背景图象如何被重复。值为repeat-x时，图象横向重复，当值为repeat-y时图象纵向重复。例如: BODY { background: white url(candybar.gif); background-repeat: repeat-x } 在以上例子中, 图象只会被横向平铺。 网页制作者也可以使用略写的背景属性，通常会比背景重复属性获得更好的支持。 背景附件语法: background-attachment: <值> 允许值: scroll | fixed 初始值: scroll 适用于: 所有对象 向下兼容: 否 背景附件属性决定指定的背景图象是跟随内容滚动，还是被看作油画固定不动。例如，以下指定一个固定的背景图象: BODY { background: white url(candybar.gif); background-attachment: fixed } 网页制作者也可以使用略写的背景属性，通常会比背景附件属性获得更好的支持。 背景位置语法: background-position: <值> 允许值: [<百分比> | <长度>]{1,2} | [top | center | bottom] || [left | center | right] 初始值: 0% 0% 适用于: 块级及替换元素 向下兼容: 否 图象位置属性给出指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。) 安排背景位置最容易的方法是使用关键字: 横向的关键字 (left, center, right) 纵向的关键字 (top, center, bottom) 百分比和长度也可用作安排背景图象的位置。百分比和元素字体大小有关。虽然使用长度是允许的，但因为它们处理不同的显示分辨率有不可避免的缺点，所以不被推荐。 当使用百分比或长度时，需首先指定横向位置，接着是纵向位置。一个值，例如20% 65%，指定图象的左起20%上起65%的那点会被放在元素的左起20%上起65%的那点的所在位置。一个值如5px 10px，指定图象的左上角会被放在元素的左起5像素上起10像素的位置。 如果仅给出横向的值，纵向位置的值为50%。长度和百分比的组合是允许的，负值也行。例如，10% -2cm是允许的。虽然，百分比和长度是不能够和关键字组合。 关键字解释如下: top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% 如果背景图象被看作油画般固定不动，关于油画的图象会代替元素被放置。 网页制作者也可以使用略写的背景属性，通常会比背景位置属性获得更好的支持。 背景语法: background: <值> 允许值: <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置> 初始值: 未定义 适用于: 所有对象 向下兼容: 否 背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明: BODY { background: white url(http://www.htmlhelp.com/foo.gif) } BLOCKQUOTE { background: #7fffd4 } P { background: url(../backgrounds/pawn.png) #f0f8ff fixed } TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right } 当一个值未被指定时，将接受其初始值。例如，在上述的前三条规则，背景位置属性将被设置为0% 0%。 为了避免与用户的样式表之间的冲突，背景和颜色应该一起被指定。 文本属性 文字间隔语法: word-spacing: <值> 允许值: normal | <长度> 初始值: normal 适用于: 所有元素 向下兼容: 是 文字间隔属性定义一个附加在文字之间的间隔数量。该值必须符合长度格式，允许使用负值。 例如: P EM { word-spacing: 0.4em } P.note { word-spacing: -0.2em } 字母间隔语法: letter-spacing: <值> 允许值: normal | <长度> 初始值: normal 适用于: 所有元素 向下兼容: 是 字母间隔属性定义一个附加在字符之间的间隔数量。该值必须符合长度格式，允许使用负值。一个设为零的值会阻止文字的调整。 例如: H1 { letter-spacing: 0.1em } P.note { letter-spacing: -0.1em } 文本修饰语法: text-decoration: <值> 允许值: none | [ underline || overline || line-through || blink ] 初始值: none 适用于: 所有元素 向下兼容: 否 文本修饰属性允许通过五个属性中的一个来修饰文本: underline (下划线)，overline (上划线)，line-through (删除线)，blink (闪烁)，或缺省地使用无。 例如，使用下列语句可以使连接不再有下划线: A:link,A:visited,A:active { text-decoration: none } 纵向排列语法: vertical-align: <值> 允许值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> 初始值: baseline 适用于: 内部元素 向下兼容: 否 纵向排列属性可以用作一个内部元素的纵向位置，相对于它的上级元素或相对于元素行。(一个内部元素是没有行在其前和后断开的，例如，在HTML中的EM，A，和IMG) 该值可以是一个相对于元素行高属性的百分比，它会在上级基线上增高元素基线的指定数量。允许使用负值。 该值也可以是一个关键字。以下的关键字将影响相对于上级元素的位置: baseline (使元素和上级元素的基线对齐) middle (纵向对齐元素基线加上上级元素的x-高度——字母" x "的高度——的一半的中点) sub (下标) super (上标) text-top (使元素和上级元素的字体向上对齐) text-bottom (使元素和上级元素的字体向下对齐) 影响相对于元素行的位置的关键字有 top (使元素和行中最高的元素向上对齐) bottom (使元素和行中最低的元素向下对齐) 纵向排列属性对于排列图象特别有用。以下是一些例子: IMG.middle { vertical-align: middle } IMG { vertical-align: 50% } .exponent { vertical-align: super } 文本转换语法: text-transform: <值> 允许值: none | capitalize | uppercase | lowercase 初始值: none 适用于: 所有元素 向下兼容: 是 文本转换属性允许通过四个属性中的一个来转换文本: capitalize (使每个字的第一个字母大写) uppercase (使每个字的所有字母大写) lowercase (使每个字的所有字母小写) none (使用原始值) 例如: H1 { text-transform: uppercase } H2 { text-transform: capitalize } 文本转换属性仅仅被用于表达某种格式的要求。这并非很适当的做法，例如，用文本转换使一些国家的名字的第一个字母大写，而其它字母小写。 文本排列语法: text-align: <值> 允许值: left | right | center | justify 初始值: 由浏览器决定 适用于: 块级元素 向下兼容: 是 文本排列属性可以应用于块级元素(P，H1，等)，使元素文本得到排列。这个属性的功能类似于HTML的段、标题和部分的ALIGN属性。 以下是一些例子: H1 { text-align: center } P.newspaper { text-align: justify } 文本缩进语法: text-indent: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 块级元素 向下兼容: 是 文本缩进属性可以应用于块级元素(P，H1，等.)，以定义该元素第一行可以接受的缩进的数量。该值必须是一个长度或一个百分比。若百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进: P { text-indent: 5em } 行高 语法: line-height: <值> 允许值: normal | <数字> | <长度> | <百分比> 初始值: normal 适用于: 所有元素 向下兼容: 是 行高属性可以接受一个控制文本基线之间的间隔的值。当值为数字时，行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值。 行高也可以由带有字体大小的字体属性产生。 行高属性可以用于双行距的文本: P { line-height: 200% } Microsoft Internet Explorer 3.x 会错误地将em和ex单位当作像素。这错误很可能会令到文本不可读，所以网页制作者需要避免引起这个随处可能发生的错误; 使用百分比单位往往是一个好的选择。 方框属性 上边界语法: margin-top: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否 上边界属性用一个指定的长度或百分比值来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如，以下的规则将消除文件的上边界。 BODY { margin-top: 0 } 注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。 右边界语法: margin-right: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否 右边界属性用一个指定的长度或百分比值来设置元素的右边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如: P.narrow { margin-right: 50% } 注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。 下边界语法: margin-bottom: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否 下边界属性用一个指定的长度或百分比值来设置元素的下边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如: DT { margin-bottom: 3em } 注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。 左边界语法: margin-left: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否 左边界属性用一个指定的长度或百分比值来设置元素的左边界。百分比值参考上级元素的宽度。允许使用负值边际。 例如: ADDRESS { margin-left: 50% } 注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。 边界语法: margin: <值> 允许值: [ <长度> | <百分比> | auto ]{1,4} 初始值: 未定义 适用于: 所有元素 向下兼容: 否 边界属性用一到四个值来设置元素的边界，每个值都是长度、百分比或者自动。百分比值参考上级元素的宽度。允许使用负值边际。 如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。 边界声明包括以下例子： BODY { margin: 5em } /* 所有边界设为5em */ P { margin: 2em 4em } /* 上和下边界为2em，左和右边界为4em */ DIV { margin: 1em 2em 3em 4em } /* 上边界为1em，右边界为2em，下边界为3em，左边界为4em */ 注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则不会。 使用边界属性可以一次性地设置所有边界；也可以选择使用上边界、下边界、左边界和右边界属性。 上补白语法: padding-top: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 上补白属性描述上边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。 右补白语法: padding-right: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 右补白属性描述右边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。 下补白语法: padding-bottom: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 下补白属性描述下边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。 左补白语法: padding-left: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 左补白属性描述左边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分比。百分比的值参考上级元素的宽度。不能使用负值。 补白语法: padding: <值> 允许值: [ <长度> | <百分比 ]{1,4} 初始值: 0 适用于: 所有对象 向下兼容: 否 补白属性是上补白、右补白、下补白和左补白属性的略写。 一个元素的补白是边框和元素的内容之间的间隔的数值。可以给出从一到四的值，每个值可以是长度或百分比。百分比值参考上级元素的宽度。不能使用负值。 如果四个值都给出了，它们分别应用于上、右、下和左补白。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。 例如，以下的规则设置上补白为2em，右补白为4em，下补白为5em，左补白为4em: BLOCKQUOTE { padding: 2em 4em 5em } 上边框宽度语法: border-top-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。 也可以用在上边框、边框的宽度或边框的属性略写。 右边框宽度语法: border-right-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。 也可以用在右边框、边框的宽度或边框的属性略写。 下边框宽度语法: border-bottom-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。 也可以用在下边框、边框的宽度或边框的属性略写。 左边框宽度语法: border-left-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 左边框宽度属性用于指定元素的左边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。 也可以用在左边框、边框的宽度或边框的属性略写。 边框宽度语法: border-width: <值> 允许值: [ thin | medium | thick | <长度> ]{1,4} 初始值: 未定义 适用于: 所有对象 向下兼容: 否 边框宽度属性用一到四个值来设置元素的边界，值是一个关键字或长度。不允许使用负值长度。 如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。 这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。 也可以使用略写的边框属性。 边框颜色语法: border-color: <值> 允许值: <颜色>{1,4} 初始值: 颜色属性的值 适用于: 所有对象 向下兼容: 否 边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。 也可以使用略写的边框属性。 边框样式语法: border-style: <值> 允许值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} 初始值: none 适用于: 所有对象 向下兼容: 否 边框样式属性用于设置一个元素边框的样式。这个属性必须用于指定可见的边框。 可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。 也可以使用略写的边框属性。 上边框语法: border-top: <值> 允许值: <上边框宽度> || <边框式样> || <颜色> 初始值: 未定义 适用于: 所有对象 向下兼容: 否 上边框属性是一个用于设置一个元素上边框的宽度、式样和颜色的略写。 注意只能给出一个边框式样。 也可以使用略写的边框属性。 右边框语法: border-right: <值> 允许值: <右边框宽度> || <边框式样> || <颜色> 初始值: 未定义 适用于: 所有对象 向下兼容: 否 右边框属性是一个用于设置一个元素右边框的宽度、式样、和颜色的略写。 注意只能给出一个边框式样。 也可以使用略写的边框属性。 下边框语法: border-bottom: <值> 允许值: <下边框宽度> || <边框式样> || <颜色> 初始值: 未定义 适用于: 所有对象 向下兼容: 否 下边框属性是一个用于设置一个元素的下边框的宽度、式样和颜色的略写。 注意只能给出一个边框式样。 也可以使用略写的边框属性。 左边框语法: border-left: <值> 允许值: <左边框宽度> || <边框式样> || <颜色> 初始值: 未定义 适用于: 所有对象 向下兼容: 否 左边框属性是一个用于设置一个元素左边框的宽度、式样和颜色的略写。 注意只能给出一个边框式样。 也可以使用略写的边框属性。 边框语法: border: <值> 允许值: <边框宽度> || || <颜色> 初始值: 未定义 适用于: 所有对象 向下兼容: 否 边框属性是一个用于设置一个元素边框的宽度、式样和颜色的略写。 边框声明的例子包括： H2 { border: groove 3em } A:link { border: solid blue } A:visited { border: thin dotted #800080 } A:active { border: thick double red } 边框属性只能设置四种边框；只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。 宽度语法: width: <值> 允许值: <长度> | <百分比> | auto 初始值: auto 适用于: 块级和替换元素 向下兼容: 否 每个块级或替换元素都可以用一个长度或“auto”值来指定其宽度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 宽度属性的初始值为“auto”，即为该元素的原有宽度(有就是元素自己的宽度，例如一个图象的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。 这个属性能用作给出一些INPUT元素的公共长度，好象SUBMIT和RESET按钮: INPUT.button { width: 10em } 高度语法: height: <值> 允许值: <长度> | auto 初始值: auto 适用于: 块级和替换元素 向下兼容: 否 每个块级或替换元素都可以用一个长度或“auto”值来指定其高度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 高度属性的初始值为“auto”，即为该元素的原有高度(有就是元素自己的高度，例如一个图象的高度)。不允许使用负的长度值。 与宽度属性一样，高度可以应用于设定图象的比例: IMG.foo { width: 40px; height: 40px } 在大多数情况下，我们都建议网页制作者使用图象编辑软件按比例伸缩图象，因为浏览器不可能高质量地伸缩图象，也因为使用这个属性缩小图象会导致用户下载了一个不必要的庞大文件。虽然如此，通过宽度和高度属性伸缩图象依然是用户—定义样式表中一个有用的用作克服视觉问题的选择。 漂浮语法: float: <值> 允许值: left | right | none 初始值: none 适用于: 所有元素 向下兼容: 否 漂浮属性允许网页制作者将文本环绕在一个元素的周围. 这同HTML 3.2中IMG元素的ALIGN=left和ALIGN=right一样，但CSS1允许所有对象“漂浮”，而不像HTML 3.2那样仅仅允许图象和表格。 清除语法: clear: <值> 允许值: none | left | right | both 初始值: none 适用于: 所有元素 向下兼容: 否 清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的none值。这个属性类似于HTML 3.2的函数，但它能应用于所有元素。 分类属性 显示语法: display: <值> 允许值: block | inline | list-item | none 初始值: block 适用于: 所有对象 向下兼容: 否 显示属性允许使用四个值中的一个来定义一个元素: block (在元素的前和后都会有换行) inline (在元素的前和后都不会有换行) list-item (与block相同, 但增加了目录项标记) none (没有显示) 每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。 显示属性可能并不安全，因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示！ 空白语法: white-space: <值> 允许值: normal | pre | nowrap 初始值: normal 适用于: 块级元素 向下兼容: 是 空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个: normal (将多个空格折叠成一个) pre (不折叠空格) nowrap (不允许换行，除非遇到 标记) 目录样式类型语法: list-style-type: <值> 允许值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 初始值: disc 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式项属性指定目录项标记的类型，当目录样式图象值为none或当图象载入选项被关闭时使用。 例如: LI.square { list-style-type: square } UL.plain { list-style-type: none } OL { list-style-type: upper-alpha } /* A B C D E etc. */ OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */ 目录样式图象语法: list-style-image: <值> 允许值: | none 初始值: none 适用于: 带有显示值的目录项元素 向下兼容: 是 当图象载入选项打开时，目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。 例如: UL.check { list-style-image: url(/LI-markers/checkmark.gif) } UL LI.x { list-style-image: url(x.png) } 目录样式位置语法: list-style-position: <值> 允许值: inside | outside 初始值: outside 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式位置属性可以取值inside(内部) or outside(外部)，其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值，换行会移到标记下，而不是缩进。应用的例子如下: Outside rendering: * List item 1 second line of list item Inside rendering: * List item 1 second line of list item 目录样式语法: list-style: <值> 允许值: <目录样式类型> || <目录样式位置> || 初始值: 未定义 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写。 例如: LI.square { list-style: square inside } UL.plain { list-style: none } UL.check { list-style: url(/LI-markers/checkmark.gif) circle } OL { list-style: upper-alpha } OL OL { list-style: lower-roman inside } CSS 单位 长度单位一个长度的值由可选的正号" + "或负号" - "、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。 无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位: em (em，元素的字体的高度) ex (x-height，字母 "x" 的高度) px (像素，相对于屏幕的分辨率) 绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位: in (英寸，1英寸=2.54厘米) cm (厘米，1厘米=10毫米) mm (米) pt (点，1点=1/72英寸) pc (帕，1帕=12点) 百分比单位一个百分比值由可选的正号"＋"或负号"－"、接着的一个数字，还有百分号"%"。在一个百分比值之中是没有空格的。 百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。 颜色单位颜色值是一个关键字或一个RGB格式的数字。 Windows VGA(视频图像阵列)形成了16各关键字: aqua，black， blue，fuchsia，gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，and yellow。 RGB颜色可以有四种形式: #rrggbb (如，#00cc00) #rgb (如，#0c0) rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0)) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如，rgb(0%,80%,0%)) 上述的例子指定同一颜色。 Douglas R. Jacobson先生还开发了速查手册RGB Color Chart (61 kB)。 统一资源管理URLs 一个URL值的格式为 : url(foo)，foo是一个URL(统一资源管理，因特网的地址)。URL可以选择用单引号( ' )或者双引号( " )，并且，在URL之前或之后可以包含空格。 在URL中的括弧，逗号，空格，单引号，或双引号必须避开反斜杠。不完整的URLs被理解为样式表的源代码，而不是HTML源代码。 注意: Netscape Navigator 4.x 会错误地将不完整的URLs理解为相关的HTML源代码。注意到这个错误后，网页制作者应该在可能的地方使用完整的URLs。 例如: BODY { background: url(stripe.gif) } BODY { background: url(http://www.htmlhelp.com/stripe.gif) } BODY { background: url( stripe.gif ) } BODY { background: url("stripe.gif") } BODY { background: url("Ulalume".png) } /* quotes in URL escaped */ 将样式表加入到HTML中 有很多方法将样式表加入到HTML中，每个都带有自己的优点和缺点。新的HTML元素和属性已被加入以允许样式表与HTML文档更简易地组合起来。 连接到一个外部的样式表 嵌入一个样式表 输入一个样式表 内联样式 CLASS属性 ID属性 SPAN元素 DIV元素 关于认证的备注 连接到一个外部的样式表一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中: 标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。 外部样式表不能含有任何像或 STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型，LINK元素也一样。同样地，TITLE和MEDIA属性也可以用STYLE指定。 旧版本的浏览器，并不能识别STYLE元素，会将其当作BODY的一部分照常展示其内容，从而使这些样式表对用户是可见的。要防止这样做，STYLE元素的内容要包含一个SGML注解(<!-- comment -->)在里面，像上述例子那样。 嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表，那么外部样式表会更适用。 输入一个样式表一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素: 注意其它的CSS规则应该仍然包括在STYLE元素中，但所有的@import 声明必须放在样式表的开始部分。任意在样式表中指定了的规则，其自身超越在输入样式表中对立的规则。例如上例，即使一个输入的样式表包含DT { background: aqua }，定义项(definition terms)依然会是黄色的背景。 被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中，如果style.css输入的样式表指定了STRONG元素会显示为红色而punk.css样式表指定了STRONG元素显示为黄色的话，那么后面的规则会获胜，而STRONG元素会显示为黄色。 输入的样式表对于模块性效果很有用处。例如，一个网站可以通过使用了的选择符分类样式表。一个simple.css样式表给出公共的元素像BODY、P、H1和H2。此外，一个extra.css样式表给出较少共通的元素像CODE、BLOCKQUOTE和DFN。一个tables.css样式表可以用于定义变革元素的规则。这三个样式表在需要的时候可以使用@import 声明包括在HTML中。三个样式表也可以通过LINK元素组合。 内联样式样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号隔开。以下是一个例子: 这段的样式是红色的New Century Schoolbook字，如果字体可用的话。 注意在STYLE中New Century Schoolbook包含在单引号中，因为双引号被用作包含样式声明。 内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉，或在HEAD部分包括以下标记: 因为和需要展示的内容混合在一起，内联样式会失去一些样式表的优点。同样地，内联样式默认地接受所有媒体，因为没有任何的为内联样式指定明确的媒体的语句。这种方法应该尽量少用，如当一个样式会应用在所有媒体到一个元素的个别情况。如果样式会被应用到单一元素的场合，但只能使用确认的媒体的话，使用ID属性代替STYLE属性。 CLASS属性 CLASS属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类: .punk { color: lime; background: #ff80c0 } P.warning { font-weight: bolder; color: red; background: white } 这些类可以使用CLASS属性在HTML中引用:属性扩展一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上... 在这个例子中，punk类可以用于任何BODY元素因为它在样式表中没有HTML元素关联。而在这个例子的样式表，warning类只能用于P元素。 一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的warning类也可以命名为red，但如果网页制作者决定改变这个类的样式为别的颜色，或希望为那些使用PC喇叭的人定义为aural(听觉)样式的话，那么这个名字就变得毫无意义了。 类会是应用样式到HTML文档中在结构上一样的部分的有效的办法。例如，本页使用类给CSS源代码和HTML源代码使用不同的样式。 ID属性 ID属性用于定义一个元素的独特的样式。一个CSS规则如 #wdg97 { font-size: larger } 可以通过ID属性应用到HTML中: 欢迎访问Web Design Group及TV water 168! 整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。 注意HTML 4.0允许在ID属性中有句号，但CSS1不允许在ID选择符中有句号。也要注意CSS1允许Unicode字符161-255而且忽略Unicode字符为一个数字代码，但HTML 4.0不允许这些字符在一个ID属性值当中。 当一个样式只需要在任何文档中应用一次时，使用ID是很适合的。 ID与STYLE属性相比，在于ID允许指定媒体的样式，而且也可以被应用于多个文档(虽然每个文档只用一次)。 SPAN元素 SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。 SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。 一些SPAN例子如下:The first few words前面是段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文字的样式为Arial. DIV元素 DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV ("division"，"部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如:Divisions/部分DIV元素在HTML 3.2中有定义，但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。 因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。 要求关闭标记。 滤镜 Photoshop的所有滤镜都按类别放在Filiter菜单中。滤镜的功能非常强大，使用起来也有很多技巧，虽然滤镜用起来很容易，但真正的要用好滤镜，还是需要有丰富的想象力和熟练的操控能力。在使用滤镜时候，我们需要注意以下几点： 1、针对所选择的区域进行处理。如果没有选定区域，则对整个图象做处理；如果只选中某一层或某一通道，则只对当前的层或通道起作用。 2、滤镜的处理效果以象素为单位，就是说相同的参数处理不同分辨率的图象，效果会不同 3、对选取的范围Feather(羽化)一下，能减少突兀的感觉 4、Filter菜单的第一行会记录上一条滤镜的使用情况，方便重复执行。第2行的fade指令用来将执行滤镜后的效果与原图象混合，在对话框里可调整不透明度和色彩混合等。(有点象混合2个单独的层那样子) 5、利用proview的功能 一、Pixelate（像素化）滤镜 Photoshop色彩模式完全手册 在Photoshop中，了解模式的概念是很重要的，因为色彩模式决定显示和打印电子图像的色彩模型（简单说色彩模型是用于表现颜色的一种数学算法），即一副电子图像用什么样的方式在计算机中显示或打印输出。
常见的色彩模式包括位图模式、灰度模式、双色调模式、HSB（表示色相、饱和度、亮度）模式、RGB（表示红、绿、蓝）模式、CMYK（表示青、洋红、黄、黑）模式、Lab模式、索引色模式、多通道模式以及8位/16位模式，每种模式的图像描述和重现色彩的原理及所能显示的颜色数量是不同的。 色彩模式除确定图像中能显示的颜色数之外，还影响图像的通道数和文件大小。这里提到的通道也是Photoshop中的一个重要概念，每个Photoshop图像具有一个或多个通道，每个通道都存放着图像中颜色元素的信息。图像中默认的颜色通道数取决于其色彩模式。例如，CMYK图像至少有四个通道，分辨代表青、洋红、黄和黑色信息。除了这些默认颜色通道，也可以将叫做Alpha通道的额外通道添加到图像中，以便将选区作为蒙板存放和编辑，并且可添加专色通道。一个图像有时多达24个通道，默认情况下，位图模式、灰度双色调和索引色图像中仍一个通道；RGB和Lab图像有三个通道；CMYK图像有四个通道。 一、HSB模式 HSB模式是基于人眼对色彩的观察来定义的，在此模式中，所有的颜色都用色相或色调、饱和度、亮度三个特性来描述。 1. 色相（H） 色相是与颜色主波长有关的颜色物理和心理特性，从实验中知道，不同波长的可见光具有不同的颜色。众多波长的光以不同比例混合可以形成各种各样的颜色，但只要波长组成情况一定，那么颜色就确定了。非彩色（黑、百、灰色）不存在色相属性；所有色彩（红、橙、黄、绿、青、蓝、紫等）都是表示颜色外貌的属性。它们就是所有的色相，有时色相也称为色调。 2. 饱和度（S） 饱和度指颜色的强度或纯度，表示色相中灰色成分所占的比例，用0%-100%（纯色）来表示。 3. 亮度（B） 亮度是颜色的相对明暗程度，通常用0%（黑）-100%（白）来度量。 二、RGB模式 RGB模式是基于自然界中3种基色光的混合原理，将红（R）、绿（G）和蓝（B）3中基色按照从0（黑）到255（白色）的亮度值在每个色阶中分配，从而指定其色彩。当不同亮度的基色混合后，便会产生出256*256*256种颜色，约为1670万种。例如，一种明亮的红色可能R值为246，G值为20，B值为50。当3种基色的亮度值相等时，产生灰色；当3种亮度值都是255时，产生纯白色；而当所有亮度值都是0时，产生纯黑色。当3种色光混合生成的颜色一般比原来的颜色亮度值高，所以RGB模式产生颜色的方法又被称为色光加色法。 三、CMYK模式 CMYK颜色模式是一种印刷模式。其中四个字母分别指青（Cyan）、洋红（Magenta）、黄（Yellow）、黑（Black），在印刷中代表四种颜色的油墨。CMYK模式在本质上与RGB模式没有什么区别，只是产生色彩的原理不同，在RGB模式中由光源发出的色光混合生成颜色，而在CMYK模式中由光线照到有不同比例C、M、Y、K油墨的纸上，部分光谱被吸收后，反射到人眼的光产生颜色。由于C、M、Y、K在混合成色时，随着C、M、Y、K四种成分的增多，反射到人眼的光会越来越少，光线的亮度会越来越低，所有CMYK模式产生颜色的方法又被称为色光减色法。 四、Lab模式 Lab模式的原型是由CIE协会在1931年制定的一个衡量颜色的标准，在1976年被重新定义并命名为CIELab。此模式解决了由于不同的显示器和打印设备所造成的颜色扶植的差异，也就是它不依赖于设备。 Lab颜色是以一个亮度分量L及两个颜色分量a和b来表示颜色的。其中L的取值范围是0-100，a分量代表由绿色到红色的光谱变化，而b分量代表由蓝色到黄色的光谱变化，a和b的取值范围均为-120-120。 Lab模式所包含的颜色范围最广，能够包含所有的RGB和CMYK模式中的颜色。CMYK模式所包含的颜色最少，有些在屏幕上砍刀的颜色在印刷品上却无法实现。 五、其他颜色模式 除基本的RGB模式，CMYK模式和Lab模式之外，Photoshop支持（或处理）其他的颜色模式，这些模式包括位图模式、灰度模式、双色调模式、索引颜色模式和多通道模式。并且这些颜色模式有其特殊的用途。例如，灰度模式的图像只有灰度值而没有颜色信息；索引颜色模式尽管可以使用颜色，但相对于RGB模式和CMYK模式来说，可以使用的颜色真是少之又少。下面就来介绍这几种颜色模式。 1. 位图（Bitmap）模式 位图模式用两种颜色（黑和白）来表示图像中的像素。位图模式的图像也叫作黑白图像。因为其深度为1，也称为一位图像。由于位图模式只用黑白色来表示图像的像素，在将图像转换为位图模式时会丢失大量细节，因此Photoshop提供了几种算法来模拟图像中丢失的细节。 在宽度、高度和分辨率相同的情况下，位图模式的图像尺寸最小，约为灰度模式的1/7和RGB模式的1/22以下。 2. 灰度（Grayscale）模式 灰度模式可以使用多达256级灰度来表现图像，使图像的过渡更平滑细腻。灰度图像的每个像素有一个0（黑色）到255（白色）之间的亮度值。灰度值也可以用黑色油墨覆盖的百分比来表示（0%等于白色，100%等于黑色）。使用黑折或灰度扫描仪产生的图像常以灰度显示。 3. 双色调（Duotone）模式 双色调模式采用2-4种彩色油墨来创建由双色调（2种颜色）、三色调（3种颜色）和四色调（4种颜色）混合其色阶来组成图像。在将灰度图像转换为双色调模式的过程中，可以对色调进行编辑，产生特殊的效果。而使用双色调模式最主要的用途是使用尽量少的颜色表现尽量多的颜色层次，这对于减少印刷成本是很重要的，因为在印刷时，每增加一种色调都需要更大的成本。 4. 索引颜色（Indexed Color）模式 索引颜色模式是网上和动画中常用的图像模式，当彩色图像转换为索引颜色的图像后包含近256种颜色。索引颜色图像包含一个颜色表。如果原图像中颜色不能用256色表现，则Photoshop会从可使用的颜色中选出最相近颜色来模拟这些颜色，这样可以减小图像文件的尺寸。用来存放图像中的颜色并为这些颜色建立颜色索引，颜色表可在转换的过程中定义或在声称索引图像后修改。 5. 多通道（Multichannel）模式 多通道模式对有特殊打印要求的图像非常有用。例如，如果图像中只使用了一两种或两三种颜色时，使用多通道模式可以减少印刷成本并保证图像颜色的正确输出。 6. 8位/16位通道模式 在灰度RGB或CMYK模式下，可以使用16位通道来代替默认的8位通道。根据默认情况，8位通道中包含256个色阶，如果增到16位，每个通道的色阶数量为65536个，这样能得到更多的色彩细节。Photoshop可以识别和输入16位通道的图像，但对于这种图像限制很多，所有的滤镜都不能使用，另外16位通道模式的图像不能被印刷。 六、颜色模式的转换 为了在不同的场合正确输出图像，有时需要把图像从一种模式转换为另一种模式。Photoshop通过执行“Image/Mode（图像/模式）”子菜单中的命令，来转换需要的颜色模式。这种颜色模式的转换有时会永久性地改变图像中的颜色值。例如，将RGB模式图像转换为CMYK模式图像时，CMYK色域之外的RGB颜色值被调整到CMYK色域之外，从而缩小了颜色范围。 由于有些颜色在转换后会损失部分颜色信息，因此在转换前最好为其保存一个备份文件，以便在必要时恢复图像。 1.将彩色图像转换为灰度模式 将彩色图像转换为灰度模式时，Photoshop会扔掉原图中所有的颜色信息，而只保留像素的灰度级。 灰度模式可作为位图模式和彩色模式间相互转换的中介模式。 2.将其他模式的图像转换为位图模式 将图像转换为位图模式会使图像颜色减少到两种，这样就大大简化了图像中的颜色信息，并减小了文件大小。要将图像转换为位图模式，必须首先将其转换为灰度模式。这会去掉像素的色相和饱和度信息，而只保留亮度值。但是，由于只有很少的编辑选项能用于位图模式图像，所以最好是在灰度模式中编辑图像，然后再转换它。 在灰度模式中编辑的位图模式图像转换回位图模式后，看起来可能不一样。例如，在位图模式中为黑色的像素，在灰度模式中经过编辑后可能会灰色。如果像素足够亮，当转换回位图模式时，它将成为白色。 3.将其他模式转换为索引模式 在将色彩图像转换为索引颜色时，会删除图像中的很多颜色，而仅保留其中的256种颜色，即许多多媒体动画应用程序和网页所支持的标准颜色数。只有灰度模式和RGB模式的图像可以转换为索引颜色模式。由于灰度模式本身就是由256级灰度构成，因此转换为索引颜色后无论颜色还是图像大小都没有明显的差别。但是将RGB模式的图像转换为索引颜色模式后，图像的尺寸将明显减少，同时图像的视觉品质也将多少受损。 4.将RGB模式的图像转换成CMYK模式 如果将RGB模式的图像转换成CMYK模式，图像中的颜色就会产生分色，颜色的色域就会受到限制。因此，如果图像是RGB模式的，最好选在RGB模式下编辑，然后再转换成CMYK图像。 5.利用Lab模式进行模式转换 在Photoshop所能使用的颜色模式中，Lab模式的色域最宽，它包括RGB和CMYK色域中的所有颜色。所以使用Lab模式进行转换时不会造成任何色彩上的损失。Photoshop便是以Lab模式作为内部转换模式来完成不同颜色模式之间的转换。例如，在将RGB模式的图像转换为CMYK模式时，计算机内部首先会把RGB模式转换为Lab模式，然后再将Lab模式的图像转换为CMYK模式图像。 6.将其他模式转换成多通道模式 多通道模式可通过转换颜色模式和删除原有图像的颜色通道得到。 将CMYK图像转换为多通道模式可创建由青、洋红、黄和黑色专色（专色是特殊的预混油墨，用来替代或补充印刷四色油墨；专色通道是可为图像添加预览专色的专用颜色通道。）构成的图像。 将RGB图像转换成多通道模式可创建青、洋红和黄专色构成的图像。 从RGB、CMYK或Lab图像中删除一个通道会自动将图像转换为多通道模式。原来的通道被转换成专色通道。 开篇寄语 这个msn space是专门收集整理来自网上的部分教程，以便为自己也为了更多的人服务。大部分教程都是转载。没有注明出处，并非不尊重作者。因为BBS上很多教程经常被多次转载，无法明确出处。相信那些出教程的人都是为了让大家互相学习，促进交流，共同提高！
在此，谨代表从教程中受益的人向作者以及教程提供者表示感谢和敬意！ |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
