Предыдущий ролик Следующий ролик  

Видео урок: Исследование CSS

Основы веб-дизайна

Каскадные таблицы стилей, или CSS, используются для управления визуальным отображением веб-страниц. В этом видео я собираюсь рассмотреть некоторые основы синтаксиса CSS, а также продемонстрировать своего рода пример того, как работает CSS. Итак, я открыл файл "hello.htm", расположенный в папке 01_02. Хотя, если честно, это тот же самый файл, который мы использовали в предыдущем упражнении. Поэтому если он у вас все еще открыт, и вы хотите работать с ним и дальше, то в этом нет ничего плохого. Давайте вкратце повторим, что происходит в рамках HTML-кода нашего файла. Есть открывающий и закрывающий тег html, символизирующий начало и конец документа.

Имеется элемент head, и не забывайте, что в нем помещаются все те элементы, которые приводят в действие страницу, но при этом остаются невидимыми. На самом деле вы их не видите. В этом примере в элемент head вложен только элемент title. Затем идет элемент body, представляющий собой тело страницы. В него помещается то, что будет отображаться в браузере. В нашем случае в элементе body расположен тег заголовка h1 и тег абзаца. Это все, что есть в этом файле. Если перейти в браузер, то можно увидеть, что вверху располагается заголовок, а под ним - соответствующий текст. Итак, CSS управляет стилизацией. Я собираюсь поместить CSS прямо в HTML-документ.

Это один из способов применения CSS. Чаще всего каскадные таблицы стилей создаются в отдельном CSS-файле, а затем связываются с HTML-файлом. Но ради интереса я хочу показать вам, как это можно сделать в рамках самого HTML-документа. Итак, CSS - это один из тех элементов, которые приводят в действие веб-страницу, но при этом являются невидимыми, поэтому добавлять мы их будем в заголовок документа. Итак, сразу после элемента title я открою тег style, а затем добавлю закрывающий тег. Как видите, это просто HTML-код, и он похож на то, что мы добавляли раньше. Но тег style говорит браузеру следующее: "Итак, внутри этого элемента я буду писать CSS". Поэтому браузер выделяет под этот тег небольшое пространство внутри HTML-документа, в котором можно писать код для стилей. Если бы я хотел привязать внешний документ, то воспользовался бы тегом link для указания этого внешнего ресурса. Поскольку в нашем случае мы делаем все это внутри документа, этот стиль называется "вложенным". Воспользуемся тегом style. Итак, выделю себе немного пространства. Теперь в качестве синтаксиса мы будем использовать CSS.

Нам не нужно помещать элементы внутрь двух тегов style - открывающего и закрывающего, нам не нужно больше писать HTML-код, теперь мы пишем CSS-код. Итак, CSS - это не язык разметки, это язык отображения. Поэтому его синтаксис немного отличается от синтаксиса HTML. Фактически он очень, очень, очень простой. Единственное, что в него входит, - это селектор, в котором указывается элемент страницы, и правила, определяющие, как должен выглядеть этот элемент. Допустим, мы вводим здесь текст "body". Итак, текст "body" - это селектор. Стиль чего же он определяет? Всего того, что находится внутри тега body.

После селектора я открою фигурную скобку, которую можно найти на клавиатуре рядом с клавишей "P". Определять стиль можно и в одной строке, но в нашем случае я перейду на следующую строку и добавлю закрывающую фигурную скобку. Как видите, открывающая скобка обращена влево, а закрывающая - вправо. По сути, все то, что находится внутри этих фигурных скобок, мы называем "блоком объявлений" (declaration block).

Этот код означает: "Итак, примени стиль вот к этому элементу. А вот здесь указано, какой стиль применить". Конечно, мы еще не добавили ни одного свойства. Итак, в этой пустой строке я введу слово "color", двоеточие, в качестве значения укажу слово "red", а затем поставлю точку с запятой. По сути, это свойство и его значение. Они разделены двоеточием. Чтобы после указания значения одного из свойств перейти к следующему свойству, необходимо поставить точку с запятой. Сохраним изменения. Если теперь вернуться в браузер и обновить страницу, то можно увидеть, что весь текст напечатан красным цветом, поскольку все, что находится внутри тега body теперь будет выделяться именно этим цветом.

Конечно, при желании можно использовать больше конкретики. Перейдем на следующую строку и введем слово "h1". Как видите, этот селектор предназначен для HTML-элемента, и вам не нужно заключать его в теги. Вам нужно просто указать, для какого элемента должен использоваться этот стиль. Итак, все очень, очень просто. Я сделаю то же, что делал перед этим: выделю пустое пространство, добавлю открывающую и закрывающую фигурную скобку. Открывающую и закрывающую фигурную скобку я ввожу в самом начале, потому что почти всегда забываю вводить закрывающую фигурную скобку. А сейчас мы немного проявим инициативу.

Мы зададим не только цвет. Введем "font-family", затем двоеточие, затем введем слово "Arial", т.е. я запрашиваю шрифт Arial, запятая, "sans-serif" и точка с запятой. Итак, что же здесь происходит? Я сообщаю браузеру: "Хочу, чтобы для отображения текста ты использовал семейство шрифтов Arial". А два объявления, разделенных запятой, я использую здесь для того, чтобы в случае невозможности применения шрифта Arial браузер использовал шрифт Sans Serif, заданный по умолчанию. После этого я перейду на следующую строку, введу "font-size", двоеточие, и пусть он будет равен 32 пикселям.

Итак, "32px". Обратите внимание, что "px" идет сразу за "32", между ними нет никакого пробела. Далее вводим точку с запятой. После этого давайте изменим цвет нашего заголовка. Пусть в этом случае будет использоваться черный цвет. Существуют и другие способы задания цвета, но если вы собираетесь использовать только базовые цвета, то легче всего просто запомнить ключевые слова. Сохраним изменения. Вернемся в браузер и обновим страницу. Обратите внимание, что теперь стиль заголовка отличается от стиля абзаца. Теперь для заголовка используется черный цвет и шрифт Arial, а его размер составляет 32 пикселя, именно это я и просил сделать.

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