这篇文章主要介绍“J2ME中CSS的使用方法”,在日常操作中,相信很多人在J2ME中CSS的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”J2ME中CSS的使用方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
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>
运行结果:span#id3{font-size:18px}|span.class3{font-size:18px}
到此,关于“J2ME中CSS的使用方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。