X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Теги заголовки, как избавится от классов?, H + css
stixia007
stixia007
Topic Starter сообщение 11.6.2015, 18:23; Ответить: stixia007
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


Здравствуйте. Не нравится мне данная конструкция:
Код
<h1 class = "h1">

На нормальных сайтах, просматривая конкурентов :) Подобной конструкции не замечал, всегда чистый заголовок - 1 тег.

У меня около 3-х разных стилей под заголовки h1, h2 и h3. Подскажите альтернативу чистого оформления заголовка с возможностью конфигурации в css? Спасибо!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 11.6.2015, 20:17; Ответить: x64
Сообщение #2


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3424
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2745 раз
Репутация:   289  


HTML
Код
<h1></h1>
<div class="h1"><h1></h1></div>
<div class="h2"><h1></h1></div>


CSS
Код
h1 {
  /* правила для всех h1 */
}

.h1 h1 {
  /* правила для h1, которые находятся в классе .h1 */
}

.h2 h1 {
  /* правила для h1, которые находятся в классе .h2 */
}


--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
stixia007
stixia007
Topic Starter сообщение 12.6.2015, 8:22; Ответить: stixia007
Сообщение #3


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


Охохо :) Спасибо большое!
Сейчас буду всё переделывать. А это нормально напрямую называть блоки h1, h2?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 12.6.2015, 9:06; Ответить: x64
Сообщение #4


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3424
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2745 раз
Репутация:   289  


Простите, не совсем понял, что значит «напрямую называть».
Если Вы имеете ввиду «class="h1"», то это лишь для примера. Названия могут быть совершенно любыми, тут уже от верстальщика зависит.
Один с пеной у рта доказывают, что за название, вида:
Код
<div class="l"></div>

(это для левого выравнивания), нужно руки коцать.
Другие не видят ничего криминального в:
Код
<div class="red"></div>


Если Вы сами верстаете, делайте, как проще Вам запомнить.

Код
<h1>Обычный размер для h1</h1>
<div class="big"><h1>Увеличенный размер</h1></div>
<div class="small"><h1>Уменьшенный размер</h1></div>


Код
h1 {
  font-size:25px;
}

.big h1 {
  font-size:30px;
}

.small h1 {
  font-size:20px;
}


Опять же, это лишь пример. Названия для классов можно придумывать любыми, лишь бы не конфликтовали друг с другом.


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
stixia007
stixia007
Topic Starter сообщение 12.6.2015, 9:37; Ответить: stixia007
Сообщение #5


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


Спасибо! Буду всё исправлять...
Да и я вот, вообще логичнее к классам присваивать название h1, h2 и т.д. А как к этому ПС относится? Или нужно своё выдумывать. Мне например удобно h1_main, h1_cat и т.д.

Сообщение отредактировал stixia007 - 12.6.2015, 9:39
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
сообщение 12.6.2015, 10:14; Ответить: mmkulikov
Сообщение #6


Старожил
******

Группа: Active User
Сообщений: 2023
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


Цитата(stixia007 @ 12.6.2015, 7:37) *
классам присваивать название h1, h2 и т.д. А как к этому ПС относится?

Слава богу, ПС еще до этого не добрались :D Обзывайте как хотите.


--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
stixia007
stixia007
Topic Starter сообщение 12.6.2015, 11:17; Ответить: stixia007
Сообщение #7


Завсегдатай
*****

Группа: Active User
Сообщений: 537
Регистрация: 23.2.2013
Поблагодарили: 19 раз
Репутация:   1  


Почти закончил, если кому не лень, всё ли нормально - валидно?

Код
h1, h2, h3, h4, h5, h6, ul, li, textarea, table{
    font: 12px "Open sans", Arial, Tahoma, Sans-serif;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    list-style: none;
    padding: 0;
    margin: 0;
}

.short h1{
    font-size: 15px;
      height: 39px;
    line-height: 39px;
    padding: 0 10px;
    color: #313746;
}

.news h1{
    font-size: 15px;
      background: #313746;
    height: 40px;
    padding: 0 10px;
    color: #ffffff;
    line-height: 40px;
    font-style: normal;
}

.game h1{
    font-size: 15px;
    width: 630px;
    height: 21px;
    line-height: 21px;
    color: #797c85;
}

.short h2{
    font-size: 15px;
    line-height: 40px;
}

.last h2{
    display: block;
      font-size: 16px;
    height: 20px;
}

.last a{
    color: #434854;
}

.last a:hover{
    cursor: pointer;
    text-decoration: underline;
}

.context h2 {
    display: inline-block;
    position: relative;
    background: #313746;
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
    line-height: 33px;
    height: 33px;
    right: 10px;
}
    
.context h3 {
    display: inline-block;
    position: relative;
    background: #313746;
    font-size: 13px;
    color: #fff;
    padding: 0 10px;
    line-height: 30px;
    height: 30px;
}
        
.context h3::after {
    content: '';
    position: absolute;
    left: 20px; bottom: -14px;
    border: 7px solid transparent;
    border-top: 7px solid rgb(49, 55, 70);
}



Правда в некоторых блоках одинаковый размер заголовка h1 и h2, в шаблоне так приятнее выглядит, ну и при добавлении новостей - приходится делать так:

Код
<div class="context"><h2>Заголовок</h2></div>


Нет ли каких ошибок со стороны ПС? Заранее спасибо :)

Сообщение отредактировал stixia007 - 12.6.2015, 11:22
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Extrim25
Extrim25
сообщение 16.6.2015, 10:30; Ответить: Extrim25
Сообщение #8


Частый гость
**

Группа: User
Сообщений: 64
Регистрация: 22.4.2012
Из: Украина
Поблагодарили: 10 раз
Репутация:   1  


stixia007, точно валидно.

Цитата
W3C результаты проверки CSS для TextArea (CSS3)

Поздравляем! Ошибок не обнаружено.


https://jigsaw.w3.org/css-validator/validator

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


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как установить источник заражения сайтов?
6 kelevra 439 Сегодня, 12:44
автор: 4ester7
Открытая тема (нет новых ответов) Facebook палит прокси. Кто как решает эту проблему?
25 Twickbot 3275 Сегодня, 11:56
автор: Smspva
Открытая тема (нет новых ответов) Как действительно успешно внедрять привычки. И менять жизнь
seoandme.ru - SEO-блог Анны Ященко
11 AnnaYa 1109 Сегодня, 8:43
автор: AnnaYa
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
7 PostBrigada 721 Вчера, 20:35
автор: galikfor
Открытая тема (нет новых ответов) Как пройти модерацию в Яндекс Директ, тематика Майнеры криптовалюты
4 rownong27 1157 Вчера, 20:02
автор: tygrytsa


 



RSS Текстовая версия Сейчас: 13.12.2017, 13:36
Дизайн