程式師世界 >> 編程語言 >> JAVA編程 >> J2ME >> 解析J2ME中CSS的使用

解析J2ME中CSS的使用

編輯：J2ME

本文向大家簡單介紹一下J2ME中CSS的使用，首先看一下J2ME的概念，J2ME是Java2這個平台專門針對家電類產品和嵌入式設備制定的,組成J2ME的Java虛擬機和API是與那些針對家電類產品和嵌入式產品的運行環境相匹配的。

J2ME中CSS解析

最近做手機浏覽器項目中的CSS模塊。對解析CSS有了個整體認識。現總結如下：

首先，簡單的介紹下CSS：

CSS指層疊樣式表(CascadingStyleSheets)

CSS語法由三部分構成：選擇器、屬性和值：selector{property:value}

選擇器(selector)通常是你希望定義的Html元素或標簽，屬性(property)是你希望改變的屬性，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括號包圍，這樣就組成了一個完整的樣式聲明（declaration）：

body{color:blue}

上面這行代碼的作用是將body元素內的文字顏色定義為藍色。在上述例子中，body是選擇器，而包括在花括號內的的部分是聲明。聲明依次由兩部分構成：屬性和值，color為屬性，blue為值。

CSS主要可以從ID選擇器和class選擇器去研究：

一：id選擇器

id選擇器可以為標有特定id的Html元素指定特定的樣式。id選擇器以"#"來定義。下面的兩個id選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red{color:red;}  
#green{color:green;}

下面的Html代碼中，id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。

<pidpid="red">這個段落是紅色。</p> 
<pidpid="green">這個段落是綠色。</p>

在現代布局中，id選擇器常常用於建立派生選擇器。

#sidebarp{  
font-style:italic;  
text-align:right;  
margin-top:0.5em;  
}

上面的樣式只會應用於出現在id是sidebar的元素內的段落。這個元素很可能是div或者是表格單元。

二：class類選擇器

在CSS中，類選擇器以一個點號顯示：
.center{text-align:center}
在上面的例子中，所有擁有center類的Html元素均為居中。

1.class派生選擇器：

.fancytd{  
color:#f60;  
background:#666;  
}

在上面這個例子中，類名為fancy的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為fancy的更大的元素可能是一個表格或者一個div）

元素也可以基於它們的類而被選擇：

td.fancy{  
color:#f60;  
background:#666;  
}

在上面的例子中，類名為fancy的表格單元將是帶有灰色背景的橙色。
<tdclass="fancy">

三：CSS優先級

層疊次序

當同一個Html元素被不止一個樣式定義時，會使用哪個樣式呢？

一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字4擁有最高的優先權。
i.浏覽器缺省設置
ii.外部樣式表
iii.內部樣式表（位於<head>標簽內部）
iv.內聯樣式（在Html元素內部）

因此，內聯樣式（在Html元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：<head>標簽中的樣式聲明，外部樣式表中的樣式聲明，或者浏覽器中的樣式聲明（缺省值）

下面對內聯樣式中css優先級具體介紹CSS優先級的四大原則：

原則一：繼承不如指定

如果某樣式是繼承來的永遠不如具體指定的優先級高。

例子1：

CODE:

<styletypestyletype="text/CSS"> 
*{font-size:20px}  
.class3{font-size:12px;}  
</style> 
<spanclassspanclass="class3">我是多大字號？</span>

運行結果：.class3{font-size:12px;}

原則二：#ID>.class>標簽選擇符

例子：
CODE:

<styletypestyletype="text/CSS"> 
#id3{font-size:25px;}  
.class3{font-size:18px;}  
span{font-size:12px}  
</style> 
<spanidspanid="id3"class="class3">我是多大字號？</span>

運行結果：#id3{font-size:25px;}

原則三：越具體越強大。

解釋：當對某個元素的CSS選擇符樣式定義的越具體，層級越明確，該定義的優先級就越高。
CODE:

<styletypestyletype="text/CSS"> 
.class1.class2.class3{font-size:25px;}  
.class2.class3{font-size:18px}  
.class3{font-size:12px;}  
</style> 
<divclassdivclass="class1"> 
<pclasspclass="class2"> 
<spanclassspanclass="class3">我是多大字號？</span> 
</p> 
</div>

運行結果：.class1.class2.class3{font-size:25px;}

原則四：標簽#id>#id;標簽.class>.class

上面這條原則大家應該也都知道，看例子
CODE:

<styletypestyletype="text/CSS"> 
span#id3{font-size:18px}  
#id3{font-size:12px}  
span.class3{font-size:18px}  
.class3{font-size:12px}  
</style> 
 
<spanidspanid="id3">我是多大字號？</span> 
<spanclassspanclass="class3">我是多大字號？</span>