CSS и HTML
Каскадные таблицы стилей (CSS Cascading Style Sheets) позволяют расширить возможности форматирования языка HTML. Стили обычно хранятся в отдельных файлах или занимают отдельный блок в HTML разметке, что позволяет существенно сократить объем кода на HTML странице с одной стороны, и в некоторой степени отделить контент от разметки, с другой стороны.
Каскадные таблицы стилей позволяют задать формат блоков текста на HTML странице, их расположение, размер и внешний вид. Таблицы стилей также позволяют управлять всеми параметрами шрифта и его цвета. CSS позволяет создать многослойный документ и управлять слоями.
Каскадные таблицы стилей определяют стиль оформления документа, а называются каскадными потому, что параметры форматирования, заданные с их помощью в элементах-контейнерах каскадно наследуются вложенными в них дочерними элементами.
Каскадные таблицы стилей работают с HTML-кодом, но не имеют никакого отношения к языку HTML. Это совершенно другой язык. HTML структурирует документ, упорядочивая информацию в заголовки, абзацы, маркированные списки и т. д., в то время как CSS тесно взаимодействует с браузером, чтобы оформление HTML-документа имело совершенный вид.
Браузер применяет созданные стили для текста, изображений, заголовков и других элементов страницы. Например, можно создать стиль и применить его к одному абзацу на странице, чтобы мгновенно изменить размер, цвет и семейство шрифта в этом абзаце. Можно создавать стили, которые будут применяться к конкретным HTML-элементам. Так, например, браузер будет одинаково отображать на сайте все заголовки первого уровня (h1) независимо от того, где они расположены. Можно создавать стили, которые будут применяться только к определенным элементам, отмеченным особым образом в HTML-коде.
Фактически определение стиля состоит из двух основных элементов: самого элемента веб-страницы, который непосредственно подлежит форматированию браузером, — селектора, а также команд форматирования — блока объявления.
Селекторами могут быть заголовок, абзац текста, изображение и т. д. Блоки объявления могут, например, окрасить текст в синий цвет, добавить красную рамку (границу) вокруг абзаца, установить фотографию в центре страницы — возможности форматирования бесконечны.
селектор {свойство:значение}.
Разумеется, CSS-стили не могут быть написаны на обычном языке, как, например, предыдущий абзац. У них есть собственный язык. В частности, чтобы установить красный цвет и размер шрифта 1,5 em для всех абзацев на веб-странице, нужно написать следующее:
p { color: red; font-size: 1.5em; }.
Подключение стилей к html-документу
Существует три способа использовать стили CSS.
- Непосредственно в коде html
Например:
<p style="font-size:48pt; color:yellow"> Пример </p>
В данном случае текст только одного абзаца будет желтым и 48 кегля.
Такой способ задает максимальный приоритет значениям свойств тега по отношению к другим способам определения стиля.
Недостаток такого способа трудоемкость создания и коррекции документа, целесообразно использовать только для ограниченного числа элементов.
- Подключение CSS в головном тэге <head>…</head> используя тэг <style></style>.
Например:
<head>
...
<style type="text/css">
p {
background-color : yellow;
color: red;
text-align : center
}
</style>
...
</head>
В результате во всем документе будет изменен цвет фона и цвет текста и выравнивание текста в теге <p>.
- Подключение CSS через внешний файл.
Внешняя таблица стилей – это таблица которая связана с HTML-документом при помощи тега link, размещенного в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили, определенные в ней, в чем и заключается преимущество управления языка CSS
Такая таблица стилей находится в отдельном текстовом файле с расширением CSS (желательно, чтобы он находился в той же папке что и web-документ). Тогда таблица стилей подключается с помощью тега <link> в разделе <head>:
<link type="text/css" rel="stylesheet" href="styles.css"/>
Параметр href определяем путь к файлу CSS, если таблица находится в той же папке что и web-документ, то это просто href="styles.css", где styles.css – имя файла CSS.
Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.