Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » CSS » Учебник CSS. Основы CSS

Учебник CSS. Основы CSS
Раздел: Создание сайта » CSS  
30 августа 2009   |   автор: admin Оставить комментарий



 

Селекторы CSS

 

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

 

Типы селекторов

 

Спецификация CSS организует селекторы в группы, основываясь больше на их теоретических характеристиках. Мы же постарались сгруппировать их в соответствии с использованием. Вот они:

 

 

 

Селектор по элементу


Селектор «class»


Селектор «id»


Наследующий селектор

 

 

 

 Селектор по элементу

 

Это самый простой тип селектора (также известный, как селектор по HTML элементу), он выбирает любой элемент на странице с аналогичным тегом. Например, селектор p выбирает любой <p> элемент из документа (то есть любой элемент, помеченный как <p>...</p>).

 

p {
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 1em;
text-align: justify; }

 

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

 

 

 

 

Селектор «class»

 

Селектор «class» позволяет установить определенный стиль группе элементов. Такая потребность может возникнуть, к примеру, если существует необходимость выделить отдельный параграф на странице.

 

Допустим, у вас есть страница, которая состоит из вопросов и ответов на них. Они могут быть заданы тегом параграфа <p>. Но применяя стиль лишь к этому элементу, вы не сможете выделить вопросы на фоне ответов.

 

В этом случае на помощь приходит селектор по классу. Он позволяет задать разный стиль для вопроса и для ответа. Причем его главным отличием от других селекторов является возможность задавать стиль не одному элементу веб-страницы, а целой группе, классу.


Стиль CSS:

 

.question {
font-weight: bold; }
.answer {
font-weight: 400; }

 

Код HTML:

 

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

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

 

 

 

alt

 

В этом примере класс определяет внешний вид любого элемента, к которому он применяется, будь то параграф <p> либо заголовок <h1> (везде, где есть параметр шрифт).

 

Но существует и другая возможность использования данного селектора. С его помощью можно задавать стиль конкретным элементам. Выглядит это так:

 

p.question {
font-weight: bold; }
p.answer {
font-weight: 400; }

 

В первом случае стиль относится лишь к параграфу с классом «question», а во втором - «answer». Никаких других элементов он не затрагивает. То есть жирным шрифтом будут выделены лишь параграфы с классом «question», но не заголовки<h1>, если они существуют, с тем же классом.

 

Обратите внимание, что имя класса должно состоять только из букв и цифр. Оно не может содержать пробелы и начинаться с цифры.

 

Синтаксис

 

В HTML:

 

 

Учебник CSS. Основы CSS

 

 

В CSS перед именем классу ставится точка.

 

 

 

 

Селектор «id»


«ID» селектор очень похож на селектор «class». У него похожие принцип работы и синтаксис. Существенная разница лишь в том, что селектор по классу может применяться к отдельному элементу или их группе, в то время как селектор «id» применим лишь к одному единственному элементу веб-страницы.

 

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

 

Код HTML:

 

<h1 id="title">Список вопросов</h1>

 

Стиль CSS:

 

#title {
color: red;}

 

 

Учебник CSS. Основы CSS

 

 

Возможно, вы поставите под сомнение необходимость в таком селекторе, когда существует «class». Но суть в том, что он существует!!! Поэтому нет необходимости отказываться от его использования. «ID» селектор получил широкое распространение в CSS.

 

Синтаксис

 

Как уже упоминалось выше, синтаксис данного селектора очень похож на синтаксис селектора «class». Главным отличием является то, что вместо точки перед именем селектора ставится знак #.

 

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

 

#idname (к примеру, #title)

 

При необходимости использовать данный селектор лишь к конкретной типу элемента, например, к его заголовку первого уровня <h1>, запись будет иметь такой вид:

element-name#idname (к примеру, h1#title)

 

 

 

 

Наследующий селектор

 

Этот селектор иногда может быть очень полезен. Он позволяет управлять внешним видом HTML элементов в зависимости от их связи с другими элементами, согласно иерархии принятой в HTML документах.


Схема иерархии HTML документа:

 

 

Учебник CSS. Основы CSS

 

 

Можно увидеть, что <body>, является родительским элементом по отношению к заголовку <h1> и параграфу <p>, они в свою очередь являются «детьми» по отношению к элементу <body>.

 

<h1>, <p> <img /> и <a> - потомки тега <body>.

 

Наследующий селектор работает в том случае, если существуют оба элемента - родитель и потомок.

 

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

 

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

 

p a {color: red;}

 

При этом используем такой HTML код:

 

<p>Этот параграф содержит текст и ссылку красного цвета <a href="/">web-lesson.ru</a></p>

 

 

 

Учебник CSS. Основы CSS

 


Таким образом, мы сообщили браузеру, что все ссылки, которые находятся внутри параграфов необходимо отображать красным цветом. Соответственно эта инструкция не касается других ссылок, которые могут присутствовать в нашем документе.

 

Наследующий селектор может иметь любой уровень вложения. К примеру:

 

 

ul li a {color: red;}

 

Синтаксис

 

Все очень просто. Синтаксис заключается в простом перечислении элементов, разделенных пробелом. Учитывать необходимо лишь их последовательность, от верха к низу иерархии.

 

 

 Сайт: web-lesson.ru


Ключевые теги: Учебник CSS
Предыдущая страница | Страница 4 из 4
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код