CSS 中的文本装饰

发布于 2024-07-29 00:10:13 字数 136 浏览 11 评论 0 原文

我刚刚学会了如何使文本闪烁 (

text
)。

换色等其他装饰方式怎么样? 它们在 CSS 中可用吗?

谢谢。

I've just learned how to make a text to blink (<div style="text-decoration:blink">text</div>).

How about the other decoration modes such as color changing? Are they available in CSS?

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

蓝天白云 2024-08-05 00:10:13

文本装饰没有什么太有趣的。 好的资源总是 w3:
http://www.w3schools.com/Css/pr_text_text-decoration.asp

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

关于你的第二个问题——当然。 CSS 可以(而且应该)用于设计几乎任何东西的样式,尽管闪烁文本是一个极端的例子,但大多数规则更有用。

Nothing too interesting with text-decoration. A good resource is always the w3:
http://www.w3schools.com/Css/pr_text_text-decoration.asp

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

Regarding your second question - of course. CSS can (and should) be used to style almost anything, though blinking text is an extreme example, most rules are much more useful.

一张白纸 2024-08-05 00:10:13

是的,CSS 中可以更改颜色。 使用

<div style="color:red">foo</div>

例如。 您可能想查看一篇好的 CSS 介绍或官方标准:

Yes, color changing is available in CSS. Use

<div style="color:red">foo</div>

for example. You probably want to check out a good CSS introduction or the official standard:

古镇旧梦 2024-08-05 00:10:13

可用的文本修饰值有:

  • 闪烁
  • 通 无
  • 上划线
  • 下划线

请参阅 http://reference。 sitepoint.com/css/text-decoration 了解更多详情。

The available text-decoration values are:

  • blink
  • line-through
  • none
  • overline
  • underline

See http://reference.sitepoint.com/css/text-decoration for more details.

随波逐流 2024-08-05 00:10:13

是的,您可以使用以下内容:

color: #FFFFFF; (这将使您的文本颜色变为白色)

font-weight:bold;

text-decoration:下划线;

等等。

你真的应该用谷歌搜索这个。

Yes, you can use the following:

color: #FFFFFF; (which would make your text white in color)

font-weight:bold;

text-decoration:underline;

etc.

You should really Google this.

神魇的王 2024-08-05 00:10:13

我想,通过颜色更改,您不仅仅意味着将文本颜色设置为color 可以实现更复杂的动画。

有一些实验,例如 WebKit 的 -webkit-animation-webkit-transform-webkit-transition 。 但这些财产是专有的。

如今,此类效果是在 JavaScript 的帮助下完成的。 您可以使用很多 JavaScript 框架,例如 jQuerymootools原型Script.aculo.us

I suppose that by color changing you don’t mean just to set the text color as color does but more complex animations.

There are some experiments like WebKit’s -webkit-animation, -webkit-transform or -webkit-transition. But those properties are proprietary.

Nowadays such effects are done with the help of JavaScript. There are plenty JavaScript frameworks you can use like jQuery, mootools, Prototype, Script.aculo.us, etc.

何处潇湘 2024-08-05 00:10:13

不,这些通常是使用 JavaScript 进行编程的。

如果您指的是悬停时链接颜色发生变化,那么这是通过 css 完成的。

a:link { color: blue; }
a:hover { color: green; }

No, these are generally programmed using JavaScript.

If you are referring to link color changing on hover, that is done with css.

a:link { color: blue; }
a:hover { color: green; }
↙厌世 2024-08-05 00:10:13

目前支持四种文本装饰。 (大多数浏览器不再支持闪烁。)

在文本上画一条线

h1 {text-decoration:overline;}

在文本下画一条线

h1 {text-decoration:underline;}

删除线。 (在文本中画一条线。)

h1 {text-decoration:line-through;}

没有装饰。

h1 {text-decoration:none;}

切勿使用 BLINK,它几乎没有浏览器支持,毫无用处,并且存在严重的可访问性问题。 它是在 IE 和 Netscape 之间的浏览器战争期间作为专有属性制定的,大多数浏览器从不支持它,抄袭 Netscape 的 IE 已经弃用它,而 Netscape 已经消亡近 6 年了。

(请随意纠正我的小历史课。)

There are four currently-supported text decorations. (Blink is no longer supported in most browsers.)

Draws a line over the text

h1 {text-decoration:overline;}

Draws a line under the text

h1 {text-decoration:underline;}

Strike through. (Draws a line through the text.)

h1 {text-decoration:line-through;}

No decoration.

h1 {text-decoration:none;}

NEVER USE BLINK, it has little browser support, it is useless, and has severe accessibility issues. It was made as a proprietary attribute during the browser wars between IE and Netscape, and most browsers never supported it, IE, who copied it from Netscape, has deprecated it, and Netscape, has been dead for almost 6 years.

(Feel free to correct my little history lesson.)

随风而去 2024-08-05 00:10:13

CSS text-decoration 属性用于装饰文本或删除文本的装饰。 CSS text-decoration 属性主要用于设置或删除网页上的下划线。

在许多情况下,当您希望文本没有装饰时,您可以简单地说 text-decoration: none; 。 这使得文本没有装饰。

请参阅下面的示例以获取更多理解

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}  

参考: http://www.snoopcode.com/css/css-文本

CSS text-decoration property is used to decorate the text or remove the decoration for the text. CSS text-decoration property is mostly used to set or remove the underlines on the web page.

In many case, when you wish to have no decoration for the text you can simply say text-decoration: none;. That makes the text have no decoration.

See the below example for more understanding

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}  

Reference: http://www.snoopcode.com/css/css-texts

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文