Поговорим о внешнем виде нашего сайта. О том, что делает обычный текст -конфеткой. Настало время познакомиться каскадными таблицами стилей(CSS). Что такое CSS и с чем его едят. Цели создания CSS. Рассмотрим такие виды CSS, как внешние и внутренние.
Итак, давайте по-порядку. Если просто написать разметку сайта, то получится крайне криво. Да, можно попробовать расположить контент с помощью фреймов и\ или таблиц, но это даёт слишком мало возможностей, да и не подходит для большинства случаев. Например, нельзя использовать для различных разрешений экранов, ибо не «растянется».
Красивое наполнение сайта помогут обеспечить нам CSS, они имеют огромное количество функций и «примочек». От обычного форматирования текста до теней от блоков или даже картинок.
CSS — это каскадные таблицы стилей. Почему каскадные? Каскад — это иерархия применения — недвусмысленное название для системы применения правил.
Для подключения CSS к документу HTML есть три способа:
1) Стили внутри элемента
Это когда стиль отображения указывается внутри элемента. Например:
<h1 style="color: green;">Заголовок</h1>
Такие стили используются в крайнем случае. Так как HTML документ должен быть свободен от лишнего кода, то такие стили следует избегать.
2) Стили внутри документа
Стиль указывается внутри HTML-документа и выглядит следующим образом:
<HTML> <HEAD> <TITLE> CSS внутри документа </TITLE> <style type="text/css"> p { color:green; } a { color:blue; } </style> ...
Помня о том, что HTML- документ не нужно нагружать лишним кодом, то такой тип CSS также стоит избегать.
3) Внешние стили
Это самый современный и самый лучший вариант для подключения CSS к HTML -документу. HTML-файл остаётся чистый от мусора и не вызывает проблем при дальнейшей его модернизации. Сам CSS-файл , а точнее его содержимое будет выглядеть следующим образом:
p { color:green; } a { color:blue; }
Этот код следует занести в название_вашего_файла.css. Но что же такое? Почему даже создав файл .CSS и поместив его в папку с HTML-документам ничего не преобразилось? Дело в том,что нужно «подключить» файл.css к нашему сайту. Следующий код прописывается в <HEAD>
:
<link rel="stylesheet" type = "text/css" href="ссылка на ваш CSS документ"/>
Есть и другие способы подключения CSS документов, но пока этого примера вполне себе достаточно.
Итак, мы познакомились c CSS файлами, узнали почему не рекомендуется использовать стили внутри документа HTML и научились подключать внешние CSS . Всем отличного настроения и чистого коддинга