 |
Работа с цветом и изображениями
|
|
|
|
Каскад
Каскад определяет способ применения правил, в случае с типами таблиц стилей:
- Пользовательский стиль переопределяет все остальные стили.
- Встроенный стиль превосходит внедренный, связанный и импортированный стили.
- Внедренный стиль имеет преимущественное значение перед связанным и импортированным стилями.
- Связанные и импортированные стили рассматриваются, как равные по значимости, и применяются везде, где не были применены другие типы таблиц стилей.
- Стиль браузера используется только в том случае, когда для данного элемента не было предоставлено ни одного стиля.
Например, в связанной таблице стилей (файле my_style. css) содержатся правила: первое определяет цвет абзаца — зеленый, второе задает цвет заголовка — желтый:
| p {color: green; } h1 {color: yellow; } |
В html-документе используются три таблицы стилей: связанная, внедренная и встроенная. Во внедренном стиле определен красный цвет абзаца, а во встроенном (встроенная таблица применяется к первому абзацу) — синий.
| <! DOCTYPE html> < HTML> < HEAD> < META charset=" utf-8" > < LINK rel=" stylesheet" href=" my_style. css" > < STYLE> p {color: red; } < /STYLE> < /HEAD> < BODY> < H1> Связанный стиль< /H1> < P style=" color: blue" > Встроенный стиль. < P> Внедренный стиль. < /BODY> < /HTML> |
Работа с цветом и изображениями
Способы указания цвета
- Значения цветов можно указать в стандартной шестнадцатеричной модели RGB (Red-Green-Blue). #хххххх — здесь вместо каждого символа х должна стоять шестнадцатеричная цифра (от 0 до f). Например, код #000000 означает, что яркость каждой составляющей равна 0 — следовательно, это черный цвет. Соответственно, белый цвет получается, если все составляющие будут максимальны: #ffffff.
- Стандартное имя цвета, например: color: green; background-color: yellow. Этот способ устарел и не рекомендуется еще и потому, что большинство «стандартных» цветов не входят в безопасную палитру.
- Сокращенный шестнадцатеричный код: например, вместо #33сс99 можно написать просто #3с9, а вместо #999999 — просто #999.
- Десятичный код в модели RGB, например: color: rgb(255, 0, 0). Здесь в каждой позиции может находиться целое число от 0 до 255.
Задание
|
|
|
Создайте web-страницу на тему " Туристическая фирма", содержащую:
- Не менее четырех абзацев (каждый абзац должен быть озаглавлен).
- Список, элементы списка должны быть ссылками на заголовки абзацев (список поместите в начале страницы).
- Несколько ключевых понятий выделите полужирным шрифтом.
Создайте две web-страницы по направлениям отдыха, например: путешествия по России, spa-курорты, горнолыжные курорты, пляжные туры, экскурсионные туры или другое на Ваш выбор. Эти страницы должны содержать текстовую информацию, изображения и таблицы со столбцами Страна/Город, Сезон, Длительность, Стоимость (Например: Египет — июнь-август — 7 дней — от 45000 руб. )
Задайте одинаковое оформление для всех документов (предварительно выберите тип таблицы стилей, который следует использовать в данном случае):
- Для заголовков задайте цвет фона и цвет текста.
- Определите фон страницы. Подберите оптимальное сочетание цветов.
Стилизация текста
Семейства шрифтов
В языке CSS существует пять общих семейств шрифтов:
- Serif — шрифты с засечками (например, Times New Roman). Считается, что шрифты этой категории подходят для печати, а также для заголовков текста, представленного в электронном виде.
- Sans-serif — шрифты без засечек (например, Arial). Считается, что шрифты этой категории являются лучшим выбором для текста элемента body, отображаемого на экране, кроме текста маленького размера или курсива.
- Monospace — моноширинные шрифты, шрифты, все буквы которых имеют одинаковую ширину (например, Courier). Обычно они используются для описания примеров программного кода.
- Fantasy — декоративные шрифты (например, Western). Вид шрифтов необычный, поэтому их полезно использовать для заголовков или небольших областей текста, но они не совсем подходят для текста элемента body, поскольку украшения затрудняют чтение текста.
- Cursive — рукописные шрифты (например, Lucida Handwriting). Как и в случае с фантастическими шрифтами, в языке CSS рукописные шрифты применяются редко.
Рассмотрим еще один вид селекторов — селектор псевдоэлемента. Эти селекторы присоединяются к элементу, который вы желаете стилизовать. Применим селекторы псевдоэлементов для стилизации первой буквы (буквицы) и первой строки текста.
|
|
|
| p: first-letter {font-style: italic; color: #999} p: first-line {font-weight: bold; color: #F00} |
|
|
|
