Определение CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) формальный язык описания внешнего вида html-документа.

Создание css-документа

Стили для элементов веб-страницы можно прописывать как в самом html-документе, так и в отдельном файле. Чаще всего и удобнее всего использовать внешний файл, который при помощи специального тега подключается к html-документу. Такие файлы имеют расширение *.css. Давайте рассмотрим пример создания и подключения файла со стилями к html-документу.

Создайте на рабочем столе текстовый документ с именем style и расширением *.css:

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 вам уже знаком, при помощи этого атрибута мы указываем путь к файлу.

css-документ

Сохраните изменение, и откройте файл index.html в браузере. Если вы все сделали правильно, то заметите, что у веб-страницы изменился цвет фона и шрифт:

css-документ


Видео к уроку

Комментарии