解析J2ME中CSS的使用

开发 前端
J2ME是Java2这个平台专门针对家电类产品和嵌入式设备制定的,这里向大家描述一下J2ME中CSS用法,希望对你的学习有所帮助。

本文向大家简单介绍一下J2ME中CSS的使用,首先看一下J2ME的概念,J2ME是Java2这个平台专门针对家电类产品和嵌入式设备制定的,组成J2ME的Java虚拟机和API是与那些针对家电类产品和嵌入式产品的运行环境相匹配的。

J2ME中CSS解析

最近做手机浏览器项目中的CSS模块。对解析CSS有了个整体认识。现总结如下:

首先,简单的介绍下CSS:

CSS指层叠样式表(CascadingStyleSheets)

CSS语法由三部分构成:选择器、属性和值:selector{property:value}

选择器(selector)通常是你希望定义的HTML元素或标签,属性(property)是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration):

  1. body{color:blue}  
  2.  

上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中,body是选择器,而包括在花括号内的的部分是声明。声明依次由两部分构成:属性和值,color为属性,blue为值。

CSS主要可以从ID选择器和class选择器去研究:

一:id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。下面的两个id选择器,***个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: 

  1. #red{color:red;}  
  2. #green{color:green;} 

下面的HTML代码中,id属性为red的p元素显示为红色,而id属性为green的p元素显示为绿色。 

  1. <pidpid="red">这个段落是红色。</p> 
  2. <pidpid="green">这个段落是绿色。</p> 

在现代布局中,id选择器常常用于建立派生选择器。 

  1. #sidebarp{  
  2. font-style:italic;  
  3. text-align:right;  
  4. margin-top:0.5em;  

上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div或者是表格单元。

二:class类选择器

在CSS中,类选择器以一个点号显示:
.center{text-align:center}
在上面的例子中,所有拥有center类的HTML元素均为居中。

1.class派生选择器: 

  1. .fancytd{  
  2. color:#f60;  
  3. background:#666;  

在上面这个例子中,类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为fancy的更大的元素可能是一个表格或者一个div)

元素也可以基于它们的类而被选择: 

  1. td.fancy{  
  2. color:#f60;  
  3. background:#666;  

在上面的例子中,类名为fancy的表格单元将是带有灰色背景的橙色。
<tdclass="fancy">#p#

三:CSS优先级

层叠次序

当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有***的优先权。
i.浏览器缺省设置
ii.外部样式表
iii.内部样式表(位于<head>标签内部)
iv.内联样式(在HTML元素内部)

因此,内联样式(在HTML元素内部)拥有***的优先权,这意味着它将优先于以下的样式声明:<head>标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)

下面对内联样式中css优先级具体介绍css优先级的四大原则:

原则一:继承不如指定

如果某样式是继承来的永远不如具体指定的优先级高。

例子1:

CODE: 

  1. <styletypestyletype="text/css"> 
  2. *{font-size:20px}  
  3. .class3{font-size:12px;}  
  4. </style> 
  5. <spanclassspanclass="class3">我是多大字号?</span> 

运行结果:.class3{font-size:12px;}

原则二:#ID>.class>标签选择符

例子:
CODE: 

  1. <styletypestyletype="text/css"> 
  2. #id3{font-size:25px;}  
  3. .class3{font-size:18px;}  
  4. span{font-size:12px}  
  5. </style> 
  6. <spanidspanid="id3"class="class3">我是多大字号?</span> 

 运行结果:#id3{font-size:25px;}

原则三:越具体越强大。

解释:当对某个元素的CSS选择符样式定义的越具体,层级越明确,该定义的优先级就越高。
CODE: 

  1. <styletypestyletype="text/css"> 
  2. .class1.class2.class3{font-size:25px;}  
  3. .class2.class3{font-size:18px}  
  4. .class3{font-size:12px;}  
  5. </style> 
  6. <divclassdivclass="class1"> 
  7. <pclasspclass="class2"> 
  8. <spanclassspanclass="class3">我是多大字号?</span> 
  9. </p> 
  10. </div> 

 运行结果:.class1.class2.class3{font-size:25px;}

原则四:标签#id>#id;标签.class>.class

上面这条原则大家应该也都知道,看例子
CODE: 

  1. <styletypestyletype="text/css"> 
  2. span#id3{font-size:18px}  
  3. #id3{font-size:12px}  
  4. span.class3{font-size:18px}  
  5. .class3{font-size:12px}  
  6. </style> 
  7.  
  8. <spanidspanid="id3">我是多大字号?</span> 
  9. <spanclassspanclass="class3">我是多大字号?</span> 

 运行结果:span#id3{font-size:18px}|span.class3{font-size:18px}

【编辑推荐】

  1. NetBeans开发J2ME时环境变量配置
  2. 深入了解J2ME Polish+Eclipse配置过程
  3. 探讨J2ME/J2EE的JSON数据交换方式
  4. Eclipse中进行JVM内存设置
  5. 解析Linux下如何用eclipse搭建J2ME开发环境
责任编辑:佚名 来源: blog.csdn.net
相关推荐

2010-09-29 08:57:04

J2ME前景

2010-09-29 15:35:04

Item类J2ME

2010-09-30 09:56:26

J2ME Polish

2009-06-17 11:27:00

setClip方法J2ME

2010-10-09 14:29:44

J2MEfontcolor

2010-09-29 13:50:31

J2MEJ2SE

2010-09-29 12:45:50

J2ME

2009-06-23 11:30:16

RMSJ2ME

2010-09-29 10:15:35

JDKJ2EEJ2SE

2010-10-09 15:58:36

J2ME图形

2011-12-02 10:37:14

JavaJ2ME

2010-09-30 11:04:53

J2MERMS

2010-09-29 09:59:22

J2ME配置

2010-09-30 08:49:17

cookieJ2ME

2010-09-29 15:45:49

J2MEFontColor

2009-06-30 15:49:00

J2ME编程

2010-09-29 09:19:39

J2ME开发工具

2010-09-30 10:40:58

J2MEJSON

2010-09-29 14:50:50

HashtableJ2ME

2010-10-09 15:07:09

J2MEWeb服务
点赞
收藏

51CTO技术栈公众号