Урок №2. подключаем css-стили к html-файлу

Содержание:

Ссылка на CSS-файл внутри на файл этого же типа.
- Тест на закрепление материала:
Описание CSS-свойств в style.css
Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3
Встроенные стили
- Пример
Вариант 3 — Внутренний CSS
Важность знания CSS при работе с сайтом
Разбор файла style.css
Блок . Способы подключения CSS к HTML коду
Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.
Подключение CSS к html через import
Добавление стилей к элементам HTML
Вариант 1 — Глобальный CSS
- Как произвести подключение CSS к HTML странице
ШАГ 2: изменяем цвета

Ссылка на CSS-файл внутри на файл этого же типа.

Кроме всех выше перечисленных способов, есть способ, который позволяет внутри одного CSS-файла размещать ссылки на множество других!

Реализуется это следующим образом: Во-первых, нам необходимо подключить все тем же способом хотя бы один файл CSS к Вашему коду.

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url("style-2.css");

Тест на закрепление материала:

Нам необходимо подключить CSS-файл путем размещения на него ссылки в HTML-файле. Какой способ из ниже указанных является верным?

Вариант 1:

<link rel="stylesheet" type="text/css" href="style.css" >

Вариант 2:

<link type="text/css" href="style.css" >

Вариант 3:

<link rel="stylesheet" href="style.css" >

Вариант 4:

<link rel=stylesheet type=text/css href=style.css >

Можем ли мы разместить каскады CSS непосредственно в файле HTML?

Вариант 1: Да, можем! (Если можем, то почему?)

Вариант 2: Нет, не можем! (Если не можем, то почему?)

Можем ли мы подключить несколько CSS-таблиц к одному файлу?

Вариант 1: Да, можем! (Если можем, то почему?)

Вариант 2: Нет, не можем! (Если не можем, то почему?)

Нам нужно сделать часть текста, выделенного тегом <p>, красным цветом. Какой из вариантов будет верным?

Вариант 1.

<p style="color:red;">
Я думаю, что правильный ответ - это первый вариант
</p>

Вариант 2.

<p style="color: #ff0000;">
Я думаю, что правильный ответ - это второй вариант
</p>

Описание CSS-свойств в style.css

Как вставить флэш-ролики, видео и аудио файлы в html документ? урок №18

background-color — цвет заднего фона. Весь элемент будет окрашен в указанный цвет. Некоторые значения цвета можно писать прямо словами (gray, white, black, red и т.д.), но обычно для этого используют HEX-формат. Если не знаете, что это то пока не задумывайтесь об этом.

font-size — размер шрифта. Здесь задан в пикселях (px) — основной единице измерения для числовых значений в CSS

color — цвет шрифта

text-align — расположение текста по горизонтале

margin — внешние отступы элемента. Каждые элемент имеет свои границы, как деталь страницы сайта. И элементу можно задать отступы от соседних элементов. Пока просто запомните это.

padding-top — внутренний отступ от верха элемента. Если внутри элемента находится другой элемент, то можно указать, что внутренний находится на некотором расстоянии от границы внешнего. Тоже пока просто запомните.

Это был достаточно объемный урок, в котором Вы узнали много новой полезной информации. Вы все ближе к тому, чтобы профессионально верстать качественные сайты!

HTML и CSS — тема легкая и интересная, а также достаточно широкая, поэтому поехали дальше!

Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

Практический html: улучшаем семантику ссылок

Всем привет!
В этом уроке я расскажу о способах подключения CSS файла к HTML. Существует 3 способа подключения CSS файла. Спросите, зачем вам знать именно 3 способа? Отвечу, что нужно, потому что бывают случаи, когда необходимо использовать как раз все эти 3 способа подключения.

○ Способ №1 – «Таблица связанных стилей»

Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.
Схематично это выглядит так:

Чтобы связать HTML документ с CSS файлом, добавьте между тегами <head> специальный тег <link>.* Закрывающий тег не нужен

<link rel="stylesheet" type="text/css" href="style.css">

href – прописываем путь к css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в одной директории.
Разберём способ №1 поэтапно и практично от «а» до «я»:

1 этап — создать файл «style.css»

Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css»

Далее нажмите на кнопку «Сохранить»:

Вот такая должна получиться общая картина:

Вот и все, файл «style.css» был создан.
Можете вставить в файл «style.css» вот это правило для тега <h1> и сохранить:

H1
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}

В HTML файле вставьте вот этот код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

В результате должно получиться вот такое:

Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css». Припустим, меняем цвет и размер для заголовка в «style.css», то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!!

○ Способ №2 – «Таблицы глобальных стилей»

Этот способ тоже применяется и я уверен, что вы с ним столкнетесь.
Для подключения такого способа CSS стилей достаточно прописать между тегами <head></head> тег <STYLE>.* Закрывающий тег обязателен

<style type="text/css"></style>

Можно и так:

<style></style>

Между тегами <style></style> прописываются необходимые CSS правила для веб-страницы.
Минус такого способа в том, что эти стили будут только для одной страницы, где размещены эти стили.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2>Заголовок H2</H2>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя таблицу стилей CSS.

○ Способ №3 – «Внутренние стили»

Способ №3 я использую в редких случаях, например, для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style.

style="тут будут CSS правила"

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример подключения таблицы CSS</title>
</head>
<body>
<H2 style="font-size: 150px; color: #cc0000">Заголовок H2</H2>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя стили CSS.

○ Комбинированный метод подключения стилей

Все эти три способа можно комбинировать.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Пример подключения таблицы CSS</title>
<style>
H2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2 style="font-size: 50px; color: green;">Заголовок</H2>
<H2>Заголовок</H2>
</body>
</html>

На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!

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

Таблица цветов html

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

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

Примечание. Встроенный стиль необходимо использовать как-можно реже, в крайних случаях, когда нужно выделить отдельный фрагмент текста (словосочетание) только на одной HTML странице. Встроенный стиль перегружает HTML-код и увеличивает общий объем веб-страницы.

Пример

Встроенные стили определяются в атрибуте «style» соответствующего элемента:

<!DOCTYPE html><html><body><h1 style=»color:blue;text-align:center;»>Это заголовок</h1><p style=»color:red;»>Это параграф.</p>
</body></html>

Примечание: Встроенный стиль теряет многие из преимуществ таблицы стилей (путем смешивания контента с его визуальным представлением). Используйте этот метод умеренно.

Вариант 3 — Внутренний CSS

Внутренний CSS используется для конкретного тега HTML. Атрибут <style> используется для настройки этого тега. Этот вариант подключения CSS не является рекомендованным, так как в этом случае необходимо настраивать каждый тег HTML по отдельности. К тому же управление вашим сайтом может стать довольно трудным, если вы будете использовать только внутренний CSS. Однако в некоторых случаях этот способ может быть весьма полезным. К примеру, в случае если у вас нет доступа к CSS файлам, или вам необходимо применить правила только для одного элемента. Пример HTML страницы с внутренним CSS должен выглядеть так:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Руководство Hostinger</h1>
<p style="color:white;">Здесь что-нибудь полезное.</p>

</body>
</html>

Преимущества внутреннего CSS

Полезен для проверки и предпросмотра изменений.
Полезен для быстрых исправлений.
Меньше HTTP запросов.

Недостатки внутреннего CSS:

Внутренние CSS должны быть применены для каждого элемента в отдельности.

Важность знания CSS при работе с сайтом

Про базовые понятия я уже немного писал в рубрике HTML для начинающих, затронув там вопросы создания основных элементов веб страниц:

и тут
Как создавать гиперссылки — здесь
Таблицы различной сложности и вложенности — тут
Html формы — здесь
Фреймы на основе Iframe и Frame — тут
Вставка видео и другого медиаконтенкта с помощью Embed и object — здесь
Doctype, Html комментарии — тут
Как задаются цвета в Html и CSS коде — здесь
Форматирование текста в HTML, Html шрифты, Strong, Em, B, I — тут
Пробелы и спецсимволы (мнемоники) в Html коде — здесь

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

Дело в том, что сейчас чистый Html выполняет лишь роль поставщика содержимого веб страницы и позволяет в том или ином виде организовать ее структурное оформление (упомянутые выше списки, таблицы, формы, изображения, ссылки и т.п.).

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

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

Даже малейшее изменение внешнего вида (добавление иконки RSS ленты, счетчиков посещений и т.п.) потребует внесения изменений в CSS код.

Я постараюсь рассказывать о работе с ним не в академической манере, упоминая о всех возможностях таблиц каскадных стилей (именно так в переводе расшифровывается аббревиатура CSS), а в сугубо практической манере изложения, упоминая в основном только те аспекты, которые в первую очередь могут вам понадобиться при работе над дизайном своего проекта.

Итак, давайте приступим. У этого языка стилевой разметки есть свой синтаксис написания свойств и правил. Но он будет отличен от Html, хотя ничего сложного из себя не представляет. Наверное, первое отличие, которое следует отметить — это не критичность CSS кода к пробелам.

Его свойства можно писать вообще даже без пробелов и в одну строку (благодаря этому специальными программами для увеличения скорости загрузки вашего сайта).

Правда такой способ представления (в одну строчку) сильно снижает его читаемость, и оптимизировать его следует, наверное, уже после окончательного завершения работы над дизайном своего проекта.

По аналогии с Html, где имеется набор тегов с различными атрибутами, в CSS имеется ряд свойств, способных принимать различные значения, с помощью которых и осуществляются манипуляции с дизайном.

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

Для оформления шрифтов: Font (Weight, Family, Size, Style) и Line Height — тут
Для оформления текста в Html: text-decoration, vertical-align, text-align, text-indent — здесь
Для задания цвета фона или фоновой картинки: Background (color, position, image, repeat, attachment) — тут
Для настройки внешнего вида списков: List style ( type, image, position) — здесь
Для задания отступов, рамок и границ: Padding, margin и border — тут
Задаем тип отображения Html элементов на вебстранице: Display (block, none, inline) — здесь
Для описания области контента при блочной верстке: Height, width и overflow — тут
Инструменты блочной верстки: Float и clear — здесь
Способы позиционирования Html элементов: (правила left, right, top и bottom) для Position (absolute, relative и fixed) — тут
Z-index и CSS правило Cursor — здесь

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

Разбор файла style.css

body обращается к <body> в index.html, и задает ему серый задний фон (background-color: gray;). Здесь background-color называется CSS-свойством, а gray — это значение CSS-свойства.

Аналогично #header обращается к id=»header», а .h1 обращается к class=»h1″. То есть через # обращаемся к id, а через точку обращаемся к class.

Здесь body, #header и .h1 называются CSS-селекторами.

Вообще, в id и class можно задавать любые произвольные значения, хоть id=»abcdefg». Но желательно, чтобы их значения отображали целевое назначение html-элемента (тега).

Свойства CSS пишутся на английском: font-size — размер шрифта, color — цвет, text-align — выровнять текст и т.д.

Блок . Способы подключения CSS к HTML коду

Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS
применился к нашему HTML коду. Это можно сделать тремя способами.

Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным
образом подключен к нашей HTML странице.

Еще два способа заключаются в том,
что CSS код будет написан прямо на HTML странице.

Первый способ используется гораздо чаще (в подавляющем большинстве случаев).
Одновременно можно применять все три способа.

Давайте разберемся с этими способами более подробно.

Способ 1. Отдельный CSS файл

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

Чтобы подключить CSS файл к HTML странице,
в теге head следует написать такую конструкцию: <link rel=»stylesheet» href=»путь к CSS файлу»>.

Сам CSS файл должен быть с расширением .css.
Обычно его называют styles.css или style.css.

В следующем примере к нашему HTML файлу подключается CSS файл style.css:

Можно подключать не один файл, а несколько. Давайте подключим
файлы style1.css, style2.css и style3.css:

Способ 2. CSS внутри тега style

Второй способ заключается в том, что CSS код можно написать в теге <style>
Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.

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

Правило такое: если что-то можно сделать первым способом,
то использовать второй способ — дурной тон.

Способ 3. CSS внутри атрибута style

Третий способ заключается в том, что можно добавить атрибут style любому
тегу на странице и прямо там написать для него HTML код

Обратите внимание на то,
что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу,
для которого он написан:. Третий способ, так же, как и второй, не сильно рекомендуется к использованию,
потому что он захламляет HTML код

В настоящее время общепринято то,
что языки нужно разделять по отдельным файлам — в одном
файле мы пишем на языке HTML, а в другом — на CSS.

Третий способ, так же, как и второй, не сильно рекомендуется к использованию,
потому что он захламляет HTML код. В настоящее время общепринято то,
что языки нужно разделять по отдельным файлам — в одном
файле мы пишем на языке HTML, а в другом — на CSS.

Впрочем, иногда без второго и третьего способа не обойтись.

Создание стилей CSS. Синтаксис каскадных таблиц стилей — правила, свойства, селекторы.

Далее рассмотрим синтаксис написания правил CSS. Обычный формат определения CSS правила выглядит так:

Т.е. правило стиля включает в себя селектор стиля и список свойств стиля с их значениями в фигурных скобках(«{» и «}»):

селектор используется для привязки к элементам web-страницы, на которые он должен распространять свое действие;
пары «Свойство: Значение» разделяются символом точкой с запитой(«;») и их может быть сколь угодно много;
между последней парой «Свойство: Значение» и закрывающей фигурной скобкой символ точка с запитой можно не ставить;
свойство стиля представляет из себя один из параметров элемента html страницы: цвет текста, гарнитура шрифта, величина отступов;
пробелы и переводы строк при написании правил css не критичны, браузер их игнорирует, поэтому можно оформлять код так как вам захочется;
так же код не чувствителен к регистру символов.

Чтобы было понятней рассмотрим несколько примеров.

Разберем данное CSS правило:

body — это селектор, который представляет из себя имя тега body;
background — свойство стиля, с помощью которого задаются параметры фона;
#0000FF — значение свойства стиля background, которой представляет из себя код цвета в формате RGB.

В итоге данный стиль применится к элементу body web страницы и окрасит фон страницы в заданный цвет. Рассмотренный стиль называется стилем переопределения тега, потому что в качестве селектора указано имя тега без символов .

Рассмотрим еще пример:

Этот стиль говорит о том, что браузер выведет любой текст помещенный в теги h1 зеленым цветом и задаст ему размер шрифта 24 пикселя.

В качестве селектора тега, кроме имени тега, можно указывать класс:

.yellowtext {color:yellow}

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

В примере мы привязали к тегу «Р» css правило с помощью имени класса yellowtext. В результате текст в данном абзаце будет отображен оранжевым цветом.

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

В этом примере к тегу «Р» мы привязали сразу два класса: yellowtext и cursivtext. В результате содержимое тега отобразится желтым цветом и курсивным шрифтом.

Кроме классов в качестве селектора правила css можно использовать идентификатор, который определяет уникальное имя элемента. Здесь все также как и в случае со стилевыми классами, только есть несколько отличий:

в селекторе правила CSS, также задается имя идентификатора, только вместо точки перед его именем ставят символ решетки «#»;
привязка к html элементу осуществляется через атрибут id, в качестве значения которого устанавливают имя стиля без знака решетки;
значение атрибута id должно быть уникальным в пределах страницы, то есть в html коде может только один элемент с заданным значение атрибута id, иначе код будет не валидным.

Рассмотрим пример для ясности:

К элементу p (абзац) с помощью атрибута id привязывается правило css, которое выравнивает текст по центру страницы. На странице больше не допускается создавать элементы с таким значением атрибута id, иначе html код будет не валидным.

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

h1.redtext, p strong {color: red}

В примере через запятую указано два селектора: «h1.redtext» и «p strong». Первый селектор говорит о том, что во всех элементах h1 у которых значение атрибута class буде эквивалентно redtext, текст будет отображаться красным цветом. Во втором селекторе произойдет тоже самое для всех элементов strong, которые вложены в тег p:

Подключение CSS к html через import

Еще один вариант — это подключение css к html при помощи директивы @import. Прописывается он в теге style.

<style>
@import url("/theme/style.css"); 
</style>

Можно указывать как абсолютный, так и относительный путь к файлу. Вот как выглядит на странице:

<!DOCTYPE HTML>
<html>  
   <head>  
      <meta charset="utf-8">  
      <title>Название страницы</title> 
      <style> 
          @import url("/theme/style.css");  <!-- импорт файла стилей --> 
      </style>
   </head>  

   <body>  
      <h1>Привет, мир!</h1>  
   </body> 
</html>

Комбинация импорта и внутренних стилей

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

<style> 
    @import url("/theme/style.css") 
    H1 { 
     font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;  
     color: #333366; 
    } 
</style>

На странице это выглядит так:

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8">
      <title>Импорт</title>

      <style> 
          @import url("/theme/style.css")
          H1 { 
           font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;  
           color: #333366; 
          } 
      </style>

  </head> 
  <body>
     <h1>Привет, мир!</h1>
  </body>
</html>

Подключение CSS в CSS

Можно использовать подключение CSS файла к другому CSS. Для этого тоже можно использовать @import.

Синтаксис:

@import "путь к файлу";

Вот пример подключения нескольких файлов стилей в одном css:

@import url "/style/pervi.css";  
@import url "/style/vtoroi.css"; 
H1 {  
 font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;   
 color: #333366; 
}

Inline CSS

Inline CSS — это встроенные стили, которые встраиваются только в определенный тег html. Например, к какому-нибудь абзацу. Работает через атрибут style.

Обратите внимание на этот текст. В примере видно, что с помощью атрибута style мы задали жирное начертание и красный цвет текста в абзаце (теге p)

В примере видно, что с помощью атрибута style мы задали жирное начертание и красный цвет текста в абзаце (теге p).

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

Данный метод используется не так часто. Ведь он указывает стилизацию только для одного конкретного тега. Поэтому все элементы страницы таким способом стилизовать не очень удобно.

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

Скажу, что если инлайн стили вы будете использовать как в качестве дополнительной стилизации, то ничего плохого не будет.

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

Добавление стилей к элементам HTML

Информация о стиле может быть прикреплена как отдельный документ или встроена в документ HTML. Давайте рассмотрим три способа добавления стилей в HTML-документ (от самого высокого до самого низкого приоритета).

Стили в тэге (инлайн стили) — использование атрибута style в начальном тэге HTML.
Встроенные стили — использование элемента <style> в разделе заголовка документа.
Внешняя таблица стилей — с помощью элемента <link>, указывающего на внешние CSS-файлы.

В этом уроке мы рассмотрим все три способа добавления стилей в HTML документ.

Встроенные в элемент стили (инлайн)

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

блок 1

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара свойство: значение разделяется точкой с запятой (;), так же, как вы пишете во встроенную или внешнюю таблицу стилей. Но все должно быть в одной строке, то есть после точки с запятой не должно быть переноса строки.

В следующем примере показано, как изменить цвет и размер шрифта текста:

<p style="color:green; font-size:18px;">This is a paragraph.</p>

Использование «инлайн» стилей обычно считается плохой практикой. Поскольку правила стиля встроены непосредственно в тэг html, это приводит к тому, что презентация смешивается с содержанием документа; что сводит на нет цель использования CSS. Проще говоря, для того, чтобы изменить цвет текста, вам нужно будет редактировать HTML файл. А если таких параграфов много, и они находятся на разных страницах — такая простая операция как замена цвета, займет огромное количество времени.

Встроенные таблицы стилей

Встроенные или внутренние таблицы стилей влияют только на документ, в который они встроены.

Встроенные таблицы стилей определены в разделе <head> документа HTML с помощью тега <style>. Вы можете определить любое количество элементов <style> в разделе <head> документа HTML. Смотрите пример ниже:

<head>
  <style type="text/css">
    body {background-color: YellowGreen;}
    p {color: Black;}
  </style>
</head>

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

Внешние таблицы стилей

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

Вы можете прикрепить внешние таблицы стилей двумя способами — связать документ и импортировать его:

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

Внешняя таблица стилей может быть связана с документом HTML с помощью тега <link>. Тег <link> находится внутри раздела <head>:

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

Импорт внешних таблиц стилей

Правило @import — это еще один способ добавления внешней таблицы стилей. Оператор @import указывает браузеру загрузить внешнюю таблицу стилей и использовать ее стили.

Вы можете использовать его двумя способами. Самое простое в заголовке вашего документа

Обратите внимание, что другие правила CSS все еще могут быть включены в элемент

<style type="text/css">
  @import url("css/style.css");
  p {
    color: blue;
    font-size: 16px;
  }
</style>

Точно так же вы можете использовать правило @import для импорта таблицы стилей в другую таблицу стилей (т.е. использовать @import внутри css файла).

@import url("css/base.css");
@import url("css/color.css");
body {
  color: blue;
  font-size: 14px;
}

блок 3

Вариант 1 — Глобальный CSS

Глобальный CSS помещается в контейнер <head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы — вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами <style></style>. Вот пример глобальной таблицы стилей:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Преимущества глобальных CSS

Таблица стилей влияет только на одну страницу.
В глобальной CSS могут быть использованы классы и идентификаторы (ID).
Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

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

Как произвести подключение CSS к HTML странице

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

<style type="text/css">

Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:

body {
     background-color: blue;
 }
 h1 {
     color: red;
     padding: 60px;
 }

Как только вы закончите добавление CSS правил, добавьте закрывающий тег:

</style>

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h1>Руководство Hostinger</h1>
<p>Это наш текст.</p>

</body>
</html>

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

селектор (в нашем примере: “body”), которые
говорит о том, к какой части документа применить правило;
свойство (в нашем примере свойствами являются
‘color’ и ‘background-color’), которое указывает что именно мы
устанавливаем у данного элемента, выбранного селектором;
и значение (‘purple’ и ‘#d8da3d’), которое
устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы
установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

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