Проектирование и дизайн ИС Практическая работа №10

Практическое занятие № 10

Тема: Работа с селекторами CSS

Цель работы: научиться применять селекторы в CSS.

Приобретаемые умения и навыки: Умение работать с языком программирования HTML

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

Ход работы

Откройте папку с практической, в ней находится документ HTML под названием selektory-praktika.html. В нём нет CSS-стилей – поэтому вы будете самостоятельно их добавлять (на этот раз в виде внутренней таблицы стилей, размещенной прямо в HTML-документе).

Подключаем внутреннюю таблицу стилей

Откройте файл selektory-praktika.html в удобном для вас текстовом редакторе. Отыщите закрывающий тег  и напишите над ним открывающий и закрывающий теги для подключения внутренней таблицы стилей. Должно получиться так:

Создаем стиль для абзацев

Сохраните изменения и откройте файл в браузере. Сейчас страница выглядит совсем непрезентабельно. Попробуем придать ей приглядный вид и начнем с текста. Между тегами  добавьте следующий код CSS:

Вы создали селектор для тега 

, указав его имя перед открывающей фигурной скобкой {. Данный блок объявлений устанавливает внешний вид для всех элементов p на странице:

• шрифт Lato;

• размер шрифта 1em;

• цвет шрифта #474747;

• выравнивание текста по центру;

• размеры полей отступа для текста сверху и снизу в 20 пикселей.

Рекомендация: не забывайте ставить точку с запятой после каждого значения свойства, а также записывать каждое свойство с новой строки и делать отступы с помощью клавиши пробела или табуляции (для более легкого восприятия).

Общий стиль для заголовков с помощью селектора групп

Сохраните изменения в файле и обновите страницу в браузере, чтобы увидеть, как преобразился основной текст. Теперь пора украсить наши заголовки и заодно вспомнить, что такое селекторы групп. Добавьте еще один стиль CSS на страницу:

Селектор h1, h2 является групповым – мы просто перечислили через запятую те элементы страницы, которым желаем придать одинаковый стиль. Селекторы групп очень удобны, ведь благодаря им нам не придется записывать один и тот же стиль для каждого элемента по отдельности (что, кстати, сделало бы код CSS более громоздким).

Сохраните изменения и обновите страницу. Вы увидите, что заголовки  и изменили свой вид:

• шрифт изменился на Bitter;

• цвет изменился на #464646;

• текст расположился по центру страницы;

• все буквы стали прописными за счет значения uppercase для свойства text-transform;

• появились отступы: 40 пикселей сверху и 30 пикселей снизу.

Теперь нам понадобится еще немного поправить стиль заголовков, но поскольку для каждого из них будут устанавливаться разные свойства и значения, запишем их по отдельности, в виде обычных селекторов тегов:

С помощью этого кода CSS мы изменили размер шрифта для заголовка , увеличив его в два раза по сравнению с размером шрифта, заданным в браузере по умолчанию, а также увеличили шрифт для  до 2.6em и добавили под текстом сплошную полосу шириной 1px с цветом #eae9e9, которая немного оживляет страницу.

Используем селектор ID для

Наша страница начинает потихоньку преображаться. Следующее, что мы будем делать – это создавать селектор ID (идентификатор). Необходимо немного сузить область контента, который расположен после логотипа. Назовем ID area и запишем стиль:

В первой части главы мы упоминали о том, что в CSS перед селектором ID ставится символ решетки #. Итак, этот стиль должен ограничить область содержимого до 55% от всей ширины экрана, а также разместить его по центру страницы (margin: 0 auto). Кроме этого, внизу появится отступ в размере 40 пикселей.

После того как вы сохраните изменения в файле и обновите страницу в браузере, вы не увидите изменений. Всё потому, что вы еще не присвоили идентификатор к элементу HTML-документа. Нам необходимо присвоить этот ID определенному элементу  (в нашем случае он единственный). Это должно выглядеть таким образом:

Не забудьте о том, что в HMTL перед именем идентификатора ставить символ решетки не нужно (он записывается только в таблице CSS).

Оживляем логотип, используя класс CSS

Теперь можно посмотреть на результат. Почти половина пути уже пройдена, но нам еще есть над чем поработать. Взглянем на лого: пожалуй, его можно немного украсить, использовав для этого селектор класса под названием logo, а также псевдокласс :hover:

Перед селектором класса в CSS обязательно ставится точка. Также запишите класс в HTML-документе (уже без точки!), присвоив его тегу img:

Что делает этот стиль:

• устанавливает отступ сверху от содержимого в размере 30 пикселей;

• изменяет вид курсора на pointer при наведении на элемент;

• устанавливает эффект и скорость перехода от одного состояния элемента к другому (нужно для следующего пункта);

• псевдокласс :hover со свойством opacity обеспечивает изменение прозрачности элемента (до 0.6) при наведении на него. А благодаря предыдущему пункту переход происходит более плавно.

Примечание: некоторые браузеры (например, IE9) отображают рамку для тех изображений, которые являются ссылками. Чтобы убрать эту рамку для всех картинок, допишите этот стиль:

Украшаем все абзацы под заголовком: родственные селекторы

Пришла пора вспомнить о родственных (сестринских) селекторах. В данном уроке нам понадобится такой селектор, чтобы стилизовать все абзацы 

 и сделать их похожими на кнопки, которые следуют после заголовка  (в пределах блока ). Запишите такой стиль:

Разберем по порядку, что означает каждая строка. Применив этот стиль, мы:

• изменили внешний вид шрифта для тегов 

  , следующих за  (шрифт Lato, размер шрифта 1.2em, преобразование текстовых символов в верхний регистр text-transform: uppercase, цвет #425c63);

• установили цвет фона #dbeaee для элементов;

• установили радиус скругления углов фона 100px;

• установили ширину полей отступа сверху и снизу содержимого в размере 25px;

• задали эффект и скорость перехода transition: 0.5s ease от одного состояния элемента к другому.

При наведении указателя мыши на элемент он меняет свой вид следующим образом:

• шрифт становится сверхжирным (900);

• цвет шрифта – белый;

• цвет фона – #559fb4;

• курсор – pointer (если сделать кнопки рабочими, то этот вид курсора будет очень уместен).

Также вы наверняка заметили строку @media all and (min-width: 500px) – это медиа-запрос (мы обязательно будем изучать их позже). На данном этапе достаточно упомянуть, что такой медиа-запрос указывает, при каких условиях будет отображаться наш стиль h2 ~ p:hover {letter-spacing: 3px;}. Так, расстояние между символами letter-spacing будет увеличено на 3 пикселя при условии, что веб-страница открыта на любом устройстве с шириной экрана не менее 500 пикселей.

Подсказка: сохраните все изменения в файле, обновите страницу и попробуйте изменить размеры окна браузера. Понаблюдайте за тем, как ведут себя элементы веб-страницы при разной ширине окна.

Финал: преображаем футер

Нам осталось совсем немного – добавить стиль для футера. Запишите этот код CSS в файл:

Для создания футера мы использовали HTML5-тег , соответственно, в селекторе указано имя этого тега. Добавив этот код CSS в рабочий файл, вы установили ширину для футера 100%, цвет #464646 и отступы в размере 30px. Также, используя селектор потомков footer p, вы изменили цвет текста для абзацев в футере на #ccc.

Сохраните и обновите страницу. Вероятно, вас смутили небольшие отступы между краями футера и границами окна. Это происходит, потому что у окна имеются отступы по умолчанию. Чтобы убрать их, запишите для тега  эти несколько строк CSS кода:

На этом всё. Вы можете взглянуть на полученный результат