Сделайте первую букву H1 каждого слова больше и раскрасьте для одного H1

Question

У меня есть строка h1 из 5 слов, и я хочу увеличить размер только 3-й, 4-й и 5-й начальных букв, подчеркнуть их, а затем сделать их другим цветом.

У меня естьсделал это, но WC3 говорит, что мой код недопустим для всех атрибутов и элементов в каждом случае размера, подчеркивания и цвета.

Вот что работает в браузерах, но не проверяет:

<p><h1>Welcome to <br /><font size="120%" color=Red><u>M</u></font>y <font size=120% color=Red><u>F</u></font>vourite <font size=120% color=Red><u>W</u></font>ebsite</h1></p>

Это дает мне мои единственные ошибки (всего 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>

устарели. Используйте <span></span> с примененным к нему CSS.

Answer 3

Используйте элемент span с атрибутом style, например:

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

В качестве альтернативы, определите классы CSS для различных комбинаций и используйте их вместо этого.

Answer 4

Итак, как итог

• не может быть внутри

• не используйте <font> или <u>
• 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;
}

Answer 5

У вас есть недопустимые теги <font> и <u>.

Я бы сделал что-то подобное для проверки и очистки вашего кода:

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