Структура стиля в HTML с использованием CSS, устанавливающего внешний вид какого-либо элемента (фрагмента) веб-страницы, — это всего лишь правило, которое сообщает браузеру, что и каким образом форматировать: изменить цвет шрифта заголовка на синий, выделить фото красной рамкой, создать меню шириной 150px для списка гиперссылок. Если бы стиль мог говорить, он сказал бы: «Браузер, сделай, чтобы вот это выглядело так то».
Советуем Вам ознакомиться с статьей "HTML и CSS. Рекомендации для веб-дизайнеров!"
Фактически определение стиля состоит из двух основных элементов: самого элемента веб-страницы, который непосредственно подлежит форматированию браузером, — селектора, а также команд форматирования — блока объявления. Селекторами могут быть заголовок, абзац текста, изображение и т.д. Блоки объявления могут, например, окрасить текст в синий цвет, добавить красную рамку (границу) вокруг абзаца, установить фотографию в центре страницы — возможности форматирования бесконечны.
Вся информация взята с сайт: https://indeling.ru. В дальнейшем # будет прописана как (решетка) ввиду особенностей редактора Яндекс.ДЗЕН
Например, тело сайта FreshBooks, включает простой стиль:
body {
font-family: "Franklin-Book", Helvetica, Arial, sans-serif;
color: (решетка)222;
}
Разумеется, CSS-стили не могут быть написаны на обычном языке, как, например, предыдущий абзац. У них есть собственный язык. В частности, чтобы установить красный цвет и размер шрифта 1,5 em для всех абзацев на веб-странице, нужно написать следующее:
p { color: red; font-size: 1.5em; }
Этот стиль как бы говорит браузеру: «Раскрась текст всех абзацев веб-страницы, заключенных в элемент p, красным цветом и установи размер шрифта равным 1,5 em (единица измерения размера шрифта текста в браузере). Любой стиль написанный на HTML и CSS, даже самый простой, содержит несколько элементов.
- Селектор. Как уже было отмечено, селектор сообщает браузеру, к какому эле-менту или элементам веб-страницы применяется стиль: к заголовку, абзацу, изображению или гиперссылке.
- Блок объявления. Код, расположенный сразу за селектором, содержит все команды форматирования, которые можно применить к этому селектору. Блок начинается с открывающей фигурной скобки { и заканчивается закрывающей }.
- Объявление. Между открывающей и закрывающей фигурными скобками блока объявления можно добавить одно или несколько объявлений — команд форматирования. Каждое объявление имеет две части — свойство и значение. Двоеточие отделяет имя свойства от его значения, и все объявление заканчивается точкой с запятой.
- Свойство. Каскадные таблицы стилей предлагают большой выбор команд форматирования, называемых свойствами. Свойство представляет собой слово или несколько написанных через дефис слов, определяющих конкретный стиль. У большинства свойств есть соответствующие простые для понимания имена, такие как font-size, margin-top, background-color и т. д. (в переводе с английского: размер шрифта, верхний отступ, цвет фона). После имени свойства нужно добавить двоеточие, чтобы отделить его от значения.
- Значение. Наконец настал тот момент, когда вы можете задействовать свой творческий потенциал, присваивая значения CSS-свойствам: к примеру, устанавливая фоновый цвет синим, красным, фиолетовым, салатовым и т. д. Как будет описано в следующих главах, различные свойства каскадных таблиц стилей требуют указания определенных типов значений — цвета (red или (решетка)FF0000), размера (18px, 200% или 5em), URL-адреса (images/background.gif), а также определенных ключевых слов (top, center или bottom).
У стилей может быть множество свойств форматирования, и есть возможность упорядочить код таблицы стилей, разбивая объявления на строки. Например, поместите селектор и открывающую скобку на одной строке, каждое объявление — далее на отдельных строках, а закрывающую фигурную скобку — отдельно на последней строке стиля. Это будет выглядеть следующим образом:
p {
color: red;
font-size: 1.5em;
}
Любой браузер игнорирует символы пробела и табуляции, так что вы можете спокойно добавлять их, создавая хорошо читаемые стили CSS. Кроме того, при перечислении свойств полезно сделать отступ табуляцией или несколькими пробелами для явного отделения селектора от блока объявления. К тому же один про-бел между двоеточием и значением свойства, конечно, необязателен, но он обеспечивает дополнительную удобочитаемость стилей. Фактически можно добавить любое количество пробелов там, где вам захочется. Например, color:red, color: red и color : red — все варианты будут правильно работать.
Не забывайте указывать в конце каждой пары «свойство/значение» точку с запятой: color: red; Пропуская эту точку с запятой, вы собьете с толку браузер, в результате чего таблица стилей будет нарушена и веб-страница отобразится некорректно. Однако не стоит переживать — описанная ошибка достаточно распространена, поэтому используйте валидатор каскадных таблиц стилей.
Вся информация взята с сайт: https://indeling.ru
