CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) формальный язык описания внешнего вида html-документа.
Создание css-документа
Стили для элементов веб-страницы можно прописывать как в самом html-документе, так и в отдельном файле. Чаще всего и удобнее всего использовать внешний файл, который при помощи специального тега подключается к html-документу. Такие файлы имеют расширение *.css. Давайте рассмотрим пример создания и подключения файла со стилями к html-документу.
Создайте на рабочем столе текстовый документ с именем style и расширением *.css:
Если у вас не получается изменить расширение, то попробуйте зайти в панель управления (Пуск – Панель управления), затем перейти в раздел Оформление и персонализация, и из этого раздела выбрать пункт Параметры папок. В открывшемся окне выберите вкладку Вид, и в появившемся списке снимите галочку напротив строки Скрывать расширения для зарегистрированных типов файлов.
Откройте файл style.css в текстовом редакторе Notepad++, и запишите в нем следующие строки:
body {
background-color: #f5f5f5;
font-family: Arial;
font-size: 14px;
line-height: 20px;
color: #333;
}
Не забывайте про кодировку, если в нижнем правом углу стоит ANSI, тогда зайдите в меню Кодировки – Преобразовать в UTF-8 без BOM.
Сохраните изменения в файле.
Здесь body является селектором. В качестве селектора могут выступать теги, атрибуты тегов, классы и идентификаторы тегов (все это мы рассмотрим позднее). В нашем примере в качестве селектора выступает тег body.
Между фигурных скобок записываются свойства и их значения. После свойства необходимо ставить двоеточие, а после значений – точку с запятой. У свойства может быть несколько значений, тогда они записываются через пробел: border: 1px solid white; (толщина, стиль и цвет границы).
Давайте рассмотрим что означают свойства в приведенном примере:
- background-color – цвет фона.
- font-family – семейство шрифтов.
- font-size – размер шрифта.
- line-height – интерлиньяж или межстрочный интервал.
- color – цвет текста.
Подключение css-файла к html-шаблону
Перенесите файл style.css в папку HTML, которую мы создали в первой части курса по HTML. Если такой папки у вас нет, то скопируйте ее из папки templates данного учебника на рабочий стол.
Откройте файл index.html в текстовом редакторе Notepad++ из папки HTML. В контейнере <head></head> сразу после кодировки пропишите строку:
<link rel="stylesheet" href="style.css">
Здесь атрибут rel сообщает браузеру о том, как использовать подключаемый документ. Использовать его нужно как каскадные таблицы стилей, поэтому в качестве значения данного атрибута выступает строка stylesheet. Атрибут href вам уже знаком, при помощи этого атрибута мы указываем путь к файлу.
Сохраните изменение, и откройте файл index.html в браузере. Если вы все сделали правильно, то заметите, что у веб-страницы изменился цвет фона и шрифт:
Комментарии