CSS: Как адресовать определенные теги

Question

Я только начинаю изучать CSS (и XHTML), и у меня возникла проблема назначения разных свойств тегам, которые имеют одинаковое имя тега.

Например: у меня есть два заголовка h3, но вы хотите адресовать их специально с помощью CSS, потому что я хочу сделать их разными цветами.

Я считаю, что это имеет какое-то отношение к именованию заголовков по-разному (т. Е. H3.a), но попытка этого не сработала. Помощь будет оценена!

Answer 1

Кроме имени тега CSS может быть применен на класс и ID. Обратите внимание, что лучше всего убедиться, что случай в ваших тегах соответствует случаю в тегах.

.MyClass не относится к классу = "MyClass"

идентификаторами:

<style> 
#FirstHeading {color: red;} 
#SecondHeader {color: blue;} 
</style> 

<h3 id="FirstHeading"></h3> 
<h3 id="SecondHeader"></h3> 

Классы: .redHeading {цвет: красный;} .blueHeader {цвет: синий;}

<h3 class="redHeading"></h3> 
<h3 class="blueHeader"></h3> 

Цель идентификаторов, как правило, указывать на один конкретный элемент на вашей странице, клас ses предназначены для работы с несколькими различными элементами.

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

<style> 
.redHeading {color: red;} 
.blueHeader {color: blue;} 
.boldHeader {font-weight: bold;} 
</style> 

<h3 class="redHeading boldHeader"></h3> 
<h3 class="blueHeader boldHeader"></h3> 

Answer 2

Добавить различные атрибуты class для каждого h3, а затем обратиться к ним в CSS с помощью .className.

например:

HTML:

<h3 class="class1">One header</h3> 
<h3 class="class2">Another header</h3> 

CSS:

.class1 { 
    color: #00f; 
} 
.class2 { 
    color: #f00; 
} 

Answer 3

Это где классы пригодится.

CSS

.myFirstClass { color:green; } 
.mySecondClass { color:red; } 

HTML

<h3 class="myFirstClass">Text</h3> 
<h3 class="mySecondClass">Text</h3> 

Answer 4

Вы можете назначить класс каждому элементу и использовать CSS, чтобы предназначаться только этот класс. Например:

HTML:

<h3 class="green">Green heading for this one</h3> 
<h3 class="red">Red heading for this.</h3> 

CSS:

h3.green { color:green; } 
h3.red { color:red; } 

Answer 5

сделать класс в CSS, например:

h3.class1 
{ 
color: blue; 
} 

Тогда просто сказать:

<h3 class="class1"></h3> 

Answer 6

Вы можете использовать класс или родительский элемент для его определения. Если вы используете класс он будет определен как:

h3.colorOne { 
    color: #ff0000; 
} 

h3.colorTwo { 
    color: #0000ff; 
} 

Тогда они будут использоваться как:

<h3 class="colorOne">I'm red</h3> 
<h3 class="colorTwo">I'm blue</h3> 

В качестве альтернативы вы можете задать настройки по родителю, используя поле идентификатора в DIV сортов:

#divOne h3 { 
    color: #ff0000; 
} 

#divTwo h3 { 
    color: #0000ff; 
} 

, который будет использоваться как:

<div id="colorOne"><h3>I'm red</h3></div> 
<div id="colorTwo"><h3>I'm blue</h3></div> 

Использование зависит от потребностей вашего макета и расширяемости ваших стилей.

Answer 7

Существует так много разных способов выбора целевых селекторов.

Вы можете дать им имена классов:

<h3 class="makeblue">This should be blue</h3> 
<h3 class="makegreen">This should be green</h3> 

// in you css 
h3.makeblue { color: blue; } 
h3.makegreen { color: green; } 

Вы можете использовать "продвинутые селекторы":

<div class="container"> 
    <h3>This should be blue</h3> 
    <p> 
     <h3>This should be green</h3> 
    </p> 
</div> 

// in your css 
div.container > h3 { color: blue; } 
div.container p h3 { color: green; } 

посмотрите здесь: http://css.maxdesign.com.au/selectutorial/

Answer 8

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

например.

a h3 {} будет обращаться ко всем h3 тегам в теге a.

Однако, если вы хотите стилизовать отдельные элементы или хотите больше свободы, вы должны использовать class или id.

id может использоваться на одном элементе и работает следующим образом:

<h3 id="header"></h3> 

вы можете использовать

#header { 
// your css style here 
} 

стиль его.

Или вы можете использовать класс, который может быть использован на нескольких элементов, как так:

<h3 class="red"></h3> 
<a class="red"></a> 

вы можете использовать

.red { 
    // your css style here 
} 

стиль его.

Google предоставляет некоторые хорошие видеоуроки здесь: HTML, CSS and Javascript from the ground up

Answer 9

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

Гораздо лучше практика создания классов с семантическим значением, например: subtitle, navigationHeader и т.д. Кроме того, это хорошая практика, чтобы дать несколько классов и, таким образом, «расширить» объекты, а не повторять себя:

<h2 class="subtitle forum">Forum</h2> 
<h2 class="subtitle group">Groups</h2> 

.subtitle { 
    font-size: 14px; 
    font-weight: bold; 
    color: green; 
} 

.subtitle.forum { 
    color: blue; 
} 

.subtitle.group { 
    color: red; 
}