11.20日音讯,剖析XHTML与CSS的所属关系。Web标准至今汉有对外观审美做任何指导方针和戒律,对站点的外观和感觉没有做任何限制,它们只不过使浏览器能够正确地表现设计师创建的站点,帮助客户根据公司的市场需求和用户分析来制定目标。
Web标准可以做到:
*在图形浏览器上更精确的控制、定位和排版
*复杂的交互行为
*可访问性
*支持多种浏览器
*新、旧浏览器都可以工作
*保证可以工作在将来的游览器上
*重新设计网站时间缩短
*支持非传统设备
*易为任何网页提供适合打印的版本
*在发布流程中易重新设计文档
*HTML转换到XML基础的置标语言
使用web标准的原因:
*增强交互能力
*增强可访问性
*减少维护工作量
*减少带宽
*降低成本
XHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似HTML的角色的XML。
本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。
----JefferyZeldman
切换到XHTML的10个理由:
*XHTML是当前替代HTML4标记语言的标准。
*XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。
*XHTML比HTML有更好的一致性。
*XHTML1.0是通向XHTML未来版本的桥梁
*老的浏览器能适应XHTML
*新浏览器都优待XHTML而不是HTML
*XHTML能很好在无线设备等其它用户代理上。
*XHTML是Web标准家族的一部分
*XHTML可助你去掉表现层代码的恶习
*XHTML可助你养成标记校验来测试页面工作的习惯
XHTML规则:
*以正确的DOCTYPE和名字空间开始
*使用META内容元素声明你的内容编码语言
*用小写字母写所有元素和属性名称
*给所有的属性值加引号,属性间以空格分隔。
*给所有的属性赋一个值
*关闭所有标签
*用空格和斜线关闭空标签
*不要在注释内容中使用"――"
*确保使用<和&表示<和&.
XHTML1提供的DTD有三种:
*Transitional,过渡的,最宽松的DTD,唯一容忍表现层的标记、垃圾元素和属性的DTD
*Strict,严格的,
*Frameset,框架的,
XHTML声明内容编码的方法:
*XMLprolog,即,但浏览器多不处理此
*中插入Content-Type元素指定编码语言,
*通过web服务器上返回的HTTP头部设置编码语言,w3c推荐这种方法。
增加结构的通用机制
*DIV和SPAN元素,联合id和class属性,提供了一个把结构添加到文档的通用机制。
*这些元素定义了内置的内容(SPAN)和者块级别(DIV),而没有在内容中引入其它表现层的东西。
*ID属性类似于代码中的特殊区域的标签,提示那个区域需要特殊的处理。当一个ID属性值被用于一个特殊设置的CSS,它称为CSS选择器,id是创建一个选择器的最容易和通用的方法。
*ID的命名须用字母和下划线开头,不能用数字进行开头。
ID的功能
*作为一个样式表选择器,最小化XHTML页面文件;
*作为超链的锚(anchor),替代过时的name属性;
*DOM脚本中引用元素的方法;
*作为一个声明的对象元素名字;
*作为通常目的流程处理的工具。
#一个样式表,是一个集合,一个由一个或多个规则定义组成的集合,这些定义将决定被选中的元素如何被显示。
#一个CSS定义由两部分组成:选择器和声明。其中,声明是也是一个集合,集合元素放在一对{}内,每一元素以";"结束,每个元素由两部分组成:属性和值,属性和值之间用":"分隔。
#以#开头的选择器,为id选择器,以.开头的选择器为选择器。
#多个选择器可以共享同一声明,这时不同选择之间以逗号分隔。
#根据CSS,页面的子元素从母元素继承特性,但有些旧浏览器不支持(如Netscape4)。如果不想让子元素继承母元素特性,则子元素可自由定义相关属性。
#CSS不区分大小写,但当与一个HTML文件关联时,类别和id名称是区分大小写的。
#为了便于编辑CSS,可以增加一些空格或换行符。
#样式表可以通过三种方式作用于页面的显示
1.外联/导入
<linkrel="StyleSheet"href="/styles/mystylesheet.css"type="text/css"media="all/>
或
<styletype="text/css"media="all">
@import"/styles/mystylesheet.css";
</style>
或
<styletype="text/css"media="all">
@importurl("/styles/mystylesheet.css");
</style>
注:@Import法只有5.0以上的浏览器支持
2.嵌入(在XHTML页面head位置嵌入)
以下是引用片段:
<head>
<styletype="text/css">
<!-
…
-->
</style>
…
</head>
使用嵌入的原因:
*该样式表只用于本页面
*用户还在使用IE3
*设计师不断修改样式表,需要立即看到效果
3.内联(在元素上加上样式属性)
为整个站点指定字体:
*body{font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,sans-serif;}
*由多个字母组成的字体名称须用引号包括;
*如果排在前面的字体不存在,则使用后面第一个存在的字体。
*"LucidaGrande"-MacOSX,Verdana-Windows,Lucida---Unix,Arial----旧windows,Helvetica----旧Unix
*利用冗余解决浏览器不支持继承的问题,如:
Body{font-family:Verdana,sans-serif;}P,td,ul,ol,ul,li,dl,dt,dd
{font-family:Verdana,sans-serif;}
将无序列表前的黑点替换为一个图片:
*ul.inventory{list-style:discurl(/path/to/pic.gif)inside;}
对颜色的定义:
*P{color:red;}
*P{color:#ff0000;}
*P{color:#f00;}
*P{color:rgb(255,0,0);}
*P{color:rgb(100%,0%,0%);}
#根据元素表现的内容来决定元素的样式,避免过度的class,保持标记的简洁整齐。
#如:列表项里strong显示为斜体而不是黑体。Listrong{Font-style:italic;Font-weight:normal;}
#选择器的两部分内容之间,以空格相隔,其中前一部分可以是一般选择、id选择器、或类选择器。
#现代布局中,id选择器经常出现在内容选择器里
如:#sidebarp{font-style:italic;text-align:right;margin-top:0.5em;}
#不能出现在或等标记的内联元素中。
#Id选择器标记的元素每个页面只能出现一次,但一个id选择器可多次用于定义内容/派生选择器定义。