使每个单词的第一个 H1 字母更大并为单个 H1 着色答案

【问题标题】：Make first H1 letter of each word larger and colored for a single H1使每个单词的第一个 H1 字母更大并为单个 H1 着色
【发布时间】：2011-06-24 23:19:42
【问题描述】：

我有一个 5 个单词的 h1 行，我想只增加第 3、4 和第 5 个首字母的大小，给它们加下划线，然后让它们变成不同的颜色。

我已经完成了，但是 WC3 说我的代码在大小、下划线和颜色的每种情况下的所有属性和元素上都是无效的。

以下是在浏览器中有效但无法验证的内容：

<h1>Welcome to My Fvourite Website</h1>

这是我在这个设计上唯一的错误（总共 15 个）。

请任何人协助使用 HTML 和/或 CSS 来解决此问题，以便验证。

我尝试了大小和颜色的变化，虽然它们在浏览器中工作，但它们无法验证。

谢谢你:)

【问题讨论】：

我只能推荐 :first-letter 伪类，但这不会扩展到其他单词。可能只需要为此使用 jQuery/JavaScript。

标签： html text colors size

【解决方案1】：

他们不会验证，因为字体标签很久以前就被弃用了，因此它的所有参数，

您可以在 CSS 中使用它：

h1 {
margin:5px;
}
#title span {
font-size: 1.2em;
color: #c13636;
text-decoration: underline;
}

并将要突出显示的单词包裹在span标签中：

<span>TEST</span>

应用于您的代码：

<h1 id="title">Welcome to <br /><span>M</span>y <span>F</span>avourite <span>W</span>ebsite</h1>

演示：

http://jsfiddle.net/Mutant_Tractor/SBbcu/

【讨论】：

可能是错误类型，但别忘了你需要一个 '.'在你的 CSS 中的 className 之前
<h1 id="title">Welcome to M .. 和 #title span { .. } 可能会更整洁
好主意，我会修改我的答案。
等一下..
中有一个

。这不会验证。
那么我们可以在
中添加填充以像

【解决方案2】：

<font></font> and <u></u>

已弃用。使用带有 CSS 的 。

【讨论】：

确实，span:first-letter{font-size:x-large;text-decoration:underline;} 和 <h1>word word</h1> 可能是最好的选择。

【解决方案3】：

使用带有style 属性的span 元素，如：

<span style="font-size: 120%; color: red; text-decoration: underline;">M</span>

或者，为各种组合定义 CSS 类并改用它们。

【讨论】：

使用class 优于style。
我完全同意，但我只是给了 OP 最简单的答案来解决他的困境。

【解决方案4】：

总结一下

不能在
内
不要使用 或
HTML 用于标记，CSS 用于样式

使用“纯”HTML/CSS，您有多种可能性来实现您所追求的目标。这是几个变化。您可能应该将 class 属性添加到 span 元素，但为简洁起见，我在这里省略了它们。

1°

HTML 文件：

<h1>Welcome to <span>M</span>y <span>F</span>vourite <span>W</span>ebsite</h1>

CSS 文件：

h1 span {
  font-size: 120%;
  color: red;
  text-decoration: underline;
}

2°

HTML 文件：

<h1>Welcome to <span>My</span> <span>Favourite</span> <span>Website</span></h1>

CSS 文件：

h1 span:first-letter {
  font-size: 1.2em;
  color: red;
  text-decoration: underline;
}

【讨论】：

谢谢大家，会尝试你所说的一切——非常有帮助（回复也很快）:)

【解决方案5】：

您有一些无效标签 和。

我会做这样的事情来验证和清理你的代码：

<style>
    .big {
         font-size: 1.2em;
    }

    .red {
         color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span class="big red">M</span>y 
    <span class="big red">F</span>avorite 
    <span class="big red">W</span>ebsite
</h1>

甚至：

<style>
    h1 span:first-letter {
        font-size: 1.2em;
        color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span>My</span>
    <span>Favorite</span> 
    <span>Website</span>
</h1>

【讨论】：

。这不会验证。

中添加填充以像