CSS删除不同的颜色和文本? [英] CSS strikethrough different color from text?
问题描述
HTML元素 del
,警告
或 s
可以用于文本穿透效果。示例:
< del> del< / del>
....给出: del
< strike> strike< / strike>和< s>敲击< / s>
....给出: strike s>
具有值的CSS
text-decoration
code>可以类似地使用。代码...
< span style ='text-decoration:line-through'>
text-decoration:line-through
< / span>
...也会渲染为: text-decoration: / strike>
但是,删除线的颜色通常与文本颜色相同。
可以使用CSS来使线条具有不同的颜色吗?
p>是,通过添加一个额外的包装元素。将所需的直通颜色分配给外部元素,然后将所需的文本颜色分配给内部元素。例如:
< span style ='color:red;装饰:直线> < span style ='color:black'>带有红色删除线的黑色< / span>< / span>
...或...
< strike style ='color:red' ; < span style ='color:black'>带红色删除线的黑色< span>< / strike>
(请注意,< strike>
是在HTML4中已弃用,在HTML5中已弃用( see also W3.org )。推荐的方法是使用< del>
如果意图删除的真实意义,或者另外使用
元素或样式与 text-decoration
要使删除线显示为:hover,显式样式表(在中声明或引用; HEAD>
)。 (:hover
伪类不能应用于内联STYLE属性。)例如:
< head> < style> a.redStrikeHover:hover {color:red;文本装饰:直线; }< / style>< / head>< body> < a href ='#'class ='redStrikeHover'> < span style ='color:black'> hover me< / span> < / a>< / body>
(IE7似乎需要一些 href
在之前设置
< a>
::hover
有效果; FF和WebKit基于的浏览器不会。)
The HTML elements del
, strike
, or s
may all be used for a text strike-through effect. Examples:
<del>del</del>
....gives: del
<strike>strike</strike> and <s>strike</s>
....gives: strike and strike
The CSS text-decoration
property with a value line-through
may be used similarly. The code...
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
...will also render to look like: text-decoration:line-through
However, the strikethrough line is typically the same color as the text.
Can CSS be used to make the line a different color?
Yes, by adding an extra wrapping element. Assign the desired line-through color to an outer element, then the desired text color to the inner element. For example:
<span style='color:red;text-decoration:line-through'>
<span style='color:black'>black with red strikethrough</span>
</span>
...or...
<strike style='color:red'>
<span style='color:black'>black with red strikethrough<span>
</strike>
(Note, however, that <strike>
is considered deprecated in HTML4 and obsolete in HTML5 (see also W3.org). The recommended approach is to use <del>
if a true meaning of deletion is intended, or otherwise to use an <s>
element or style with text-decoration
CSS as in the first example here.)
To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>
) must be used. (The :hover
pseudo-class can't be applied with inline STYLE attributes.) For example:
<head>
<style>
a.redStrikeHover:hover {
color:red;
text-decoration:line-through;
}
</style>
</head>
<body>
<a href='#' class='redStrikeHover'>
<span style='color:black'>hover me</span>
</a>
</body>
(IE7 seems to require some href
be set on the <a>
before :hover
has an effect; FF and WebKit-based browsers do not.)
这篇关于CSS删除不同的颜色和文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!