2007-9-24 15:41:29

如何利用CSS控制文本属性

来源:builder.com.cn 字体:[大中小]

常用该属性来取消Web页面上超链接的下划线，使其仅当鼠标指向该链接时才显示下划线。列表F向大家演示了如何实现该效果：

列表 F

<html>
<head>
    <style type="text/css">
    a {
        text-decoration: none
    }

    a:hover {
        text-decoration: underline;
    }
    </style>
</head>

<body>
Helloandwelcometo<ahref=”http://www.techrepublic.com” mce_href=”http://www.techrepublic.com”>my site</a>.
</body>
</html>

大小写控制

CSS的文本转变属性使得改变文本块的大小写形式变得十分简单。该属性的可能取值为：无，大写，小写，首字母大写。前三个是自明的，首字母大写只将每个单词的首字母大写。（列表G）

列表 G

<html>
<head>
    <style type="text/css">
    p.uc {
        text-transform: uppercase;
    }

    p.wc {
        text-transform: capitalize;
    }

    p.lc {
        text-transform: lowercase;
    }
    </style>
</head>

<body>
<p class=”uc”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p class=”lc”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<p class=”wc”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>
输出结果如图F所示：

图 F

共4页: 上一页 [1] [2] 3 [4] 下一页上一篇：给光标添加CSS样式
下一篇：利用CSS的媒体类型满足访客需求

热门教程

推荐教程

相关教程