Подключение CSS
Прочитав каскадную таблицу стилей, браузер форматирует HTML документ в соответствии с правилами, заданными в этой таблице стилей.
Три способа добавить CSS на веб-страницу
Существует три способа подключения CSS к документу HTML:
- Внутриэлементный или строчный
- Внутридокументный или встроенный
- Внешний
Внутриэлементные стили
При внутриэлементном или строчном подключении стиля, он задается непосредственно внутри определения HTML тега при помощи атрибута style. Атрибут style принимает любое CSS свойство. Данный способ используется для подключения уникального стиля к одному отдельно взятому элементу.
Это выглядит следующим образом:
Заголовок
Текст. И еще текст.
Однако, как вы, наверное, помните, лучший подход – это когда HTML документ полностью свободен от элементов и атрибутов визуального представления. Разделение содержимого и его визуального представления — это то, ради чего, собственно, и создавался CSS. Поэтому внутриэлементный способ определения стилей следует стараться избегать и использовать только при крайней необходимости.
Внутридокументные стили
Встроенные или внутридокументые стили используются для определения стилей элементов целой веб-страницы, если эта страница имеет свои уникальные стили. Для этого в теге определяется тег , в котором задаются все стили для данной веб-страницы.
Такое определение выглядит следующим образом:
Пример CSS h1 < color: red; >p Заголовок
Текст. И еще текст.
Следующее определение сделает все параграфы страницы синими, а все ссылки заголовки первого уровня красными.
Помня о разделении файлов HTML и CSS, внутриэлементные стили также нужно стараться избегать. Хотя иногда подобные стили бывают полезными. Например, для ускорения загрузки страницы.
Внешние стили
Внешние стили используются для подключения одновременно ко многим страницам сайта. Благодаря этому, изменив всего один файл CSS можно изменить внешний вид всего сайта!
Для определения таблицы стилей в любом текстовом редакторе создается отдельный CSS файл с определениями стилей. Содержимое такого файла может быть, например, таким:
Если сохранить такой файл под именем «web.css» (расширение должно быть «.css»), то его подключают к HTML документу при помощи тега :
Пример CSS Заголовок
Текст. Еще текст.
Далее вы увидите, что есть еще и другие способы подключения внешних стилей, но в данный момент упомянутых способов будет вполне достаточно.
Несколько таблиц стилей на одной странице
Если какое-то свойство определяется для одного и того же селектора (элемента) в нескольких разных таблицах стилей, то использоваться будет значение того свойства, которое определяется в последней по подключению таблице стилей.
Допустим, что во внешней таблице стилей определен такой стиль для элемента :
Теперь допустим, что во внутридокументной таблице стилей также определен стиль для элемента :
Если внутридокументная таблица подключается после внешней таблицы стилей, то цвет элемента будет «orange»:
Однако, если внутридокументная таблица подключается до внешней таблицы стилей, то цвет элемента будет «navy»:
Каскадный порядок
А какой стиль будет использоваться, если для HTML элемента задано больше одного стиля?
Все стили на веб-странице будут «каскадно» транслированы в новую «виртуальную» таблицу стилей в следующем порядке (цифра 1 имеет наивысший приоритет):
- Внутриэлементный стиль (внутри HTML элемента)
- Внешние и внутридокументные таблицы стилей (в секции head)
- Стили браузера по умолчанию
Таким образом, у внутриэлементных стилей самый высокий приоритет, и они будут переопределять внешние и внутридокументные стили, а также стили, заданные браузером по умолчанию.
Учебник CSS — Урок 1 — подключаем CSS-стили
Я не буду объяснять зачем нужен CSS. Если вы открыли этот учебник значит вы желаете его выучить. От себя лишь скажу, что возможности CSS очень широки и позволяют верстать макеты любой сложности. В свою очередь использование css означает, что вам придется отказаться от использования различных атрибутов тегов size, color, bgcolor, align и других, которые будут «мешать» CSS.
Существует по крайней мере три способа подключения CSS к вашему HTML файлу. Давайте рассмотрим самый простой, потом второй и правильный способ.
CSS внутри тега
CSS можно подключить c помощью атрибута style:
Блок
Так мы задаем блок размером 200 на 100 пикселей. Давайте рассмотрим как пишется CSS. Сначала мы пишем атрибут style=»». И потом уже в ковычках пишем css-стили.
style="параметр:значение;параметр:значение;параметр:значение"
Пишем стили мы так сначала идет параметр (widht, height и другие), потом идет двоеточие и значение параметра. Разделяем каждый параметр точкой с запятой.
Теперь ко второму способу написания CSS.
CSS в начале HTML-документа
Для этого мы используем тег в котором мы пишем CSS-код.
Учебник CSS Учите CSS вместе с drupalbook.org
Тег style мы пишем в теге после тега . Давайте напишем какой-нибудь CSS-код:
Учебник CSS Учите CSS вместе с drupalbook.org
2 строка учите CSS вместе с drupalbook.org
Давайте посмотрим как пишется css для тегов. Если мы пишем название тега в css, то для всех этих тегов будут применены параметры CSS. Так например если мы пишем p то значит для всех параграфов будет выбраны следующие параметры.
Когда мы пишем CSS-код, то сначала мы указываем тег для которого применяем css-стили, дальше мы в фигурных скобках пишем css-стили. CSS-стили пишутся также как и в атрибуте style=»»:
параметр:значение;параметр:значение;параметр:значение
Параметр, двоеточие, значение, точка с запятой и снова параметр, двоеточие, значение, точка с запятой и снова. После последнего стиля можно не ставить точку с запятой, но лучше всего поставить.
Мы вставили двумя способами css-стили, а теперь давайте используем третий способ, самый оптимальный.
CSS в отдельном файле
Это самый лучший способ, который позволяет отделить полностью CSS от HTML-кода. Конечно иногда хочется вставить CSS прямо в HTML-код, но надо бить себя по рукам в этом случае и выносить CSS в отдельный файл. Зачем?
Это основная идея CSS размежевать текст и оформление текста. HMTL нам нужен чтобы разметить текст, а вот CSS нужен для того чтобы этот текст гармонично выглядел. С помощью HTML выводиться только текст, а с помощью CSS размеры, цвета, формы, границы, отступы.
Это было во-первых, теперь во-вторых когда код HTML и CSS в одном файле, то это становится нечитабельно и грамоздко. А теперь в-третьих, css сохраняются в браузере, поэтому если вынести весь CSS отдельно, то страница будет загружаться быстрее, потому что загружать css нужно только один раз. Я думаю вам уже стало понятным к чему я клоню?
CSS нужно стараться выносить в отдельный файл! Вот к этому я и клоню. А теперь давайте создавать отдельный css файл. Для этого есть тег :
Учебник CSS Учите CSS вместе с drupalbook.org
2 строка учите CSS вместе с drupalbook.org
У тега есть следующие атрибуты:
type=»text/css» — так мы указываем то что это css,
rel=»stylesheet» — это указывает на то что этот файл является css-файлом,
media=»all» — этот css файл будет отображаться для всех устройств, через которые просматривают сайт,
href=»styles.css» — путь к css файлу, в нашем случае путь относительный.
Кажется разобрались с тем как подключать css файл, теперь создавайте этот файл styles.css в той же папке где и html-файл.
Теперь открывайте файл styles.css и вставьте него css-стили:
body < background: #eeeeee; /* фон страницы */ font-size: 14px; /* размер шрифта */ >p< color: #ff0000; /* цвет текста */ >
Сохраните этот файл и откройте через браузер ваш html-файл. Теперь css подключен к вашему файлу как полагается, через отдельный файл. В следующем уроке мы подробно начнем разбирать, как писать стили в отдельном файле.