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

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

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

Пример 1. Подключение таблицы связанных стилей

Hello, world!

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

Достоинства данного способа

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

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

Hello, world!

В данном примере показано изменение стиля заголовка

. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

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

Пример 3. Использование внутренних стилей

Hello, world!

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

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

Пример 4. Сочетание разных методов подключения стилей

Hello, world!

Hello, world!

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

Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое CSS-стили и насколько огромное значение они имеют в WEB-программировании.

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

Не будем откладывать дело в долгий ящик и приступим!

Подключение отдельного CSS-файла!

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

После чего в HTML-файле между тегами разместить следующий код:

Теперь давайте разберем, что все это значит:

Link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение.css href="style.css" # это ссылка на файл с CSS-стилями.

Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

Прописываем стили непосредственно в HTML-файле (первый способ)

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

Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

Размещение каскадных таблиц стилей внутри HTML (второй способ)

Еще одним способом подключения CSS-стилей является размещение каскадных таблиц внутри самого файла HTML. На мой взгляд, данный способ не является самым удобным, т. к. используя его, анализ кода сайта становится не очень удобным. Для того чтобы начать прописывать CSS-стили, Вам достаточно вставить в HTML-файл теги . На практике это выглядит следующим образом:

Тут пример: отображение CSS-стилей в документе HTML

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

Подключение нескольких CSS-файлов к одному HTML-документу.

Правила HTML допускают подключение сразу нескольких файлов CSS. Многие вебмастера используют это: создают отдельные CSS-файлы для текста и для картинок. Или отдельные файлы для хедера, футтера и основного тела страницы. Давайте разберемся, как это реализовать.

Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

Тут пример: отображение CSS-стилей в документе HTML

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

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

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

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

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

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

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

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

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

Вариант 1:

Вариант 2 :

Вариант 3:

Вариант 4:

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

> Основные css стили для создания сайта Как правило стили отображения контейнеров, и их содержимого прописываются в таблице стилей, которая обычно называется stile.css, хотя можно назвать как угодно. Главное чтобы на странице в теге был правильный путь до таблицы стилей

Чтобы задать стиль для контейнера на странице ему можно задать класс. Например контейнеру

можно присвоить стиль с названием chapka_saita, тогда на странице контейнеру прописывается класс

содержимое

. В таблице стилей указываются стили для chapka_saita. Название в таблице stile.css начинается с точки.

Chapka_saita { в фигурных скобках указываем стили }

Так же стиль для контейнера можно указать напрямую если ему не присвоен класс. Например стиль для контейнера

содержимое

начинается с названия контейнера

Header { в фигурных скобках указываем стили }

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

содержимое

, в таблице стилей идентификатор начинается с символа решетки

#blok1 { в фигурных скобках указываем стили }

Если нужно указать стили заголовков в контейнерах, ссылок, изображений, то это выглядит так.

Chapka_saita { в фигурных скобках основной стиль контейнера }
.chapka_saita h1, h2 { стиль для заголовков в тегах

и

для этого контейнера }
.chapka_saita a { стиль для ссылок в этого в этом контейнере }
.chapka_saita a:hover { стили для ссылок при наведении курсора мыши }
.chapka_saita img { стили для изображений в этом контейнере }
Сами стили прописываются в этих фигурных скобках и разделяются точкой с запятой;

Font-family: Arial; задает шрифт контейнера, обычно его применяют в теге , в котором все содержимое страницы

Line-height: 1.2; задает высоту строк для шрифта

Отступы

padding: 10px; задает внутренний отступ содержимого от границы контейнера, в данном случае отступ 10 пикселей, можно указывать значение в процентах, или в em
margin: 5px; задает внешние отступы контейнера,
margin: 10px 5px 0px 15px; отступы можно указывать и по отдельности для каждой стороны
margin-bottom: 10px; можно указывать отступ только с одной стороны, в данном случае отступ от низа 10пикселей. Тоже самое можно применять и внутренним отступам padding.

Ниже пример стилей для тега

Body { margin-left: auto; margin-right: auto; width: 930px; font-size: 12px; font-family: Arial; line-height: 1.2; background-image: url(images/fon.jpg); }

Стили для текста

font-size: 12px; указывает размер шрифта, можно указывать в пикселях, процентах, или em
color: #0000ff; указывает цвет шрифта, в даном случае #0000ff синий, можно указать словом, например color: green; тоесть цвет зеленый.
text-decoration: none; убирает подчеркивание, применяется для ссылок чтобы убрать нижнее подчеркивание
text-transform:uppercase; делает все буквы текста заглавными, вместо uppercase можно писать другие значения и наоборот сделать верхнее или нижнее подчеркивание, зачеркивание.
font-weight:bold; выделает шрифт полужирным, вместо bold можно применять и другие значения
text-align:left; задает выравнивание текста, в данном случае left, к левой части контейнера, можно задавать значение conter, hight.
text-shadow: 1px 2px 1px 0px #000000; color: #f9f5ed; тень для текста

Стили контейнеров

background-color: #DCDCDC; назначает цвет фона контейнера, в данном случае #DCDCDC серый
background-image: url(images/fon.jpg); задает фоновое изображение

Border: 1px solid #E8E8E8; назначет бордюр, фраза solid означает сплошной бордюр, #E8E8E8 цвет бордюра. Можно указывать отдельно бордюр для каждой стороны, например border-top: 2px solid #E8E8E8;
border-radius: 10px; скругление углов контейнера, можно задавать разное скругление на каждом угле border-radius: 2px 6px 10px 0px;
box-shadow: #2C2C29 10px 10px 10px; тень для контейнеров

Width:926px; указывает ширину контейнера
height: 240px; высота контейнера

Float:left; прижимает контейнер к левой части, по умолчанию контейнеры идут по порялку, а если хочется выстроить несколько блоков в линию, то им нужно задать свойство float:left; и ширину height: px; чтобы они поместились по ширине в родительском контейнере.
float:right; тоже самое, но контейнеры прижимаются к правой части.
Если хотите сделать контейнер посередине, то указывайте ширину, а отступы avto , пример: margin-left: auto; margin-right: auto; width: 150px;

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++ , он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets , он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets , то он подходит и для пользователей Microsoft Windows , вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

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

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск - Выполнить) при этом откроется диалог «Выполнить» впишите и нажмите Enter (откроется программа ), либо запустите программу через её ярлык.

Перед Вами откроется основное окно программы:

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

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

Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color : red ), а для абзацев голубой (color : blue ). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align : center ). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

Как хорошо, что я занимаюсь саморазвитием.

Я выучу CSS за месяц, а то и быстрее

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Подключение внешней таблицы стилей

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

1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css ) в той же папке, где вы создавали HTML документ.
2. Перенесите из предыдущего примера код CSS (содержимое тега
   
   

   This is a heading

   
   

   This is a paragraph.

   
   

   Внешние CSS

   Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

   С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

   Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе страницы HTML:

   Пример

   
   
   
   
   
   

   This is a heading

   
   

   This is a paragraph.

   
   

   Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

   Вот как выглядит "styles.css":

   body {
   background-color: powderblue;
   }
   h1 {
   color: blue;
   }
   p {
   color: red;
   }

   Шрифты CSS

   Свойство CSS color определяет используемый цвет текста.

   Свойство CSS font-family определяет используемый шрифт.

   Свойство CSS font-size определяет размер текста, который будет использоваться.

   Пример

   
   
   
   
   
   

   This is a heading

   
   

   This is a paragraph.

   
   

   Граница CSS

   Свойство CSS border определяет границу вокруг элемента HTML:

   Пример

   p {
   }
   

   CSS заполнение

   Свойство CSS padding определяет отступ (пробел) между текстом и границей:

   Пример

   p {
   border: 1px solid powderblue;
   padding: 30px;
   }