|
|
|||||||||||
|
|||||||||||||
| 当前位置： 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
| CSS中文教程 | |||
| 2009-7-12 10:37:35 文/网络收集 出处:电脑软硬件应用网 | |||
|
分类属性 显示语法: 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 适用于: 带有显示值的目录项元素 向下兼容: 是 当图象载入选项打开时，目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。 例如: 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(/help/picture_4256/200504/20050429120506810.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注解()在里面，像上述例子那样。 嵌入的样式表可用于当一个文档具有独一无二的样式的时候。如果多个文档都使用同一样式表，那么外部样式表会更适用。 输入一个样式表 一个样式表可以使用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中引用: 属性扩展一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上... 欢迎访问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前面是 DIV元素 DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV ("division"，"部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如: Divisions/部分DIV元素在HTML 3.2中有定义，但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。 因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。 要求关闭标记。 关于认证的备注 少数使用了CSS样式的文档能在HTML3.2 (Wilbur)层(在WDG网站，译者注)得到认证。HTML3.2不会解释SPAN元素，也不解释CLASS、STYLE或ID属性，而且在LINK和STYLE元素中也很少支持TYPE和MEDIA属性。 这些有关的样式元素和属性对不支持的浏览器不会有害，因为它们能安全地忽略。文档使用这些元素和属性可以被认证防御于HTML 4.0。 依赖样式表 层叠样式表还没有开始广泛使用，但CSS的滥用已经开始。样式表，当使用得当时，可以是一个提供独特和有吸引力的展示的有力工具，当时也允许一个网页被所有用户轻易处理。然而，一旦网页的信息变得依赖样式表时，网页就变成了Web上的失败者。 样式表的设计在于允许网页制作者去改变网页的展示，而不是控制展示。样式表会被可能选择—或需要—他们自己的样式表的用户所超越。因为这些原因，依赖一些样式的网页制作者会发现他们的网页对于部分重要的用户来说难以接受。 样式表的无聊使用演示于一些所谓的CSS图表。一个出现在许多地方的共通弊端是"制作阴影"。这种做法使用了负边界值，而加入了大量的依赖样式表的因素。当样式表被除去，无论是用户的决定还是使用了不支持CSS的浏览器，这些网页往往都不可用了。 例如，看看SpaceGUN Magazine，一个虚构在Microsoft's CSS Gallery的杂志。使用Microsoft Internet Explorer 3.01的打开样式表时，其展示必定是独特和引人注目的，但一旦样式表失效，即使使用同样的浏览器，结果也非常不同。 十分明显，网页因为制作的阴影和负边界值的把戏而在Web上不可用，从而因为搞得乱七八糟脱离了许多读者。这个例子也显示依赖样式表是必然失败的。一个Web文档如果不易处理是没有生命力。 样式表设计者应该小心以总是保证他们的网页没有依赖样式表。一些网页制作者尝试使用WingDings字体制作图象无须争议和增加真正图象的下载时间。尽管这种减少下载时间的动机是可赞赏的，然而这样的人依赖于用户具有WingDings字体和样式表是有效的——在万维网(World Wide Web)上，这些条件是永远无法确认的。 CSS 参考 从以下网址你可以了解到CSS发展的最新动态和技术资料：
|
|||
| 最新热点 | 最新推荐 | 相关文章 | ||
| CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程：CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见？ CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
| 关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
|
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |
