В соответствии с концепцией современной веб-разработки html-код должен содержать только теги и контент в них. Для описания внешнего вида сайта используются стилевые правила специального языка разметки стилей — CSS.
CSS может быть применен как к отдельному тегу (элементу веб-страницы), так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS дополняет язык HTML и значительно расширяет его возможности. Отделяя стиль представления документов от содержимого, CSS упрощает создание веб-страниц. Отладка сайта становится более быстрой и удобной. Появляется возможность одновременной работы с одним проектом сразу нескольким разработчикам: дизайнеру, верстальщику, программисту. За счет этого повышается и скорость разработки сайта. Способы подключения стилей CSS к html-документу:
Внешние таблицы стилей — это файлы с расширением .css, которые содержат стилевые правила. Могут быть созданы в любом редакторе кода. Для подключения внешних таблиц стилей в заголовок html-документа помещается тег <link> с обязательными атрибутами:
Понятие каскадности CSS заключается в том, что стили, подключенные к html-документу разными способами, имеют различные приоритеты. Наличие приоритетов означает, что сначала будут применены параметры форматирования, заданные во внешнем css-файле, а затем — прописанные в заголовке документа. В последнюю очередь форматирование будет дополнено или изменено в соответствии с параметрами, объявленными непосредственно в тегах. На веб-странице при помощи CSS можно изменить:
С помощью CSS можно определять стиль и вид текста аналогично использованию тега <font>, задающего свойства шрифта. При этом стили обладают большими возможностями и позволяют сократить html-код. С атрибутами CSS, задающими свойства шрифта, можно познакомиться в Приложении к главе 2 (с. 110). Стили шрифта задаются большим перечнем отдельных свойств. Запись, определяющую свойства шрифта, можно сократить. В сокращенной записи нужно быть осторожным с порядком указания свойств. Например, свойство size должно задаваться раньше, чем свойство family (пример 8.4). Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в Приложении к главе 2 (с. 110). С помощью CSS задаются свойства блоков (пример 8.5). Внутренние отступы в блоке (отступы от внешней границы блока до его содержания) задает свойство padding. Эти отступы иногда называют полями. Существует несколько способов задания полей:
Внешние отступы блока (отступы от внешней границы блока до границ страницы или до соседних элементов) задает свойство margin. Способы задания внешних отступов аналогичны способам задания внутренних (пример 8.6).
Когда необходимо определить стиль для отдельного элемента веб-страницы или задать разные стили для одного тега, применяют классы (пример 8.7).
Синтаксис при использовании классов:
.Имя_класса { свойство1: значение; свойство2: значение; … }
Чтобы указать в html-коде, что тег используется с определенным классом, к тегу добавляется атрибут class= “Имя_класса”. Классы гибкие, их можно создавать много и называть понятными именами. Имя класса может содержать в себе латинские буквы, цифры, символ дефиса (-) и подчеркивания (_). Начинаться имя должно с латинской буквы.
Созданный класс можно применять к любым элементам веб-страницы. С помощью классов можно придавать стиль не только целым заголовкам и абзацам, но и отдельным фрагментам страницы, например словам. Для этого нужно заключить слово в контейнер <span> и добавить атрибут class.
|
Хокон Виум Ли (род. 27 июля 1965 г., Норвегия) — ученый, специалист в области информатики, в 1994 г. предложил использовать каскадные таблицы стилей (CSS). Пример 8.1. Встроенные стили.
Стилевое описание: Пример 8.2. Таблицы стилей.
Разметка веб-страницы:
Отображение в браузере:
Пример 8.3. Внешние таблицы стилей.
Описание стилей в css-файле:
Подключение css-файла к html- документу:
Отображение в браузере:
Пример 8.4. Применение стилей форматирования шрифта.
Сокращенная запись:
Отображение в браузере:
Пример 8.5. Применение стилей для блока.
Отображение в браузере:
Пример 8.6. Отступы в блоке.
padding: 20px 10px;
margin: 10px 80px; Отображение в браузере:
Указание на использование класса:
<p class = “figura”>
|
1. Что такое каскадные таблицы стилей?
2. Какими способами можно подключить каскадные таблицы стилей к html- документу?
3. Каким образом определяются приоритеты при подключении каскадных таблиц стилей различными способами к одному html-документу?
4. Что можно изменять на веб-странице с помощью каскадных таблиц стилей?
Упражнения
1 Откройте файл 8.html. Оформите абзацы этой веб-страницы, используя встроенные стили.
• 1-й абзац — style = ”color: #c71585; font-style: italic” (цвет текста — лилово-красный, начертание — курсив).
• 2-й абзац — style = ”color: #c71585; font-size: 16px; text-align: justify” (цвет текста — лилово-красный, размер шрифта — 16 рх, выравнивание текста — по ширине).
• 3-й абзац — style = ”color: #dc143c; font-family: Arial” (цвет текста — малиновый, шрифт — Arial).
• 4-й абзац — style = ”color: teal; font-family: Verdana; font¬size: 16px” (цвет текста — зеленовато-синий, шрифт — Verdana, размер шрифта — 16 рх).
Сохраните страницу под новым именем.
2 Откройте файл 8.html. Оформите веб-страницу, используя таблицы стилей.
<style>
p {color: teal; font-style: italic; text-align: justify}
h1 {font-family: Verdana; text-align: center}
</style>
Сохраните страницу под новым именем.
3 Откройте файл 8.html. Оформите веб-страницу, используя внешние таблицы стилей (описание стилей в файле). Параметры стилей задайте самостоятельно. Сохраните страницу под новым именем.
4 Откройте файл. Примените к блокам текста различное форматирование, используя классы.
1-й блок:
div.b1 {
width: 300px; /* Ширина */
background: #d3d3d3; /* Цвет фона */
padding: 8px; /* Поля */
padding-right: 40px; /* Правое поле */
border: solid 1px black; /* Стиль, толщина и цвет границы */
float: left; /*Выравнивание блока по левому краю */
}
2-й блок:
div.b2 {
width: 300px;
background: #f0e68c;
padding: 8px;
border: solid 2px black;
float: left;
position: relative; /* Расположение блока относительно первого блока */
top: 40px; /* Смещение по вертикали вниз */
left: -70px; /*Смещение по горизонтали влево*/
}
Должно получиться:
Используйте класс для форматирования слова Призма во втором блоке. Описание класса:
.termin {font-family: Verdana}
Применение класса:
<span class = “termin”>npизма</span>