Урок 2. Работа с каскадными таблицами стилей (CSS)
Цель: ознакомиться c работой каскадных таблиц стилей (CSS).
Задачи:
- Научиться присоединять внешнюю таблицу стилей.
- Научиться создавать новое правило стиля CSS.
- Научиться применять стиль к своей странице.
- Научиться устанавливать пользовательские классы.
- Научиться использовать порожденные селекторы.
В результате выполнения данной лабораторной работы у вас должна получиться такая веб-страница (рисунок 2.1):
Рисунок 2.1 - Предварительный просмотр веб-страницы
Присоединение внешней таблицы
При современном веб-дизайне большинство стилей CSS хранится во внешних таблицах стилей CSS. Следовательно, все страницы сайта должны быть связаны ссылками с соответствующими внешними таблицами стилей.
1. Если на экране не видно панели Files , выберите Window => Files (Окно => Файлы).
2. Дважды щелкните по Lab2 => about-start.html на панели Files , что-бы открыть страницу в окне Document (рисунок 2.2).
Рисунок 2.2 - Шаблон about-start.html
Как вы могли заметить, у страницы есть базовое содержимое — изображе-ния, заголовки и абзацы, — но фактически отсутствует макет или стиль. Для данного упражнения весь макет и большая часть стилей были созданы заранее и сохранены во внешней таблице стилей. До начала работы со страницей необходимо создать ее новую версию.
3. Выберите File => Save As и сохраните эту страницу в папке Lab2, используя имя about.html. Следующим заданием будет присоединить внешнюю таблицу стилей к текущей странице.
4. При необходимости выберите Window => CSS Styles (Окно => Стили CSS). Щелкните по кнопке Attach Style Sheet (Присоединить таблицу стилей) на панели CSS Styles .
5. После открытия диалогового окна Attach External Style Sheet (Присоединить внешнюю таблицу стилей) (рисунок 2.3) щелкните по кнопке Browse . Перейдите к Lab2 в диалоговом окне Select Style Sheet File (Выбрать файл таблицы стилей) и выберите mystyles.css . Щелкните по кнопке OK .
Рисунок 2.3 - Диалоговое окно Attach External Style Sheet
6. Убедитесь в том, что в диалоговом окне Attach External Style Sheet выбрана опция Add as: Link (Добавить как: Ссылка). Выберите экран во всплывающем меню Media (Мультимедиа). Щелкните по кнопке ОК .
7. Как вы могли заметить, вид страницы значительно изменился, а изобра-жение заднего плана в верхнем колонтитуле из урока 1 теперь исполь-зуется в нижнем колонтитуле. Нижняя часть страницы отображается в виде двух столбцов.
8. Выберите File => Save .
Создание новых правил CSS
Правило CSS состоит из двух основных частей: селектора и одного или более свойств.
Например, в правиле CSS, приведенном ниже, селектором является тег hi, а свойствами —color: red (цвет: красный) и font-size: З6рх (размер шрифта: 36 рх):
font-size: 36 px;
В Dreamweaver вы создаете стили в среде «указать и нажать», а программа пишет за вас соответствующий код. По мере того как у вас будет появляться больше опыта по работе с CSS, вы сможете вручную писать CSS с помощью программы Dreamweaver.
1. Убедитесь, что на панели стилей CSS выбран режим All ; если для панели установлен режим Current (Текущий), щелкните по кнопке All . Щелкните по кнопке (+), расположенной после mystyles.css, чтобы расширить ее
2. В окне Document
поместите курсор на текст заголовка «Познакомьтесь с нашим персоналом.». Выберите
3. Щелкните по New CSS Rule внизу таблицы стилей CSS .
4. После открытия диалогового окна New CSS Rule (Создать правило CSS) дважды щелкните по кнопке Less Specific (Менее точно), чтобы выбрать селектор #mainContent h1. Щелкните по кнопке ОК . (рисунок 2.4)
Рисунок 2.4 - Диалоговое окно New CSS Rule
5. Убедитесь, что в диалоговом окне CSS Rule Definition for #mainCon-tent hi in mystyles.css (Определение правила CSS для #mainContent hi в mystyles.css) выбрана категория Type ; в противном случае выберите Туре в столбце Category слева от диалогового окна (рисунок 2.5).
6. Выберите Georgia, Times New Roman, Times, serif во всплывающем меню набора шрифтов Font-family
7. Используйте «пипетку» в поле Color , чтобы выбрать темно-синий цвет в левом углу графического заголовка. Необходимым цветом является #345FA3, хотя значение цвета немного отличается. Если вам нужен именно такой цвет, то вместо использования «пипетки» введите #345FA3 в поле Color. Щелкните по кнопке ОК .
Рисунок 2.5 - Диалогове окно CSS Rule Definition
Вы изменили семейство шрифтов и цвет для #mainContent , то он будет подчиняться тому же правилу. Если с этой таблицей стилей у вас связана тысяча страниц, то у них всех изменится семейство шрифтов и цвет элементов #mainContent
8. Установите курсор на абзац «Вид из окон нашего офиса.» внизу окна Document , выберите
в селекторе тегов.
9. Щелкните по New CSS Rule внизу панели CSS Styles .
10. После открытия диалогового окна New CSS Rule щелкните два раза по опции Less Specific (Менее точно), чтобы выбрать #sidebarl р. Щелкните по кнопке ОК .
11. Выберите Туре в столбце Category (Категория). В поле размера шрифта Font-size введите 80 и выберите во всплывающем меню %, Во всплывающем меню стиля шрифта Font выберите курсив (italic) (рисунок 2.6).
Рисунок 2.6 - Диалогове окно CSS Rule Definition (Type)
12. Выберите категорию Box (Рамка) в области Category . Снимите флажок Same for all (Одинаково для всех) в области Margin (Отступ). Введите 0 в поле Тор (Верхняя сторона). Щелкните по кнопке ОК (рисунок 2.7).
Рисунок 2.7 - Диалогове окно CSS Rule Definition (Box)
С помощью категории Box можно контролировать невидимые рамки, окружающие элементы, определяя значения ширины, высоты, заполнения, полей и иные свойства. Обычно это называется боксовой моделью. Если бы для дизайна потребовался такой же объем полей вокруг селектора, вы бы выбрали флажок Same for all (Одинаково для всех) и указали значение в поле Тор , которое также применялось бы и к полям Right (Правая сторона), Bottom (Нижняя сторона) и Left (Левая сторона). Значения заполнения и полей могут быть одними и теми же или отличаться для каждой стороны рамки, окружающей элемент. Также допускаются отрицательные значения.
13. Выберите File => Save As .
14. Выполните предварительный просмотр изменений в режиме отображения Live или в браузере.
Обратите внимание на изменения, которые внесли в заголовок
и в абзац под изображением Екатеринбурга. Внизу списка All Rules было добавлено два новых правила; в этом списке отражена очередность правил CSS в таблице стилей. Дизайнеры часто любят группировать соответствующие стили, чтобы их было проще найти. Порядок правил в таблице стилей также влияет на значимость каждого правила в каскадной записи. Вы можете быстро переместить любой стиль в другое место, a Dreamweaver перепишет за вас код.
15. Переместите недавно добавленный стиль #mainContent hi на панели стилей CSS под.twoColFixLtHdr #mainContent
16. Переместите #sidebarl p под.twoColFixLtHdr #sidebarl.
17. Выберите File => Save All (Файл => Сохранить все), чтобы сохранить изменения файлов HTML и CSS.
Установка пользовательских классов
В отличие от порожденных селекторов, которые нацелены на определенный тег, не все правила CSS применяются автоматически. В следующем задании мы создадим определяемый пользователем селектор, называемый классом, который может применяться по мере необходимости.
1. Щелкните по иконке New CSS Rule внизу панели CSS Styles . Откроется новое диалоговое окно CSS Rule .
2. Выберите Class (Класс) во всплывающем меню Selector Туре (Тип селектора) (может применяться к любому элементу HTML) и введите «.пате» в поле Selector Name (Имя селектора). Включите основной период. Если вы забудете про это, Dreamweaver сама вставит данную информацию, но лучше не забывать.
3. Убедитесь, что всплывающее меню Rule Definition (Определение правила) установлено на mystyles.css, и щелкните по кнопке ОК (рисунок 2.8).
Рисунок 2.8 - Диалоговое окно New CSS Rule
4. Выберите Type в диалоговом окне CSS Rule Definition for .name in mystyles.css столбца Category . Выберите small-caps (малые прописные буквы) во всплывающем меню варианта шрифта и щелкните по кнопке ОК .
Рисунок 2.9 - Диалоговое окно CSS Rule Definition (Type)
5. Выберите File => Save All .
Выполняя эти действия, вы не заметите каких-либо изменений в программе Dreamweaver, только в список All Rules (Все правила) панели CSS Styles будет добавлена одна запись.
Применение стилей
1. Выделите первый экземпляр имени Елена.
Рисунок 2.10 - Выделение имени
2. Выберите.name из списка Targeted Rule (Целевое правило) панели Properties .
3. Обратите внимание, что выбранный текст оказался набранным заглавными буквами, а индикатор селектора тегов включает имя класса
4. Чтобы закончить работу со страницей, снова выделите первый экземпляр имени каждого человека, а затем примените класс.name.
5. Выполните предварительный просмотр страницы в режиме отображения Live или в браузере.
Обратите внимание, что в режиме отображения Live или в браузере форматирование шрифта отображается соответствующим образом.
Рисунок 2.11 - Просмотр в режиме Live
6. Выберите File => Save .
Применение определяемых пользователем классов к разделам страницы
Посредством Dreamweaver вы можете легко вставлять в документ разделы страницы или теги
1. Используйте курсор, чтобы выделить изображение Елены и абзац (рисунок 2.12).
Рисунок 2.12 - Пример выделения
2. Выберите Layout (Макет) на панели Insert . В зависимости от конфигурации рабочей области меню Insert может отображаться на линейке или на панели (рисунок 2.13).
Рисунок 2.13 - Меню Макет
3. Выберите Insert Div Tag (Вставить тег Div). Откроется диалоговое окно Insert Div Tag (рисунок 2.14).
4. Убедитесь, что опция Insert установлена на Wrap around selection (Обтекание вокруг выбранного объекта). Введите «.profile» в поле Class .
Рисунок 2.14 - Диалоговое окно Insert Div Tag
5. Щелкните по кнопке New CSS Rule .
6. ведите «.profile» в поле Selector Name . Проверьте, чтобы новое правило во всплывающем меню Rule Definition (Определение правила) находилось в файле mystyles.css. Щелкните по кнопке ОК (рисунок 2.15).
Рисунок 2.15 - Диалоговое окно New CSS Rule
7. Выберите Box в диалоговом окне CSS Rule Definition for .profile mystyles.css столбца Category . Выберите right (правая) во всплывающем меню Clear (Чистый) (рисунок 2.16).
Рисунок 2.16 - Диалоговое окно CSS Rule Definition (Box)
8. Выберите Positioning (Положение) в столбце Category и auto (авто) во всплывающем меню Overflow (Переполнение). Щелкните по кнопке ОК (рисунок 2.17).
Рисунок 2.17 - Диалоговое окно CSS Rule Definition (Positioning)
9. Dreamweaver возвратит вас в диалоговое окно Insert Div Tag . Щелк-ните по кнопке ОК .
Теперь в окне Document вокруг раздела страницы, в котором находятся выбранное изображение и текст, отображается пунктирная линия, указывающая на наличие
Рисунок 2.18 - Выделение блока
Процесс добавления подобных тегов
10. Выделите в окне Document изображение Алины и два находящихся над ним абзаца.
11. Выберите Insert Div Tag на панели Insert категории Layout . Откроется диалоговое окно Insert Div Tag .
12. Выберите во всплывающем меню Insert опцию Wrap around selection . На этот раз вы выбираете в меню Class уже существующий профиль класса, чтобы применить его к новому
Рисунок 2.19 - Диалоговое окно Insert Div Tag
Раздел страницы, посвященный Алине, теперь находится в своем собственном теге
13. Повторите действия 10,11 и 12 для разделов страницы об Александре и Яне.
14. Выберите File => Save All .
Перемещение изображений
В предыдущем задании вы создали класс под названием.profile, который устанавливает для добавленных на страницу тегов div правила для свойств clear и overflow. В следующем задании вы задействуете свойство перемещения, чтобы определить положение изображений профилей. Определив правила в.profile, вы можете приступить к выпол-нению этого упражнения.
1. Выберите изображение Елены и убедитесь, что в селекторе тегов выбран тег .
2. Выберите class .fltrt на панели Properties . Теперь изображение Елены появится справа, а текст о ней отобразится слева от фотографии.
3. Выберите изображение Алины. Выберите класс.fltlft на панели Properties . Изображение Алины останется слева, но поскольку оно теперь перемещено, то текст будет отображаться справа от него.
4. Продолжайте перемещать оставшиеся изображения профиля: изображение Александра — вправо, изображение Яны — влево.
5. Выберите File => Save All , чтобы сохранить то, что вы сделали.
6. Выполните предварительный просмотр страницы, используя режим отображения Live или браузер, чтобы увидеть, как страница будет отображать расположенные в шахматном порядке изображения и текст около каждого из них. Каждый профиль расположен в новой области под предшествующим ему профилем (рисунок 2.20).
Рисунок 2.20 - Предварительный просмотр страницы
Исследование селекторов на панели правил CSS
В этом задании вы более детально изучите панель CSS Styles и озна-комитесь с имеющейся в Dreamweaver информацией по каждому стилю и его свойствам.
1. Поместите курсор в окне Document на одно из имен, к которому при-меняется имя класса.name.
2. Щелкните по кнопке All на панели CSS Styles , а затем убедитесь, что в категории All Styles (Все стили) выбрано имя класса.name, и щелкните по кнопке Current (Текущий).
3. Щелкните по левой иконке Show information about the selected property (Показать сведения о выбранном свойстве) в средней области окна.
Рисунок 2.21 - Панель CSS Styles
4. Выберите иконку Show Cascade of rules for selected tag (Отобразить каскад правил для выбранного тега) чтобы просмотреть область окна Rules , а не область About .
Установив курсор на селекторе в области Rules , вы увидите контекстное окно указателя, в котором будет отображаться та же информация, что и в области окна About , а также информация о специфичности, которая может оказаться полезной при разрешении проблем, связанных с каскадной записью.
Рисунок 2.22 - Область Rules
В области окна Properties отображаются свойства селектора. Чтобы увидеть область Properties , вам, возможно, потребуется опустить вниз нижнюю границу панели CSS Styles . Значения можно редактировать прямо в области Properties , а новые свойства можно добавить, используя ссылку Add Property (Добавить свойство).
В ходе выполнения данной лабораторной работы у вас должна полчиться веб-страница (рисунок 2.23)
Рисунок 2.23 - Итоговая веб-страница
Ответьте на контрольные вопросы .
- Как присоединить существующую внешнюю таблицу стилей к веб-странице?
- Чем будут отличаться результаты между правилами CSS для селектора
#header h1 и се-лектора #mainContent hi? Как называются эти типы селекторов? - Как применить класс CSS к тегу?
- Как вставить на веб-страницу новые области ?
- Какие свойство и значение CSS используются для скрытия любого содержимого, ассо-циируемого со стилем CSS?
Контрольное задание
- Подберите материал для своего веб-сайта.
- Реализуйте вторую страницу своего веб-сайта.
Требования к веб-странице:
- Использовать как минимум 3 изображения.
- Использовать внешнюю таблицу стлей (CSS).
- Создать как минимум 1 пользователький класс, и применить его.
- Создать несколько разделов .
- Применить к изображению "обтекание" текста.
Представление документа пользователю значит его конвертацию в понятную для пользователя форму. Браузеры , такие как Firefox , Chrome или Internet Explorer , предназначены для представления документов визуально, например, на экране компьютера, проектора или принтера.
Как CSS влияет на HTML?
Браузер применяет CSS правила к документу, чтобы описать, как он будет отображаться. CSS-правила формируются из:
- Набора свойств , которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента, и его фон был красным .
- Селектор , который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе .
Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница. Более подробно о синтаксисе CSS вы узнаете в следующей статье модуля - .
Краткий пример CSS
Описания, приведенные выше могут быть непонятны, поэтому подкрепим теорию небольшим практическим примером. Прежде всего, давайте рассмотрим простой HTML-документ, содержащий
и определяет собой абзац текста.">
(заметьте, что таблица стилей применяется к HTML с использованием элемента ):
Мой эксперимент с CSS Hello World!
Это мой первый CSS-пример
Теперь давайте посмотрим на очень простой пример CSS, содержащий два правила:
Первое правило начинается с селектора h1 , который означает, что оно будет применено к элементу
. Оно содержит три свойства и три значения(каждая пара свойство/значение называется объявление ):
- Первое объявление меняет цвет текста на синий.
- Второе выставляет желтый фон тексту.
- Третье создает границу вокруг текста шириной 1 пиксель, сплошную(не пунктирную, не штрих-пунктирную) и окрашенную в черный цвет.
Второе правило начинается с селектора p , который значит, что оно применится к элементу определяет собой абзац текста.">
. Оно содержит одно объявление, которое меняет цвет текста на красный.
Приведенный выше код в браузере отобразится вот так:
Это не очень красиво, но показывает, как работает CSS.
Активное обучение: Пишем наш первый CSS
Сейчас мы дадим вам возможность написать свой первый CSS. Вы можете сделать это, используя поле ввода, расположенное ниже, и увидеть это на живом редактируемом примере. У нас есть некоторые простые элементы HTML, а также некоторые свойства CSS. Так же, как показано выше, попробуйте добавить простые объявления в CSS, чтобы определить стиль HTML.
Если вы сделаете ошибку, вы всегда можете сделать сброс, используя кнопку Reset. Если вы чувствуете, что застряли, можете нажать "Показать решение", чтобы посмотреть решение.
Playable code
HTML Input
CSS Input
Output
Как на самом деле работает CSS?
Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:
- Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model ). DOM представляет документ в память компьютера и применяет к содержимому стили.
- Браузер отображает содержимое DOM.
О DOM
DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношением к другим DOM-узлам. Элементы могут иметь потомков, а потомки могут иметь братские(соседние) элементы.
Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это место, в котором CSS встречается с содержимым документа.
Представление DOM
Вместо долгих и скучных объяснений давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.
Давайте рассмотрим представленный HTML-код:
В DOM узел, соответствующий элементу
Является родителем. Его дети являются текстовыми узлами и соответствуют элементу . Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:
P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"
После интерпретации DOM-дерева браузером на выходе мы получим вот это:
Применение CSS к DOM
Let"s use: Cascading Style Sheets
Мы применим к нему этот CSS:
Span { border: 1px solid black; background-color: lime; }
Браузер проанализирует HTML и создаст DOM из него, а затем разберется с CSS. Поскольку у нас есть только одно правило, описывающее селектор span,то оно будет применено ко всем узлам документа с этим селектором. На выходе получим это.
Как применить ваш CSS к вашему HTML
Есть три различных варианта применения CSS к HTML-документу, которые встречаются чаще всего. Здесь мы рассмотрим каждый из них.
Внешняя таблица стилей
Вы уже сталкивались с внешней таблицей стилей в этой статье, но называли ее не так. Внешняя таблица стилей это отдельный файл с расширением.css, в котором и хранится CSS. Вы ссылаетесь на него из HTML при помощи элемента . HTML при этом выглядит так:
My CSS experiment Hello World!
This is my first CSS example
Добавим CSS-файл:
H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }
Этот метод, вероятно, лучший из всех, поскольку вы можете использовать одну таблицу стилей для нескольких документов. Чтобы обновить стили, достаточно внести изменения лишь в один CSS-файл.
Внутренняя таблица стилей
Внутренняя таблица стилей содержится внутри элемента содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.">
Hello World!
This is my first CSS example