Лекции / Глава 19. Введение в веб-программирование
.pdf§19.16 Каскадные таблицы стилей
Каскадные таблицы стилей (Cascading Style Sheets, CSS) предназначены для облегчения оформления web-страниц. Основное их назначение - отделение содержания веб-страниц (HTML) от их оформления (CSS), которое может быть единым для нескольких веб-страниц, и изменения в котором легко вносить.
Встроенные стили
Работая с документом, можно использовать форматирование текста, например,
чтобы выделить цветом какие-то его части. Такого эффекта можно добиться с помощью встроенных стилей CSS в HTML. Вот как это выглядит:
<p style="color: red;">Существуют обязательные элементы, которые должны присутствовать на любой веб-странице: </p>
Мы использовали атрибут style внутри тега <p>. Если к определенному html-
элементу стиль применяется таким образом, он называется встроенным стилем.
Атрибут style может содержать одно или несколько объявлений внутри своего блока. Объявление состоит из двух частей: свойства и его значения. Новое объявление добавляется через точку с запятой (;). Добавим для отображения абзаца полужирным шрифтом новое свойство font-weight: bold;:
<p style="color: red; font-weight: bold;">Существуют обязательные элементы, которые должны присутствовать на любой вебстранице: </p>
Для выделения отдельных слов внутри абзаца применяется элемент span. Это инструмент для выделения начала и конца какого-либо раздела, к которому вы хотите применить стиль. Вместо окрашивания всего абзаца в красный цвет выделим только слова «обязательные элементы» в красный цвет. Вот как для этого можно использовать тег span:
<p>Существуют <span style="color: red;">обязательные элементы</span>, которые должны присутствовать на любой веб-странице:
</p>
Открыв эту разметку в браузере, мы увидим результата, показанный на рисунке
19.10.
21
Рисунок 19.10
Внутренняя таблица стилей
Внутренняя таблица стилей – это фрагмент в начале веб-страницы, где созданы все стили, которые будут на ней применены. Для создания такого фрагмента нужно воспользоваться элементом <style>, который располагается внутри заголовка <head>.
<head>
<meta charset="UTF-8"/> <meta name="author"
content="Заид Мингалиев"> <title>Урок первый - Основы HTML</title>
<style type="text/css"> p {
font-weight: bold; } </style>
</head>
В показанной выше разметке мы превратили встроенный стиль во внутреннюю таблицу стилей, которая начинается с тега <style type="text/css"> и, конечно,
закрывается тегом </style>. Объявление самого стиля заключается в фигурных скобках { }. Тег p, стоящий перед первой фигурной скобкой, указывает браузеру, к чему именно применяется стиль: в данном случае мы делаем полужирным любой текст,
заключенный внутри тега <p>. Элемент p в таком случае называется селектором.
22
Это удобный инструмент для быстрого и простого изменения вида множества элементов на вашей странице. Селектор дает браузеру команду применить к определенным элементам тот стиль, объявление которого заключено в фигурные скобки. Селектор, фигурные скобки и объявление образуют форму, которая называется
правилом стиля.
В данном случае таблица стилей содержит такое правило: «Стиль для всех абзацев на этой странице: текст выделяется полужирным шрифтом».
Внешние таблицы стилей
Создадим файловое пространство, куда можно поместить стили, которые будут применены для всех наших веб-страниц. Для этого создайте файл формата .css, откройте его с помощью текстового редактора и перенесите в нее правила стилей,
сформированные ранее.
style1.css
p {
font-weight: bold; color:green;
}
Сохраните файл в каталоге, где находятся ваши html-файлы, назвав его, например, style1.css. Чтобы CSS-файл оказал какое-то влияние на веб-страницу, необходимо привязать таблицу стилей к страницам, стиль которых были описаны в предыдущей лекции. Для этого добавьте элемент link в заголовок (head) каждой страницы, которая должна быть оформлена с помощью таблиц стилей.
Пример привязки CSS к веб-странице:
Lesson1.html
<head>
<meta charset="UTF-8"/> <meta name="author"
content="Заид Мингалиев"> <title>Урок первый - Основы HTML</title>
<link href="style1.css" rel="stylesheet" type="text/css"/> </head>
23
Атрибут href сообщает браузеру, где находится файл с таблицами стилей.
Элементы rel="stylesheet" и type="text/css" сообщают браузеру, с каким типом файла нужно связаться и как браузер должен обработать контент. Выполняя привязку, всегда указывайте эти важные элементы.
Результат привязки таблицы стилей к веб-странице представлен на рисунке 19.11.
Рисунок 19.11
При изменении стиля сайта в первую очередь обычно меняют тип шрифта. В
Windows большинство браузеров по умолчанию использует Times New Roman, как было видно на приведенных ранее скриншотах. Шрифт легко изменить с помощью свойства font-family.
Лучше всего применить новый шрифт ко всему разделу body, поэтому сделаем
так:
style1.css
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Зачем мы указали четыре значения у свойства font-family? Если у пользователя, который захочет открыть ваш веб-сайт, на установлен определенный шрифт, браузер отобразит первый из имеющихся на компьютере. Этот прием называется созданием стека шрифтов.
Результат привязки новой таблицы стилей к веб-странице представлен на рисунке
19.12.
24
Рисунок 19.12
Внесем изменения в представление файла – добавим больше содержимому
основной части (body) и изменим отображение навигации.
style1.css
p {
font-weight: bold; color:green;
}
body {
font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #e2edff;
line-height: 125%; padding: 15%;
}
ol {
font-size: small;
}
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: x-large;
}
Сохраним CSS-файл, а затем обновим веб-страницу в браузере. Если все хорошо,
страница должна выглядеть так, как показано на рисунке 19.13.
25
Рисунок 19.13. Применение разных эффектов изменения стиля шрифта в CSS
Свойство background-color изменяет цвет фона для всей страницы. Значения свойств может быть указано с помощью наименования цветов (navy, blue, red, yellow и
т.д.) или с использованием шестнадцатеричной системы кодов цвета.
Свойство line-height, при увеличении его значения, расширяет пространство между строками (интерлиньяж), за счет чего текст будет лучше восприниматься.
Свойство padding используется для расширения пространства между внешним краем элемента и содержанием внутри его. Поскольку мы говорим об элементе body, то речь идет о верхнем, нижнем и боковых полях окна браузера. Значение, которое мы устанавливаем для этого свойства, определяет, какое пространство останется между внешними краями окна и контентом. В данном случае мы задали 15 пикселей.
§19.17 Контекстные селекторы
В разработанной разметке страницы есть три абзаца, однако они отличаются друг от друга. Попробуем определить для первого абзаца уникальный стиль, отличный от других абзацев.
Lesson1.html
…
<div id="HTML_content">
26
<p>HTML (HyperText Markup Language) переводится как «язык разметки гипертекста». Под разметкой здесь понимается структурирование, форматирование и
оформление документов.</p> </div>
…
Предложение заключено в специальный div-элемент с id-атрибутом
HTML_content. Имея специальный элемент div для объекта на странице, можно
установить особый стиль только для него.
style1.css
…
#HTML_content p { font-style: italic;
font-family: Georgia, Times, serif; color: navy;
}
Это правило означает: «Для всех абзацев, заключенных внутри элемента с идентификатором (атрибутом id) HTML_content, установить курсивное начертание и шрифт Georgia, Times или любой другой из семейства serif, если нет таких».
#HTML_content – это контекстный селектор.
Рисунок 19.14
27
Рассмотрим еще несколько примеров:
1.Для любой кнопки, находящейся внутри блока навигации blocklink, применить нижнее подчеркивание шрифта.
style1.css
…
#blocklink button { text-decoration: underline;
}
2.Для любого текста внутри заголовка первого уровня, который помечен как b (то есть должен выделяться полужирным шрифтом), установить красный цвет шрифта.
style1.css
…
h1 b {
color: red;
}
§19.18 Оформление ссылок
По умолчанию, большинство браузеров имеют следующие цветовую схему для
ссылок, которые называются еще статусами ссылок:
голубой цвет – ссылка, которую еще не открывали (unvisited);
фиолетовый цвет – ссылка на страницу, которые вы уже посещали (visited);
красный цвет – активная ссылка (active), на которой вы в данный момент
щелкаете кнопкой мышки.
Есть еще один статус – статус наведения на ссылку (hover), возникающий тогда,
когда вы наводите на ссылку указатель мыши. В CSS можно изменить стиль для всех статусов ссылки, используя т.н. псевдоклассы. Это внутренний класс, который браузер автоматически применяет к ссылке, когда она находится в том или ином состоянии.
Зададим цветовую и стилевую схему для разных статусов ссылки:
style1.css
a:link {
color: black;
28
}
a:visited { color: gray;
}
a:hover {
text-decoration: none; color: white; background-color: blue;
}
a:active {
color : aqua; background-color : pink;
}
Различные состояния обрабатываются с помощью селектора. Для этого нужно добавить двоеточие (:) и псевдокласс: link (ссылка), visited (посещенная), hover
(наведение), active (момент щелчка кнопкой мыши на ссылке).
§19.19 Селекторы классов
Селекторы класса позволяют разработать стиль, который может быть применен снова и снова ко многим различным элементам. Например, если вы хотите выделить отдельные фрагменты текста, чтобы они выглядели привлекательнее, чем остальная часть документа, то можете ввести в своем CSS-файле такой код:
style1.css
.fun {
color: #339999;
font-family: Georgia, Times, serif; letter-spacing: 0.1em;
}
Точка перед названием класса говорит о том, что перед вами селектор класса. В
это правило было добавлено новое свойство letter-spacing, которое задает пробел между буквами. Здесь установлена величина 0.1em. Величина 1em определяет высоту символа М для любого шрифта, поэтому 0,1 означает 10% от этой высоты.
Чтобы использовать стиль, после того как он был внесен в таблицу, добавьте такой атрибут, например, в абзац.
29
Lesson1.html
<p class="fun">
HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе (например, в редакторе Notepad++) и, который имеет расширение *.html.
</p>
Разницей между селектором классов и контекстным (id-) селектором заключается в том, что id-селектор можно применить только к одному HTML-элементу, так как id не должны повторятся. А класс может быть применен столько раз, сколько потребуется.
§19.20 Блочные и встроенные элементы
Любая веб-страница содержит два типа элементов: встроенные и блочные.
Блочные элементы – любой элемент, который может включать в себя другие элементы (блочные или встроенные). Опознать блочные элементы легко, так как они служат контейнерами для других элементов.
Вот несколько примеров блочных элементов:
h1, h2, h3 … h6;
p;
div;
blockquote;
ol, ul;
form.
Встроенные элементы – это любые элементы, которые могут включать в себя только другие встроенные элементы. Вкладывать блочные элементы во встроенные элементы запрещено!
Хороший пример встроенного элемента span, который используется для группирования слов для задания им одного стиля.
Другие примеры встроенных элементов:
em;
strong;
cite;
30