» » Селекторы в CSS

Селекторы в CSS

 CSS – каскадные таблицы стилей.

Внимание! У Вас нет прав для просмотра скрытого текста.

Мир CSS – это волшебный мир бесконечного комбинирования свойств и внешнего вида (стилей) HTML-объектов и элементов. И, самое главное действующее лицо на этом «празднике жизни» CSS – это селектор CSS.

  1. Селекторы в CSS – термины и определения
  2. Селектор в CSS – «мыслью по древу»
  3. Зачем нужен селектор в CSS
  4. Глобальные свойства в CSS
    (жизнь без селекторов)
  5. Что такое селектор в CSS
  6. Селекторы в CSS | Примеры и комментарии

Селекторы в CSS – термины и определения

Как известно, стили (внешний вид и свойства) HTML-элементов
могут быть встроенными, внутренними и внешними.

Встроенные стили
Встроенные стили указываются напрямую в HTML-тегах и с ними, пожалуй – проще всего. Действие встроенных стилей распространяется исключительно на тот HTML-элемент, в открывающий тег которого он вставлен (встроен). Например, вот такой код: <span style="background:red">text</span> – создаст красный фон только внутри элемента span и не более того. Результат – text
Внутренние стили
Внутренние стили указываются в виде отдельно стоящего кода, который может располагаться в исходном коде веб-страницы, где только ему не заблагорассудится – в начале страницы, в её конце или посредине. Пример кода внутреннего стиля:
<style type="text/css">
span{background:red;}
a{color:blue;}
</style>
Внешние стили
Самый сложный вариант – это внешние стили. В случае использования внешних стилей, код каждого стиля записывается во внешнем файле с расширением «.css». Таких файлов может быть несколько и находится они могут где угодно, даже на другом сайте.

В отличие от встроенного стиля, действие кода внутреннего и внешнего стилей распространяется сразу на всю веб-страницу. При этом, на поле самой веб-страницы может находиться огромное количество различных похожих HTML-элементов. Чтобы точно указать браузеру к какому элементу относится тот или иной стиль, в технологии CSS применяются классы, псевдоклассы, идентификаторы и селекторы. Таким образом, «селектор в CSS» – это служебный символ для описания элемента или группы элементов, к которым применяется указанное правило стиля.

Прим. Справедливости ради нужно отметить, что такие вещи, как – классы и идентификаторы – относятся больше в HTML-коду, нежели к CSS-стилям. И только «CSS-селекторы» и псевдоклассы – это истинно CSS-наработка. О чём, собственно и речь.

Селектор в CSS – «мыслью по древу»

Исходя из вышесказанного, для себя лично, я так определил понятие термина «селектора в CSS»:

«селектор в CSS» – это служебный знак, который сообщает браузеру, где и как применить указанный стиль HTML-элемента.

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

Зачем нужен селектор в CSS

Селектор в CSS – это, своего рода – связующее звено между кодами CSS и HTML. Установив селектор (сделав выбор элемента), мы указываем браузеру место, объект и правила для применения прописанных CSS-свойств (стилей). Чтобы перейти от зауми к практике, наверное, будет уместно вспомнить про жизнь в CSS без селекторов.

Глобальные свойства в CSS
(жизнь без селекторов)

Жизнь без селекторов возможна! Но, разве это жизнь? Без селекторов, каскадные таблицы стилей (CSS) полностью теряют свой смысл. Во-первых, в имя класса без селектора возможно записать только имя реального тега HTML из реальной существующей спецификации HTML. Во-вторых, такая запись будет распространяться абсолютно на все теги с указанным именем на HTML-странице, которые только там найдутся.

Например, запись вида:

a{background:#000;}
– закрасит в чёрный цвет все ссылки на странице
table{background:#000;}
– закрасит в чёрный цвет все таблицы на странице
div{background:#000;}
– закрасит в чёрный цвет все блоки (div-ы) на веб-странице, и т.д.
Короче, все прописанные CSS-стили и свойства будут применяться не выборочно, а глобально, распространяясь в своём действии сразу на все теги страницы...

Безусловно, в такой записи без селекторов есть своя прелесть. Ведь, именно так, в CSS объявляются глобальные стили для всех HTML-объектов. Самый распространённый пример объявления глобальных свойств – это кроссбраузерный сброс отступов (маржинов и паддингов). Его код в CSS выглядит, примерно так: html,body,div,ul,li,dl,dt,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}, хотя могут быть и другие варианты. Другой популярный пример глобальных настроек (стилей), действующих на все HTML-объекты на странице – это кроссбраузерное форматирование новых HTML5-тегов: header,section,footer,aside,nav,article{display:block;}. Тут, опять-таки, тоже возможны другие варианты.

Однако, в любом случае – всё это будут глобальные стили CSS, установленные для всего веб-документа – свойства, распространяющиеся абсолютно на все указанные теги и элементы страницы HTML. А вот, чтобы настройки CSS подействовали только на указанный нужный элемент или группу элементов HTML – потребуется селектор.

Что такое селектор в CSS

Подведём итоги.

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

Второе. Чтобы обозначить HTML-элемент, ему присваивается класс или идентификатор, код которого добавляется в код HTML-элемента.

Третье. Чтобы связать код HTML-элемента и код его стиля – в CSS используют селекторы. Селектор – это специальный символ, который записывается перед именем класса или идентификатора в тексте стиля и создаёт правило для его обработки браузером. Таким образом, селектор в CSS – это своеобразный маркёр, создающий связь между каждым конкретным HTML-элементом и его стилем и задающим правило обработки этой связи.

Прим. Конечно-же, если это внешний файл CSS, то он должен быть подключён в HTML-документ, иначе «до лампочки» все селекторы. Для подключения внешнего файла CSS, в секцию <head> HTML-документа нужно добавить строку, вида:
<link rel="stylesheet" type="text/css" href="my.css" />, где my.css – путь к нашему файлу с расширением «.css».

Селекторы в CSS на tehnopost.info

  1. Селектор в CSS – термины и определения
  2. Селектор в CSS – «мыслью по древу»
  3. Зачем нужен селектор в CSS
  4. Глобальные свойства в CSS
    (жизнь без селекторов)
  5. Что такое селектор в CSS
  6. Селекторы в CSS | Примеры и комментарии

Ключевые слова статьи: интернет сайт HTML

Поделиться ссылкой на статью в социальной сети, добавить в избранное или распечатать:

Добавление комментария

Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив