CSS: как обращаться к конкретным тегам

Question

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

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

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

Answer 1

Помимо имени тега CSS может применяться по классу и идентификатору.Обратите внимание, что лучше убедиться, что регистр в ваших тегах совпадает с регистром в тегах.

.myClass может не применяться к class = "myclass"

ID:

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

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

Классы: .redHeading {color: red;} .blueHeader {color: blue;}

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

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

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

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

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

Answer 2

Вы можете назначить класс каждому элементу и использовать 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 3

Добавьте различные атрибуты 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 4

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

Гораздо лучше практиковать создание классов с семантическим значением, таких как: 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;
}

Answer 5

В 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 и Javascript с нуля

Answer 6

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

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

<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 7

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

CSS

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

HTML

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

Answer 8

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

h3.colorOne {
    color: #ff0000;
}

h3.colorTwo {
    color: #0000ff;
}

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

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

В качестве альтернативы вы можете указать настройки родителем, используя поле id в виде 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 9

Создайте класс в CSS, например:

h3.class1
{
color: blue;
}

Тогда просто скажи:

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