您现在的位置：首页 > 资源 > 技术文档

wap 支持css吗?_WAP 2.0与CSS的一些试验

文章来源：　2010-05-11　点击次数：

这个和互联网上差不多，有三种方式：


1，外部样式表

<?xml-stylesheet href="mobile.css" media="handheld" type="text/css" ?>

或者

<html>
<head>
<link href="mystyle.css" type="text/css" rel="stylesheet"/>
...
</head>
...
</html>


2，内部样式表

<html>
<head>
<style type="text/css">
p { text-align: center; }
</style>
...
</head>
...
</html>


3，Inline样式表

<p style="text-align: center">...</p>


二，几个试验


1，链接的颜色

a { color: #019BCF; text-decoration: none; }
a:visited { color: #003399; text-decoration: none; }
a:hover { color: #019BCF; text-decoration: underline; }

上面这段代码是互联网页面中常见的，定义了链接的颜色，以及何时出现链接下划线。三句的意思分别是：

链接：颜色为#019BCF，没有下划线。
访问过的链接：颜色为#003399，没有下划线。
鼠标悬停在上方的链接：颜色为#019BCF，有下划线。

WAP 2.0里起作用的只有：

a { color: #019BCF; }

意思是：颜色为#019BCF，总是有下划线，而且无论你是否访问过，它都不会变什么颜色。

另外试了一下，似乎可以额外支持粗体的显示：

a { color: #019BCF; font-weight: bold; }


2，文本的排列

td { text-align: right; }
p { text-align: right; }

这些都是可以支持的，也是意料之中的。需要额外注意的是，在CSS里定义了这个之后，像如下的写法就会不起作用了。

<p align="center">Text</p>

文本还是会被置为向右对齐。


3，页面背景

body { background-image: url(/Images/bg.gif); }
body { background: red; }


4，使用class属性

可以支持像下面这样使用CSS：

CSS文件中

.boldtext { font-weight: bold; }

XHTML文件中

<p class="boldtext">Test</p>
<span class="boldtext">Test</span>
<div class="boldtext">Test</div>

这是一个好消息，这样可以实现统一页面的样式，算是实现了CSS的初衷。