Часть 2. / Урок 9. Таблицы стилей

12.10.2017

В этом уроке мы научимся управлять внешним видом вашего сайта.

ЖЕЛЕЙНЫЙ МЕДВЕДЬ ВАЛЕРА ЛУЧШЕЕ ЧАСТЬ 2

1. Немного теории.

Технология каскадных таблиц стилей позволяет управлять внешним видом вашего сайта. Повторим ее основные идеи:

1) Все объекты интернет-страницы: текст, рисунки, заголовки, ссылки помещены в теги, например тег <p></p> формирует абзац. В языке HTML изначально не было средств показать, как должен выглядеть объекты на экране браузера. Технология CSS призвана решить эту проблему.

2) В css-файле хранится стиль, т. е. набор свойств для выбранных тегов. Строится он следующим образом:

В этом фрагменте для тега <p> определены два свойства цвет и размер, каждому свойству назначено свое значение.

3) CSS-файл – это обычный текстовый документ, который вы создаете/правите в текстовом редакторе, например, Notepad++. Размер букв, порядок свойств, дополнительные пробелы и абзацы значение не имеют. Количество свойств, которыми вы можете управлять огромно, полный список смотрите в справочнике (ссылка в конце урока).

4) Задание стили для тегов, это здорово, но как быть, если ссылка в тексте и ссылка в главном меню задается одним и тем же тегом <a></a>, но выглядеть они должны по-разному. На выручку приходят «классы». Для любого фрагмента текста можно задать свой класс, например, так:

Если несколько различных классов имеют одинаковые стили, то они должны располагаться через запятую, вот так:

.class1,.class2,.class3 {свойство 1: значение; свойство 2: значение}

4) Для подключения файла с таблицами стилей вы должны добавить одну строку в свой html-файл

Рис. 52. Подключение css-файла.

Здесь файл находится в папке css, расположенной рядом с активным html-файлом.