План урока
| Цель: | Знакомство с понятием CSS, изучение новых тегов html |
| Инструменты: | Текстовый редактор с подсветкой синткасиса, браузер. |
| Время / сложность: | 1-2 часа / простой. |
На прошлых 2х уроках мы узнали, что такое html, рассмотрели общие вопросы создания простейшего документа, познакомились с применением html для разметки текста.
Возможно, с теоретической точки зрения, было бы правильно продолжить разбор всех html тегов и лишь потом переходить к вопросу их визуального оформления. Однако наш курс сугубо практический, а для дальнейшей практики, как мы уже почувствовали на прошлом уроке, необходимо научиться управлять внешним видом html документа. Сегодня для этих целей используется формальный язык стилевых правил CSS (Cascading Style Sheets или каскадные таблицы стилей).
CSS. Быстрый старт
Чтобы не утомлять вас чтением сразу пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Пробуем CSS</title>
<style>
h1 {
text-align: center;
}
p.pretty_p {
font: bold 12px/28px 'arial', 'sans-serif';
}
</style>
</head>
<body>
<h1>CSS быстрый старт</h1>
<p>Простой абзац, который не имеет никаких стилей оформления.</p>
<p class="pretty_p">Абзац, оформленный с помощью CSS.</p>
</body>
</html>
В данном отрезке кода CSS правила записаны в специальный тег <style>. Скоро мы поговорим о разных возможностях подключения CSS стилей к странице. Каждое правило начинается с селектора, который определяет к каким элементам html будет применяться следующий блок правил. После селектора в фигурных скобках записывается набор стилей, перечисленных через «;». В данном примере мы указываем для всех заголовков первого уровня выравнивание текста по центру, а для абзацев с классом pretty_p размер, начертание и вид шрифта.
Таким образом, мы видим, что есть CSS правила для управления внешним видом и для позиционирования. Как видите все достаточно просто, однако прежде чем начать делать разные красивости нужно освоить базовые вещи, без которых ваш код превратится в кашу.
Как правильно подключать CSS к файлу
Существует 3 возможности указания CSS стилей:
- Внутри тега, через атрибут style=»стили элемента».
- Через тег style в разделе head (как в примере).
- Через ссылку на текстовый файл, в котором записаны правила. Ссылка устанавливается в раздел head следующим образом:
<link rel="stylesheet" href="%D0%B8%D0%BC%D1%8F%D1%84%D0%B0%D0%BB%D0%B0.css"">.
Наиболее гибким и правильным решением является подключение стилей через внешний файл, т.к. оно позволяет максимально разделить структуру и оформление. Это немаловажный момент, который упрощает поддержку и развитие кода, а также позволяет просто создавать различное оформление одного html документа для различных устройств вывода.
Практикуемся в подключении CSS или почему каскадные
Для того чтобы усвоить следующий важный момент выполните следующее задание самостоятельно, тогда эта полезная информация запомнится гораздо лучше. Я лишь распишу по пунктам что нужно сделать:
- Создаем новый html документ (можно воспользоваться шаблоном первого html документа из урока 1).
- Создаем папку для этого урока и сохраняем туда файл.
- Создаем пустой текстовый файл и сохраняем его, как style.css в папку.
- В html файле создаем 3 заголовка с любым текстом. Заголовки должны быть разных уровней (h1, h2 и h3).
- В секции head подключаем файл style.css и задаем в нем правило для всех заголовков, для этого перечисляем в селекторе теги через запятую (вот так:
h1, h2, h3 {тут будут стили}). - Указываем в файле стилей цвет заголовков красный (
color: red;). - Создаем в секции html документа стиль для заголовков h2 и h3 и указываем цвет синим (blue).
- Для заголовка h3 задаем стиль, как атрибут тега (
<h3 style="color: green;">) - Сохраняем все файлы и открываем html в браузере.
То, что мы видим и называется каскадирование CSS. Это порядок применения (приоритетов) стилей для html элемента, если ему задано более одного стиля. Более подробно мы поговорим об этом в пятом уроке. Относительно данного примера, мы видим, что подключенные через внешний файл стили являются общими стилями, которые могут быть переопределены более локальным заданием.
Немного о новых тегах
В этом уроке мы мимоходом упоребили новые теги style и link, скажем о них пару слов, т.к. они встречаются в 99% html документов.
Тег <style> применяетсяд для указания CSS стилей оформления страницы. Использовать тег можно только внутри секции head. В теге можно указывать атрибут media, который определяет для каких устройств вывода применять данные стили. Это позволяет задавать различные стилевые правила для настольных пк, мобильных браузеров или принтеров.
Тег <link> применяется для связи с внешними файлами, используется только внутри раздела head. Атрибут href, указывает путь к файлу. Атрибут rel указывает на тип файла, на который ссылается тег и имеет 2 возможных значения: stylesheet (таблица стилей) и alternate (другие файлы). Например, открыв исходный код, на данном сайте можно увидеть, что тег используется для связи с rss лентой. При указании ссылки на таблицу стилей также доступно использование атрибута media, как и для тега style.
Задание
К созданому после 2-го урока документу (вы же сделали задание?) подключите файл с таблицей стилей. Укажите цвет для элемента body, посмотрите на результат в браузере. Укажите цвет для заголовков и абзацев. одному из абзацев присвойте класс (вот так: <p class="test">) укажите для него свой цвет (для выбора элемента по классу используйте селектор имятега.имякласса). Откройте результат в браузере.
Попробуйте сформулировать по каким правилам были выбраны приоритеты для применения стилей в этом случае.
Самое важное
- Всегда, если нет особых причин не делать этого, подключайте css стили через внешний файл.
- стили в CSS задаются в виде
селектор {стиль1; стиль2;}. Селектор указывает к каким элементам html применяется правило. - Если для одного элемента задано несколько взаимосключающих стилевых правил, включается механизм каскадирования, который определяет наиболее приоритетное правило.
- CSS — это просто и удобно)).
