Question

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

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

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

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

它给了我这个设计的唯一错误（共15个）。

请任何人都可以使用HTML和/或CSS来解决此问题，以便进行验证。

我尝试过大小和颜色的变体，虽然它们在浏览器中有效，但它们无法验证。

谢谢：）

Answer 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/

Answer 2

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

已弃用。使用带有CSS的。

Answer 3

使用span元素和style属性，如：

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

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

Answer 4

您有一些无效标记和。

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

<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>

Answer 5

所以，作为总结

不能进入
请勿使用或
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;
}

使每个单词的第一个H1字母变大，并为单个H1着色

5 个答案: