簡介
XHTML MP的重點是它對CSS的支持。CSS [CSS1]描述如何在瀏覽器中把文檔顯示在螢幕上。W3C積極促進CSS在Web中的使用,使其能用於所有桌上型電腦和移動瀏覽器。 通過使用CSS,無需像在WML 1.x一樣犧牲設備獨立性或加入新的標記語言標籤,文檔創建者就可以控制文檔的顯示。
WML不支持WCSS
注意:W3C CSS Mobile Profile和WAP CSS 不同。
WCSS 是 CSS2.0的子集,所以語法基本類似。
語法規則
WCSS聲明:selector {property: property_value}
多個屬性允許的,用’;’分隔。
多個選擇器也是允許的,用‘,’分隔。
注釋:/*orz*/,WAP瀏覽器將忽略這些內容。
如何在XHTML MP文檔中套用
連結外部WCSS(推薦),放置在文檔的head部分,用style屬性定義WCSS樣式
<link href=“url” rel=“stylesheet” type=“text/css”/>,可以多個,無需修改rel和type屬性。
<style type="text/css"> some WCSS statements </style>
<hr style="color: blue"/>
類型選擇器:h1 { font-style: italic} 元素名稱必須小寫。
Class選擇器: .class { color:blue} 對應標籤的class屬性,還可以聯合元素名稱使用 h1.class {color:blue}。
ID選擇器:#id {color:red} 對應標籤的id屬性也可聯合元素名稱。
通用選擇器:* { color:blue} ,所有的標籤。注意:在某些WAP瀏覽器上會使樣式渲染變慢。(建議不要用)
長度:%,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)} 無引號、雙引號、單引號均可。
字型名稱: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標籤
改變無序列表的圖示(list-style-type ):默認disc,其他值:circle,square,none。可以套用在ul和li元素上。
改變有序列表的次序:默認decimal,其他值:upper-alpha(A),lower-alpha(a),upper-raman(I),lower-raman(i),none
3. 使用圖片檔案作為小圖示:list-style-image: url(bullet.gif) 。註:Openware WAP瀏覽器本地保存了一些icon,可以使用這些作為小圖示,例如:ul {list-style-image: localsrc("rightarrow1")}
設定前景和背景顏色: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} 順序自由。
另外,WCSS擁有一些WAP特有的CSS擴展:
給元素定義快捷鍵:-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,其他定義也無效。
由兩個屬性組成:-wap-input-famat和-wap-input-required,對應於WML中<input>元素的format(定義類型和字元數量)和emptyok(是否可以留空)屬性。早些的移動設備上WAP瀏覽器不支持,但支持format和emptyok屬性作為XHTML MP的擴展。為了更好的兼容性,建議WCSS和WML都使用。
WCSS Marquee擴展
可以在螢幕上滾動一些內容(一行文字,一個圖片,一個連結等),但一些WAP瀏覽器只支持滾動文字。當內容超過螢幕時很有用。