Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Основы 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 Просмотров: 11307

Условия копирования материалов сайта

Все комментарии
#-6 zamineff 29-09-2011 в 18:12
Отличный урок
#-5 Алексей 02-02-2013 в 18:47
Спасибо, все просто и понятно
#-4 Alex 24-01-2014 в 14:10
Спасибо за урок.
Только "оригенальный сайт" -> "оригИнальный сайт". :)
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


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

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки