Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Селекторы CSS основы

Введение в селекторы CSS, для начинающих

Урок №9
Селекторы CSS для начинающих
Введение в селекторы языка CSS.

Селекторы — одна из важнейших тем в языке CSS, на этом сайте, есть даже специальный раздел посвящённый им, а в этом уроке мы лишь немного ознакомимся с ними.

Селектор (от лат. selector) — выборка, сортировка.

Как вам уже известно, язык CSS назначает элементам страницы (заголовкам, абзацам и т.д.) различные свойства, но прежде чем назначить какому-либо элементу страницы CSS-свойство, его нужно сначала выбрать.

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

Основных селекторов существует три вида, это:
1. селектор тега, просто имя тега, до этого мы работали только с ним.
2. селектор класса, это когда тегу назначается атрибут class="имяКласса" и по его имени можно выбрать элемент, одно и тоже имя класса может быть назначено нескольким тегам.
3. селектор уникального идентификатора, это когда тегу назначается атрибут id="имяУникальногоИдентификатора" и по его имени можно выбрать элемент, одно и тоже имя уникального идентификатора может быть назначено только одному тегу на странице.

Селекторы в CSS-коде

Рассмотрим примеры использования различных селекторов:

<style>
 /* влияет на все абзацы */
 p { color: green; }

 /* влияет на все элементы у которых имя 
    класса menyaemFon  */
 .menyaemFon { background-color:#eeeeee; }

 /* влияет на один элемент у которого имя 
    уникального идентификатора menyaemShrift */
 #menyaemShrift { font-weight: 18px; }
</style>

<p>
 Первый абзац</p>
<p class="menyaemFon">
 Второй абзац</p>
<p class="menyaemFon" id="menyaemShrift">
 Третий абзац</p>

В CSS-коде, имя класса должно начинаться с точки ., а уникального идентификатора с решётки #.

Схема CSS-кода

Если до этого, мы схему CSS-кода записывали так:

имяТега { CSS-свойство: значение; }

То теперь, её можно записать так:

селектор { CSS-свойство: значение; }

Где в качестве селектора может выступать:
1. имя тега: h1, p и т.д.,
2. имя класса: .имяКласса и
3. имя уникального идентификатора: #имяУникальногоИдентификатора

Читать далее: Заключение

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget