wap2.0介绍 - wcss

1.  使用WCSS的优势
主要：学习成本降低，可用相同的开发工具，可用WEB浏览器浏览。
表现和结构的分离：匹配不同无线设备的特征（屏幕大小）、不同客户端代理（PC、PDA、手机）；降低维护成本（新手机）；改变视觉和布局仅需CSS；重复使用CSS；便于工作细分。
比WML更好的控制表现：可以定义元素的color，font，background，border，margin，padding等属性。
移动设备第一次访问站点下载样式（Cache）。
使用外部WCSS，XHTML MP的文档大小变小，提高下载时间。

 

2.  使用WCSS的劣势
不同的WAP浏览器对WCSS的支持不同，可能一个属性在这个WAP浏览器上支持，而另外一个不支持。
外部的WAP CSS可能增加第一次访问页面的请求时间。原因：外部WCSS不存在于手机的Cache，必须从服务器下载；XHTML MP文档和外部的WCSS下载是不同的请求，增加了服务器压力；如果使用一个WCSS定义WAP站点的所有表现，该文件大小可能很大；WAP浏览器需要解析WCSS到XHTML MP文档。

3.  MIME 类型和文件扩展名
MIME类型： text/css。
文件扩展名：.css

 

4.  WCSS的语法规则
WCSS声明：selector {property: property_value}
多个属性允许用’;’分隔。
多个选择器也是允许用‘，’分隔。
注释：/*orz*/，WAP浏览器将忽略这些内容。

5.  如何在XHTML MP文档中应用
链接外部WCSS（推荐），放置在文档的head部分，用style属性定义WCSS样式
<link href=“url” rel=“stylesheet” type=“text/css”/>，可以多个，无需修改rel和type属性。
<style type="text/css"> &nbsp;some WCSS statements </style>
<hr style="color: blue"/>

 

6.  不同的选择器
类型选择器：h1 { font-style: italic} 元素名称必须小写。
Class选择器： .class { color:blue} 对应标签的class属性，还可以联合元素名称使用 h1.class {color:blue}。
ID选择器：#id {color:red} 对应标签的id属性也可联合元素名称。
通用选择器：* { color:blue} ，所有的标签。注意：在某些WAP浏览器上会使样式渲染变慢。（建议不要用）

 

7.  常用的属性值
长度：%，px，em，ex，cm，mm，in，pt，pc（值和单位之间不允许有空格：margin-top:1px而不是margrin-top:1 px）。
颜色：rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。
URL：ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。

8.  字体和文本属性
字体名称：p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。
字体大小：p {font-size:12px}，也可以用xx-small，x-samll，small，medium，large，x-large，xx-large
字体样式：斜体、粗体和下划线（font-style,font-weight和text-decoration）。
设置文本对齐：text-align和float。WAP中float（left,right,none）常用在img和table标签

 

9.  列表属性
改变无序列表的图标（list-style-type ）：默认disc，其他值：circle，square，none。可以应用在ul和li元素上。
改变有序列表的次序：默认decimal，其他值：upper-alpha（A），lower-alpha（a），upper-raman（I），lower-raman（i），none
使用图片文件作为小图标：list-style-image: url(bullet.gif) 。注：Openware WAP浏览器本地保存了一些icon，可以使用这些作为小图标，例如：ul {list-style-image: localsrc("rightarrow1")}

 

10.  颜色属性和border属性
设置前景和背景颜色：color、background-color属性。
设置border样式：border-style（border-top-style等）属性，值有很多，但只有none和solid被WAP浏览器广泛支持。table {border-style: solid}
设置border宽度：border-width（同上）属性，值为数值，还接受thin、medium和thick。注：值设置border-width，border并不可见，必须设置border-style非none值。
设置border颜色：border-color（同上）属性。注意点同上。
设置border属性的快捷方式：table {border: 2px solid black} 
     顺序自由。

 

11.  WAP特有的CSS扩展
快捷键：-wap-accesskey ，用来指定XHTML MP元素的快捷键。
Input：定义文本框是否可以留空，什么类型，可以输入多少字符
Marquee：在屏幕上滚动一些内容。
  11.1 WCSS快捷键扩展
给元素定义快捷键：-wap-accesskey属性
可用的属性值*，#，0，1，2，3，4，5，6，7，8，9
       input.wcss_class {-wap-accesskey: 4}
直接定义*和#违反CSS2语法。需要使用Unicode转义字符/2a和/23。但是有些WAP浏览器（Sony Ericsson WAP 浏览器 ）要求使用/2a 和 /23,一些（Openwave 手机浏览器） 要求使用* 和#。
与元素的accesskey属性同效，如同时定义，显示该属性值。
只用于四个元素a， input，label，textarea，其他定义也无效。

  11.2 WCSS输入扩展
由两个属性组成：-wap-input-famat和-wap-input-required，对应于WML中<input>元素的format（定义类型和字符数量）和emptyok（是否可以留空）属性。
早些的移动设备上WAP浏览器不支持，但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性，建议WCSS和WML都使用。
       <input type="text" format="N" style='-wap-input-format: "N"'/>
控制文本框的类型和字符数量：-wap-input-format。需应用在<input type=“text”>, <input type=“password”>和<textarea> 标签上，如应用在其他标签无效。格式字符（大小写敏感）：a（小
       写字母或符号），A（大写字母或符号），n（数字或符号），N（数字），x（小写字母或数字或符号），X（大写字母或数字或符号），m（任何字符，默认小写字母输入模式，可换大写模式），M（任何字符，默认大写字母输入模式，可换小写模式）。属性值必须包含在引号内，由于部分Openwave 手机浏览器不支持单引号，建议使用双引号（<input type=“text” style=‘-wap-input-format: “N”’/> ）
       -wap-input-format: “2N” （最多两个数字）    -wap-input-format: “NN” （两个数字）   -wap-input-format: “*N” （无限个数字）
       -wap-input-format: “A*a” （第一个大写字母或符号，0-n个小写字母或符号） -wap-input-format :“*M”（默认）
       格式字符前使用数字或*的原则：1、只允许一次；2、在最后如果值语法错误，则WAP浏览器忽略该属性。
       也可以包含转义字符：’/’在WCSS中是特殊字符，使用’//’。
控制文本框是否可以留空：-wap-input-required（值为：false和true ），帮助控制文本框是否可以空白。使用元素同上。
       当-wap-input-format和-wap-input-required冲突时，以required优先。

  11.3 WCSS Marquee扩展
可以在屏幕上滚动一些内容（一行文字，一个图片，一个链接等），但一些WAP浏览器只支持滚动文字。当内容超过屏幕时很有用。
包含四个属性和一个属性值：-wap-marquee属性值（display属性的值），-wap-marquee-dir属性（指定marquee的方向,值：ltr，rtl-默认），-wap-marquee-loop属性（指定marquee重复的时间，infinite永远，大多数默认为1），-wap-marquee-speed属性（指定marquee的速度，值：slow，normal-默认，fast），-wap-marquee-style（指定marquee在屏幕上如何滚动，有三个值：scroll-默认，slide，alternate）