CSS: как правильно обращаться с несколькими классами текста - PullRequest
Новая
       7

CSS: как правильно обращаться с несколькими классами текста

1 голос
/ 26 мая 2010

Итак, я за комиссию за сайт и пытаюсь улучшить свой код. Когда мы имеем дело с веб-сайтом с несколькими типами шрифтов (здесь он большой, там он маленький, там он жирный, здесь он подчеркнут и т. Д.), Здесь мы используем h1-h6, или мы оставляем их на время, когда есть определенная иерархия, вместо которой используется <p class="xxx"> для определения различных классов для текста?

Ответы [ 3 ]

7 голосов
/ 26 мая 2010
  1. Вы определяете почему оно должно быть большим, маленьким, жирным, подчеркнутым или т. Д.
  2. Вы пишете разметку, которая выражает семантику, определенную вами в 1, используя div и span (семантические свободные элементы), если ничего более подходящего не существует, и добавляя class и id, если вам нужно что-то более конкретное, чем что-либо этот HTML предоставляет явно.
  3. Вы пишете селекторы CSS, которые соответствуют этой разметке для наборов правил, которые применяют эти стили

Так что используйте заголовки, только если у вас есть заголовки, и используйте их по порядку. h1 для основного заголовка, h2 для подзаголовков, h3 для подзаголовков и т. Д.

Если вы не можете создать разумное оглавление из заголовков, то вы почти наверняка не используете их правильно.

1 голос
/ 26 мая 2010

Используйте h1-h6 там, где они должны использоваться.Используйте классы для оформления вашего текста, в том числе внутри p или h1-h6.

Как правило, следите за тем, как ваш сайт будет выглядеть без таблицы стилей.Вы в порядке, пока ваш веб-сайт может передавать сообщение даже без таблицы стилей.

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

.bigFont    { font-size: 150%; }
.italicFont { font-style: italic; }
.grayFont   { color: Gray; }
...

И применить один или несколько из этих стилей к тегам.

0 голосов
/ 26 мая 2010

Семантически h1 - h6 для заголовков. Если все типы шрифтов на вашем сайте являются заголовками, то, я думаю, это не так.

Аналогично p используется для абзацев.

Если у вас разные абзацы с разными стилями текста, то да ... 1005 * 

<p class="firststyle">This is paragraph 1</p>

<p class="secondstyle">This is paragraph 2</p>

но помните, что эти теги имеют значение. Для получения дополнительной информации см. Эту статью

...