2015-11-02 3 views
2

Я новичок в этом Сообществе, а также в программировании. Мне нужно создать разные заголовки на моем веб-сайте, и каждый заголовок должен быть отформатирован в соответствии с моей потребностью.форматирование заголовка в html

Я не знаю, что в этом плохого. Должен ли я использовать идентификатор для вызова заголовка или какую тактику я должен использовать для хорошей и эффективной практики? Если да, то как мне это реализовать? Вот мой пример, пожалуйста, скажите мне ошибки, которые я делаю? HTML:

<div class="jumbotron"> 
<div class="container">  
<h6 class="text-center"><a href="#"></a>PEOPLE-THINGS RECOMENDATION</h6> 

    <h6><a href="#">Actors/movies</a></h6> 
</div></div> 

CSS код:

.jumbotron h6{ 
    position:relative; 
    bottom:37px; 
    color:#815cb8; 
    font-weight:normal; 
} 
.jumbotron h6 { 
    position:relative; 
    bottom:32px; 
    font-weight:normal;} 

Мой заголовок не меняется вообще, и всякий раз, когда я пытаюсь добавить новый он также демонстрирует одни и те же функции.

Thankyou так много.

+0

Я думаю, что вы просто хотите первый h6 в центре, верно? –

+0

y выравнивание не вызывает беспокойства, h6 не образует уникальный заголовок, наследуя вышеприведенную таблицу стилей h6 css. Я хочу изменить его, изменив его положение или называя его другим идентификатором. –

ответ

0

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

Вот Html:

<div class="jumbotron"> 
    <div class="container">  
     <h6 class="text-center first-heading"><a href="#"></a>PEOPLE-THINGS RECOMENDATION</h6> 
     <h6 class="second-heading"><a href="#">Actors/movies</a></h6> 
    </div> 
</div> 

А код CSS:

.jumbotron h6{ 
    position:relative; 
    color:#815cb8; 
    font-weight:normal; 
} 

.first-heading { 
    text-align: center; 
} 

.second-heading a { 
    color:black; 
    font-weight: bold; 
} 

Вот jsfiddle для него: https://jsfiddle.net/4d9jqxeu/

+1

Спасибо @Viktor, не могли бы вы рассказать мне, могу ли я использовать Id на моем заголовке и называть его в css? –

+0

вы можете использовать 'id =" heading1 "' и стилизовать его в css следующим образом: '# heading1 {color: black; text-align: center; } '. Если мой ответ помог вам, пожалуйста, одобрите его и проголосуйте за него. –

+1

Да, Виктор даст мне монетный двор, я это одобрю. И во-вторых, если вы думаете, что мой вопрос конструктивен и поможет кому-то там, пожалуйста, проголосуйте за него :) –

0

я думаю, что если вам необходимо изменить размер шрифта и другие вещи в h6 вам не нужен h6, тогда положите div и напишите свой css в нем, как показано ниже

.jumbotron .header1 { 
 
    font-size: 20px; 
 
    color: #815cb8; 
 
    font-weight: normal; 
 
} 
 
.jumbotron .header2 { 
 
    color: #f715aa; 
 
    font-size: 12px; 
 
    font-weight: normal; 
 
} 
 
.jumbotron a { 
 
    text-decoration: none; 
 
    color: #237bba; 
 
}
<div class="jumbotron"> 
 
    <div class="container"> 
 

 
    <div class="header1"> 
 
     <a href="#"></a>PEOPLE-THINGS RECOMENDATION</div> 
 

 
    <div class="header2"><a href="#">Actors/movies</a>PEOPLE-THINGS RECOMENDATION</div> 
 

 
    </div> 
 
</div>

+1

Спасибо, многого, мне нужно сделать около 17 заголовков в моем jumbotron, разве вы не думаете, что это займет много времени, я я ищу эффективный? –

+0

Вы должны быть конкретными, это все заголовки, которые будут отличаться по стилю, как если бы структура оставалась такой же, вы можете сохранить css-скин отдельно и просто продолжать применять соответствующий класс css в той же структуре, когда это необходимо. Вам не нужно создавать 17 заголовки просто продолжают изменять css, но m все еще не уверены в ваших требованиях – imGaurav

Смежные вопросы