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

最新推荐文章于 2024-06-23 04:35:46 发布

daimatiankongpiao

最新推荐文章于 2024-06-23 04:35:46 发布

阅读量1.2k

点赞数

文章标签： text-decoration

一、文本颜色

定义颜色方式：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;}