您的位置：首页 > 其它

文本颜色和效果——text-decoration

2014-08-26 16:51 246 查看

一、文本颜色

定义颜色方式：1、颜色名称 2、RGB值（eg:#CC66FF #C6F rgb(204, 102, 255) rgb(80%, 40%, 100%)） #FFFFFF：白色
特殊文本效果：只对包含文本的css元素有用，对其他对象没有效果。
1、text-decoration属性：（大多数浏览器为超文本链接自动使用text-decoration：underline）

text-decoration属性的值

值	效果
blink	文本闪烁开和关（最好不要使用）
line-through	文本中间画一条线（删除线）
overline	在文本顶端之上画一条线（上划线）
underline	在文本顶端之下画一条线（下划线）
none	无效果（常用来关闭下划线）
inherit	使用包含盒子的text-decoration的值

text-decoration的颜色（删除线、上划线或下划线）和文本本身的颜色一致，因此可以通过color属性设置，线的粗细、厚度由浏览器决定。
例子：HTML页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> 特殊文本处理 </TITLE>

<link rel="stylesheet" type="text/css" href="10-1.css">

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<BODY>

<table class="nav" border="0" align="right">

<tr><th><a href="2-7.html">HOME</a></th></tr>

<tr><th><a href="2-8.html">INFO</a></th></tr>

<tr><th><a href="2-9.html">HELP</a></th></tr>

<tr><th><a href="2-7.html">NEWs</a></th></tr>

</table>

<h1>I <em>love</em> to decorate!</h1>

<p>I think that decorationg <span class="oops">cakes</span>HTML is lots of fun. Here are some of my favorites:</p>

<div class="eg">

<p id="a" style="background-color:red">Underlined text (don't you want to click here?)</p>

<p id="b">Line-through text</p>

<p id="c">Overlined text</p>

<p id="d">Blinking text (this is hard to show in print!)</p>

</div>

</body>

</HTML>

css代码

body {
font-family:Verdana, sans-serif;}

.nav {
border:0.3em solid black;}

.nav a:link, .nav a:visited
{
text-decoration:none;}

h1 em {
text-decoration:underline;}

.oops {
text-decoration:line-through;}

.eg {
border:1px solid black;
margin:2em;
padding:1em;}

#a {
text-decoration:underline;}

#b {
text-decoration:line-through;}

#c {
text-decoration:overline;}

#d {
text-decoration:blink;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： text-decoration

相关文章推荐

新的分享

章节导航