Внешний css файл. Способы подключения CSS в HTML

Добрый денёк! В данной статье я покажу различные методы для подключения CSS в HTML. А так же поясню разные тонкости и нюансы разных способов подключения стилей.

Внутреннее подключение

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

Желтый текст со шрифтом Verdana

(не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Взгляните на пример, ниже к нему будут комментарии.

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

,

- будут синими а параграфы

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

Теперь обещанные комментарии:

Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

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

CSS в отдельном внешнем файле.

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

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

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

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

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

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

• shortcut icon - Определяет, что подключаемый файл является .
• stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
• application/rss+xml - Файл в формате XML для описания ленты новостей.

type - MIME тип данных подключаемого файла.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

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

Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html

Меню:

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Меню:

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Меню:

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

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

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

  Заголовок

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

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

  и стили добавятся к нему автоматически.

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

  Способ подключения CSS - №3

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

  Пример подключение таблицы CSS:

  Заголовок

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

  Способ подключения CSS - №4

  В этом способе используется сразу несколько стилей, которые мы использовали выше (способ №1 - №3).

  Пример подключение таблицы CSS:

  Заголовок

  Заголовок

  В итоге по примеру у нас получится первый заголовок красного цвета с размером 50 пикселей, а следующий - зеленым цветом и с размером 90 пикселей.

  Повторюсь, что все описанные методы использования CSS могут применяться самостоятельно, а могут совмещаться друг с другом. Это можно увидеть в способе№4.

  Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое 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?