класс тегов h1 (альтернативный) - PullRequest
Новая
       13

класс тегов h1 (альтернативный)

5 голосов
/ 13 ноября 2009

Я знаю, что тег h1 важен для SEO, поэтому весь мой заголовок - H1 (браво!)

Теперь мне нужно, чтобы заголовок (как первая строка текста) на некоторых страницах немного отличался.

Обычно я просто дублирую h1 на h2 и чередую.

Вопрос: можно ли добавить класс в тег заголовка ... (у меня безуспешно)

Ответы [ 7 ]

15 голосов
/ 13 ноября 2009

Вы можете оформить заголовок следующим образом: 

h1 { color: red; }

Или вот так: 

<h1 class="fancy">Fancy</h1>

.fancy { font-family: fantasy; }

Если не работает:

  • Убедитесь, что у вас нет старой таблицы стилей (ctrl-F5 для перезагрузки)
  • Убедитесь, что у вас нет правил, отменяющих ваш класс (здесь очень полезна проверка с помощью Firebug или подобного).
  • Проверка на опечатки в HTML и CSS

Edit:

Похоже, у вас было h1 .myClass вместо h1.myClass - есть важное различие: 

h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass  { } /* any <h1> with class="myClass" */
12 голосов
/ 13 ноября 2009

Конечно, вы можете: 

<h1 class="someclass">…</h1>

Атрибут class входит в группу атрибутов coreattrs основных атрибутов , которые можно использовать с элементом h1 .

5 голосов
/ 13 ноября 2009

Похоже, вы используете h1 для всех заголовков на странице. Как правило, у вас будет один h1 тег на странице для содержимого страницы (с текстом, по крайней мере, частично совпадающим с заголовком страницы) и меньшие теги заголовка для заголовков различных частей содержимого. Таким образом, вы даете большую часть информации поисковым системам о том, что важно на странице. Конечно, есть страницы, которые не вписываются в эту модель, но многие из них.

Существует много разных способов указания стиля для заголовков. Например:

Для всех h1 тегов: 

h1 { font-weight: bold; }

Для всех тегов h1 и h2: 

h1, h2 { margin: 10px; }

Для всех h1 тегов внутри элемента с id="main": 

#main h1 { background: #ccc; }

Для всех h2 тегов с class="Info": 

h2.Info { color: #000; }

Для всех h3 тегов внутри элемента с class="More": 

.More h3 { text-decoration: underline; }
2 голосов
/ 13 ноября 2009

Вы можете добавить класс в тег <h1>. Как это: 

<h1 class="myclass"> ... </h1>

Вы можете легко оформить это так: 

<style type="text/css">
.myclass { color : green }
</style>
0 голосов
/ 12 ноября 2017 

<div class='row' id='content-wrapper'>
  <div class='clear'/>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <div id='error-wrap'>
      <h1 class='error-item'>404</h1>
      <h2>Page Not Found!</h2>
      <p>Sorry, the page you were looking for in this blog does not exist.</p>
      <div class='clear'/>
    <a class='homepage' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Go To Home</a>
  </div>
0 голосов
/ 13 ноября 2009

Должно работать следующее: 

<html>
<head>
<style type="text/css">
h1.custom {
    color: red;
    font-size: 16px;
}
</style>
</head>
<body>

<h1 class="custom"> test </h1>
</body>
</html>
0 голосов
/ 13 ноября 2009

Тег находится в вашем разделе , поэтому нет смысла добавлять к нему класс.

Однако вы можете добавить класс к тегу

. <h1 class="title">

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...