Как создать правило css

Урок 2. Селекторы и правила CSS

В прошлом уроке мы разбирали способы подключения CSS. Теперь перейдём к самому языку.

Как и любой другой язык, CSS имеет свой, однако предельно простой синтаксис. Состоит всего из двух компонентов:

1. Селектор (выбор объекта, с которым будем работать. Например, заголовок, div, таблица и тд.)
2. Блок стилей — описание одного или нескольких свойств объекта — цвет, размер и тд. Заключается в фигурные скобки <>


Мы видим, как заголовку — селектор, в блоке стилей присваивается свойство цвет текста (color) — синий.
Блок стилей состоит из свойств и их значений, которые при перечислении разделяются точкой с запятой ( ; ), как в примере ниже.


Теперь мы добавляем ещё одно свойствоформатирование текста (font). В нём мы придаём значение размер текста — 20 пикселей.

Пример работы CSS

Создайте в любом месте папку, например, урок 2. В ней создайте файл style.css. В него скопируйте весь код ниже. В коде CSS мы задаём свойства для тега <body> и заголовков <h1> и <h2>.

Код CSS (файл style.css)

Обратите внимание, не будет разницы, записывать блок стилей в строчку (h1,h2) или в столбик (body). И тот, и другой вариант будут работать. Выбирайте так, как Вам удобно.

Теперь создаём HTML-файл. Неважно, какое будет название, главное, чтобы путь к файлу с CSS кодом был указан верно. Указывается также как и в ссылках, путях к изображениям. В примере ниже указан путь (style.css) в ту же директорию, что и html-файл. То есть оба файла должны быть в одной папке.

Код HTML

Результат работы кода можно увидеть по ссылке ниже.

Если Вы измените какие-либо свойства в блоке стилей, то для обновления дизайна достаточно обновить страницу (Ctrl+F5).

Селекторы CSS

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

Идентификаторы

Идентификатор элемента — это селектор, который присваивается одному элементу и делает его уникальным. Задаётся при помощи параметра id.

Сначала в стилях у всех параграфов в свойстве цвета указан черный цвет, а текст параграфа с id &quot;blue&quot; будет синим. Селектор в данном случае состоит из элемента (p — параграф), разделителя (# — обозначение идентификатора) и имени идентификатора (blue).

Важно отметить то, что идентификатор в теории даётся только одному элементу, которому хотим придать уникальные свойства. Да, в некоторых браузерах, если дать один и тот же идентификатор двум элементам, то может сработать. Однако, такое получится не во везде.

Если хотите задать стили для нескольких элементов, то следует использовать классы.

Классы

Класс (class) — это селектор, который позволяет применить стили к одному и более элементам. Например, id применим только к одному уникальному элементу. В качестве значения принимается имя элемента.

Названия (имя) для id и class могут быть одинаковыми, однако для CSS это всё равно будут разные элементы. В CSS к идентификатору обращается упоминанием символа #, а к классу . (точкой).

В результате параграф с идентификатором (id) blue будет иметь текст синего цвета, элементы с class blue будут выделены полужирным шрифтом и синим цветом. А все остальные элементы p будут иметь шрифт чёрного цвета.

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

Унифицированные селекторы

Унифицированные селекторы (.) — это селектор, который можно присвоить разному типу элементов, например, и заголовкам, и параграфам, и блокам (div). Самый распространённый вариант. До этого мы использовали конструкцию в коде CSS p#blue и p.blue, то есть сначала указывали тип элемента (p — параграф), а потом уже сам идентификатор или класс. Так вот можно указывать конструкцию проще, сразу начинать с .blue. Подобный селектор будет применим уже не только к параграфам, а к другим элементам.

В результате унифицированный селектор, в данном случае класс .blue, мы применили и к парафграфу (p), и к блоку (div), и к строковому элементу (span). Результат везде одинаковый — текст полужирный и синего цвета.

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

Контекстный селектор — это селектор, который выделяет один элемент в группе других элементов. В написании выделяется пробелом. Чтобы было легче, сразу перейдём к примеру. Допустим мы хотим, чтобы полужирный текст, содержащийся в параграфах выделялся ещё каким-либо цветом.

Соответственно синим будет выделен только тот полужирный текст (strong), который будет в параграфе (p).

Группировка селекторов

Группировка селекторов — это такая конструкция таблицы стилей, где блок объявления стилей обращён к одному и более ранее упоминаемым элементам и добавляет новое свойство.

По тексту сложно понять. Лучше сразу к примеру.

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

Последующими упоминаниями данных элементов мы добавляем им значения новых свойств. В данном случае размера шрифта.

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

Использование группировки — вопрос спорный. Среди преимуществ можно отметить то, что удаётся избегать крупных частей кода, которые по содержание будут во многом дублировать себя. Из недостатков можно сказать, что использование подобного кода, где свойства к тому или иному элементу дописываются в разных местах достаточно проблемно и неудобно. Конечно, при грамотном последовательном написании можно избежать подобных минусов, но это уже другой вопрос.

Каскадные таблицы стилей¶

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, оформленного языком разметки.

Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

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

Что такое CSS?¶

Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.

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

Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу.

Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования — наследование (inheritance), — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге <div>, то все теги внутри этого блока будут отображаться этим же цветом.

Использование каскадных таблиц дает возможность разделить содержимое и его представление и гибко управлять отображением гипертекстовых документов путем изменения стилей.

Официальная информация о спецификации Cascading Style Sheets всегда доступна по адресу http://www.w3.org/Style/CSS/

Общий синтаксис таблиц стилей¶

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Таблицы стилей составляются из определенных частей (рис. 1):

../_images/css-rule.png

Рис. 1. Синтаксис описания стиля CSS

  • Селектор (Selector). Селектор — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа.
  • Свойство (Property). Свойство определяет одну или несколько характеристик селектора. Свойства задают формат отображения селектора: отступы, шрифты, выравнивание, размеры и т.д.
  • Значение (Value). Значения — это фактические числовые или строковые константы, определяющие свойство селектора.
  • Описание (Declaration). Совокупность свойств и их значений.
  • Правило (Rule). Полное описание стиля (селектор + описание).

Таким образом, таблица стилей — это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так:

Регистр символов значения не имеет, порядок перечисления селекторов в таблице и свойств в определении не регламентирован.

Правила CSS¶

Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Приведем несколько примеров написания таких правил:

  1. Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px:

Это правило будет применено ко всем тегам <p>.

  1. Синий цвет для заголовков с первого по третий уровень:
  1. Таблицы и изображения выводить без обрамления:
  1. Ссылки в элементах списков показывать без подчеркивания:
  1. Внутренние отступы слева и справа для блоков (<div>), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом:
  1. Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент a:hover).

Классы¶

Стандарт CSS представляет возможности создания именованных стилей — стилевых классов. Это позволяет ответить на такой, например, вопрос: Как применить разные стили к одному и тому же селектору?

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

Для применения созданного класса его имя нужно указать в атрибуте class для выбранных абзацев:

Общий синтаксис описания класса:

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

Вот несколько примеров:

Идентификаторы¶

В качестве селектора может выступать идентификатор элемента гипертекста, указанный в атрибуте id. Для назначения стилей таким элементам используется синтаксис, аналогичный описанию классов, но вместо точки ставится знак # (“решетка”). Например:

Следует помнить, что идентификаторы элементов должны быть уникальны в пределах документа.

Группировка свойств¶

Группировка (grouping) состоит в объединении значений родственных свойств. При этом таблица стилей становится более компактной, но предъявляются более жесткие требования к описанию правил. Ниже приведен пример обычного стиля, задающего отступы:

Это же правило можно переписать с группировкой в следующем виде:

Оба стиля будут отображаться одинаково.

Группировка может применяться для таких свойств, как padding, font, border, background и еще некоторых (см. документацию CSS)

Использование в веб-страницах¶

Существует три способа применения таблицы стилей к документу HTML:

  • Встраивание (Inline). Этот метод позволяет применить стиль к заданному тегу HTML.
  • Внедрение (Embedded). Внедрение позволяет управлять стилями страницы целиком.
  • Связывание (Linked или External). Связанная таблица стилей позволяет вынести описание стилей во внешний файл, ссылаясь на который можно контролировать отображение всех страниц сайта.

Встроенные стили¶

Встраивание стилей предоставляет максимальный контроль над всеми элементами веб-страницы. Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:

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

Внедренные стили¶

Внедренные стили используют тег <style>, который обычно размещают в заголовке HTML-документа (<head>. </head>):

Связанные таблицы стилей¶

Связанные (linked), или внешние (external) таблицы стилей — наиболее удобное решение, когда речь идет об оформлении целого сайта. Описание правил помещается в отдельный файл (обычно, но не обязательно, с расширением .css). С помощью тега <link> выполняется связывание этой таблицы стилей с каждой страницей, где ее необходимо применить, например так:

Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле sample.css. Следует отметить, что файл со стилями физически может находиться на другом веб-сервере, тогда в href нужно указать абсолютный путь к нему.

Проблемы с браузерами

Обязательно просматривайте страницы с таблицами стилей в различных браузерах. Это связано с тем, что разные браузеры могут по разному интерпретировать одно и то же правило, а некоторые свойства и/или значения и вовсе не поддерживать. Следует также тестировать страницы с отключенными стилями (например, в текстовых браузерах), чтобы убедиться, что страница читабельна.

И снова каскадирование¶

Если вам нужна сотня-другая-третья страниц HTML — используйте внешнюю, глобальную, таблицу стилей. Если некоторые из этих страниц требуют корректировки общего оформления — используйте внедренный стиль. А если на странице нужно явно изменить оформление одного-двух элементов, то применяйте встроенные стили. Именно в таком порядке происходит перекрытие стилей при каскадировании, схематично это можно представить так: связанные стили -> внедренные стили -> встроенные стили

Аппаратно-зависимые стили¶

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

Как видно из примера, вся таблица разбивается на секции, каждая из которых начинается со слова &#64;media, за которым следует название класса устройств и далее, в фигурных скобках, непосредственно описание стилей.

Можно разделить таблицы стилей иначе, указав тип устройства в теге <link>:

Свойства CSS¶

В таблице ниже перечислены некоторые часто используемые свойства CSS и их назначение.

Имя Значения Описание
background [background-color || background-image || background-repeat || background-attachment || background-position] | inherit Управление фоном элемента
background-color <color> | transparent | inherit Цвет фона
background-image <uri> | none | inherit Фоновое изображение
background-position [ [<percentage> | <length> ] <1,2>| [ [top | center | bottom] || [left | center | right] ] ] | inherit Положение фоновой картинки
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit Повторение фоновой картинки
border [ border-width || border-style || <color> ] | inherit Границы элемента
border-collapse collapse | separate | inherit Объединение/разделение смежных границ
border-color <color> <1,4>| transparent | inherit Цвет границы
border-style <border-style> <1,4>| inherit Стиль линии границы
border-top border-right border-bottom border-left [ border-top-width || border-style || <color> ] | inherit Управление стилем заданной границы
border-width <border-width> <1,4>| inherit Толщина линии границы
bottom <length> | <percentage> | auto | inherit Низ элемента
clear none | left | right | both | inherit Запрет заполнения свободного пространства рядом с элементом
clip <shape> | auto | inherit Обрезка содержимого элемента
color <color> | inherit Цвет содержимого
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit Форма курсора
display inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit Способ отображения элемента
empty-cells show | hide | inherit Отображение пустых ячеек таблицы
float left | right | none | inherit Свободное размещение элемента
font [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit Управление шрифтом
font-family [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit Гарнитура
font-size <absolute-size> | <relative-size> | <length> | <percentage> | inherit Кегль
font-style normal | italic | oblique | inherit Стиль шрифта
font-variant normal | small-caps | inherit Варианты отображения шрифта
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit Толщина шрифта
height <length> | <percentage> | auto | inherit Ширина элемента
left <length> | <percentage> | auto | inherit Положение левой границы элемента
line-height normal | <number> | <length> | <percentage> | inherit Высота строки
list-style [ list-style-type || list-style-position || list-style-image ] | inherit Стиль списка
margin <margin-width> <1,4>| inherit Внешний отступ
margin-top margin-right margin-bottom margin-left <margin-width> | inherit Внешний отступ по заданной стороне
padding <padding-width> <1,4>| inherit Внутренний отступ
padding-top padding-right padding-bottom padding-left <padding-width> | inherit Внутренний отступ по заданной стороне
position static | relative | absolute | fixed | inherit Позиционирование элемента
right <length> | <percentage> | auto | inherit Положение правой границы
text-align left | right | center | justify | <string> | inherit Выравнивание текстового блока
text-decoration none | [ underline || overline || line-through || blink ] | inherit Текстовые эффекты
text-indent <length> | <percentage> | inherit Абзацный отступ
text-transform capitalize | uppercase | lowercase | none | inherit Начертание текста
top <length> | <percentage> | auto | inherit Положение верхней границы элемента
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit Вертикальное выравнивание в пределах блока
visibility visible | hidden | collapse | inherit Управление видимостью элемента
white-space normal | pre | nowrap | inherit Управление пробелами между словами
width <length> | <percentage> | auto | inherit Ширина элемента
z-index auto | <integer> | inherit Порядок перехода по клавише Tab

Позиционирование элементов¶

Рассмотрим пример, приведенный в Листинге 4 из ЛР №1. В этом примере фрагменты содержимого размещены в блочных элементах <div>, для которых переопределены стили свойств, определяющих положение на странице. Если отключить эти стили, то вид страницы сильно изменится (рис. 2).

../_images/no-styles.png

Рис. 2. Вид страницы с отключенными стилями

Такое влияние на внешний вид оказывает свойство position. Это свойство в сочетании со свойствами left, top, right, bottom, display, clear и ряда других позволяет управлять положением элементов на странице и порядком их вывода. Свойство position может принимать такие значения:

static — нормальное положение Данный блок является обычным блоком, он отображается согласно общим правилам. Свойства &#8216;left&#8217; и &#8216;top&#8217; не применяются. relative — относительное позиционирование Положение блока рассчитывается в соответствии с нормальным потоком вывода. Затем блок смещается относительно своего нормального (static) положения. absolute — абсолютное позиционирование Положение блока (возможно и размер) указывается с помощью свойств &#8216;left&#8217;, &#8216;right&#8217;, &#8216;top&#8217; и &#8216;bottom&#8217;. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих элементов того же уровня. fixed — фиксированное положение Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно области просмотра или страницы. Два объявления могут быть отделены друг от друга с помощью правила &#64;media, как это показано в примере:

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

CSS — Урок 3. Правила и селекторы CSS

CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:

Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег <body>, значит идем на страницу style.css и пишем следующий код:

Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.

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

Селекторы CSS

Селекторы по идентификатору

В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них — розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

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

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