HTML — Урок 3: Как подключить CSS стили оформления в шаблоне?

Как подключить CSS стили оформления в шаблоне

Итак, мы продолжаем уроки html для начинающих. В прошлом уроке я рассказал о том, что такое DOCTYPE, тег HEAD и о том, как установить кодировку HTML страницы, а также указать ключевые слова и описание к ней. Что же мы узнаем сегодня? В этом уроке мы узнаем о том, как подключить стили в шаблоне. Подробнее далее.

Как подключить стили оформления в шаблоне? Для начала узнаем о том, что такое CSS стили. Стили оформления CSS — это средство оформления WEB – страниц, написанных с помощью языков разметки HTML, XHTML и XML. Их можно указать, как и в самом документе HTML , так и подключить извне, т.е. описать в отдельном файле. Я предлагаю рассмотреть, как первый, так и второй способы. Практически все web страницы и web сайты используют CSS стили оформления.

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

. 

Подключенные таким способом стили действуют по всему документу, но что делать, если нужно указать их только для одного блока? Описать стили внутри определённого блока (тега) можно с помощью атрибута данного тега – style. Пример подключения стилей для одного тега:

Случайный текст 15 размера и красного цвета

Стили, описанные таким способом, не влияют на другие теги документа.

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

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

Путь к файлу, содержащему стили, указывается в этой части тега: href=»style.css» в кавычках. В примере подключен файл стилей, который ежит в одной папке с HTML документом.

Также можно подключить внешние стили и другим способом – специальной директивой @import, которая заключена внутри тега . Пример подключение с помощью директивы @import:

. 

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

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

Если CSS стили нужно подключить для XML-документа, то нужно воспользоваться следующей строкой:

В данном способе подключения путь к файлу со стилями указан в кавычках.

На сегодня урок окончен! Удачной верстки и новых знаний!

Хотите поехать в Европу? Вам нужен загранпаспорт!

CSS: что это такое и как подключить стили к HTML документу?

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

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

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

Файл, в котором описывается дизайн страницы, и оформление элементов обычно называют style.css.

В блокноте создайте файл style.css.

Давайте опишем дизайн первого элемента – body:

body

Сохраните этот файл в папке, где вы храните файлы сайта.

С помощью этой записи мы зададим белый шрифт на сером фоне. Если вы помните, в языке html эта запись выглядела так:

Если мы будем создавать новые страницы нашего сайта, то каждый раз нам нужно будет прописывать тег body. А можно один раз описать элемент body в файле style.css , прикрепить этот файл к каждой странице, и элемент body будет все время отображаться так, как мы его описали в файле style.css.

Для того чтобы прикрепить файл style.css нам нужно после тега вставить следующую запись:

Давайте в каждом файле, который мы создали, вставим эту запись, а также изменим тег body:

Как видите, во всех файлах фон стал серым, а текст белым. Теперь, если мы хотим поменять цвет фона, то нам нужно изменить только описание селектора body, и во всех файлах автоматически поменяется цвет фона.

Давайте теперь разберем, как задавать оформление элементов. В общем виде команды css выглядят так:

Селектор — это название элемента разметки, атрибут- название параметра, который мы хотим описать.

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

Давайте создадим страницу style.css. Для этого зайдите в меню File – нажмите New. У вас откроется такое окно:

Зайдите на вкладку General, в категорию Basic Page, выберите CSS, нажмите Create (на рисунке обведено овалами).

Вы создадите страницу с расширением css. Сохраните ее под названием style.css.

По умолчанию первая строка выглядит так:

/*___*/ — между этими знаками можно вводить комментарии, браузерами они не интерпретируются.

body

Сохраните страницу. Теперь в каждую страницу, которую мы создавали, в тег введите ссылку на страницу css:

А тег body измените так:

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

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

4. CSS – Подключение встроенных и внешних стилей, правила приоритета, комментарии

Существует четыре способа подключения стилей к вашему HTML-документу. Наиболее часто используемые методы – это встроенные CSS и внешние CSS.

Встроенный CSS в HTML – элемент

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

Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:

    body < background-color: LightGreen; >h1 
Заголовок
 
Абзац.
   

Получим следующий результат:

Атрибуты

Атрибут	Значение	Описание
type	text/css	Указывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут.
media	screen tty tv projection handheld print braille aural all	Указывает устройство, на котором будет отображаться документ. Значение по умолчанию – all. Необязательный атрибут.

Встроенный CSS – атрибут стиля

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

Атрибуты

Атрибут	Значение	Описание
style	Правила стиля	Значение атрибута style представляет собой комбинацию объявлений стиля, разделенных точкой с запятой (;).

Пример

Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:

   
Встроенный CSS
   

Получим следующий результат:

Внешний CSS стили – элемент

Элемент может использоваться для подключения внешних CSS файлов в ваш HTML-документ.

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

Вот общий синтаксис подключения внешнего файла CSS:

Атрибуты

Атрибуты ассоциируются с элементами :

Атрибут	Значение	Описание
type	text/css	Указывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут.
href	URL	Указывает файл таблицы стилей с правилами стиля. Обязательный атрибут.
media	screen tty tv projection handheld print braille aural all	Указывает устройство, на котором будет отображаться документ. Значение по умолчанию – all. Необязательный атрибут.

Пример

Рассмотрим простой файл таблицы стилей с именем style.css, имеющий следующие правила:

h1, h2, h3

Теперь Вы можете подключить CSS-файл style.css в любой HTML-документ следующим образом:

Импорт CSS – правило @import

@import – используется для импорта внешней таблицы стилей способом, аналогичным элементу . Ниже приведен общий синтаксис правила @import в CSS:

 @import "URL"; 

Где URL – это url-адрес файла таблицы стилей с правилами стиля. Вы также можете использовать другой синтаксис:

 @import url("URL"); 

Пример

Ниже приведен пример, показывающий Вам, как сделать импорт CSS-файла в HTML-документ:

 @import "style.css"; 

CSS правила приоритета стиля

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

• Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, она переопределит любое правило, определенное в тегах
  

  или правилах, определенных в любом внешнем файле таблицы стилей.

• Любое правило, определенное в тегах
  

  , переопределяет правила, определенные в любом внешнем CSS-файле.

• Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.

Обработка старыми браузерами

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

Комментарии в CSS

Вам может потребоваться добавить дополнительные комментарии в свои блоки страниц стилей. Таким образом, оформление комментариев в CSS происходит очень легко. Вы можете просто оставить свои комментарии внутри /*. это комментарий в CSS-файле. */.

Также Вы можете использовать /*. */ как для однострочных комментариев в CSS, так и для комментирования многострочных блоков аналогично тому, как это делается на языках программирования C и C++.

Пример

      
Привет ProgLang!
   

Получим следующий результат:

Оглавление

• 1. CSS – Самоучитель для начинающих
• 2. CSS – Введение
• 3. CSS – Селекторы
• 4. CSS – Подключение
• 5. CSS – Единицы измерения
• 6. CSS – Цвета

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

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

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

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

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

      
Заголовок H2
   

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

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

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

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

     
Заголовок H2
   

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

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

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

       
Заголовок
 
Заголовок
   

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