Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Основы CSS

Селекторы в CSS

В CSS существует три вида селекторов: селектор class, селектор id и контекстные селекторы.

Селектор class

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

<p class="question">Вопрос 1</p>
<p
class="answer">Ответ 1</p>
<p
class="question">Вопрос 2</p>
<p
class="answer">Ответ 2</p>

В каскадной таблице стиль задается так:

.question {font-weight: bold;   /* жирный текст */
font-family: Tahoma, sans-serif;     /* шрифт Tahoma */
font-size: 12px;      /* размер шрифта 12 пикселей */
color: gray;     /* цвет серый */
}
.answer {
font-family: Tahoma, serif;  /* шрифт Tahoma */
font-size: 12px;    /* размер шрифта 12 пикселей */
color: black;   /* цвет черный */
}

Селектор id

Используется тогда когда стиль нужно создать только одному элементу на странице, например, логотипа страницы. Задается он при помощи атрибута id и в пределах страницы не повторяется <h1 id="logo">My Site</h1>. В CSS такой тип селекторов прописывается следующим образом:

#logo{
font-family: Tahoma, serif;   /* шрифт Tahoma */
font-weight: bold;   /* жирный текст */
color: green;    /* цвет зеленый */
}

Контекстные селекторы

Этот тип селекторов следует использовать, если мы на странице хотим сделать одинаковыми, допустим все заголовки второго уровня и заголовки первого уровня:

h1 {
color: red;    /* цвет красный */
margin: 10px;    /* отступы 10 пикселей */
}
h2 {
color: #424242;    /* цвет темно-серый */
font-weight: bold;   /* жирный текст */
font-family: Arial, serif;   /* шрифт Arial */
}

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

Автор: Евгений Бочкарев · Урок добавлен: 26 Февраля 2010 в 10:48 · Просмотров: 255

Рекомендую
  • Currently 5.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 5.0/5 (всего 1 голос)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку

12
Ваш комментарий может быть первым...
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

Получать уведомления по Email могут только зарегистрированные пользователи. Регистрация
Введите цифры с картинки


 
34