Лекции / Глава 19. Введение в веб-программирование
.pdf
img;
a.
Вот пример встроенного элемента span, который содержится внутри элемента a:
Lesson2.html
<p>
Подробнее о данном теге можно узнать <span class="fun"><a href="http://htmlbook.ru/html/html">на сайте</a></span>
</p>
Результат работы представлен на рисунке 19.15:
Рисунок 19.15
Встроенные элементы поддерживают небольшое количество вариантов оформления: цвета (теста и фона) и свойства шрифта (размер, семейство шрифтов,
подчеркивание и другие декоративные эффекты).
Блочные элементы намного функциональнее при работе с CSS, например,
блоку текста можно задать определенную ширину или высоту;
текст можно растянуть и прижать к одному из краев блока, в котором он находится;
можно передвинуть блок в любое место веб-страницы, независимо от его позиции в разметке.
§19.21 Изменение размеров блока
По умолчанию, блочный элемент занимает 100% доступной ширины – будь то размер родительского контейнера, другого div-элемента или даже сектора body.
Попробуем изменить ширину абзацев. Для этого добавим в CSS-файл новый селектор класса:
style1.css
.attentiongrab { width: 20%; font-weight: bold;
31
}
Применим данный селектор к одному из абзацев и оценим результат (рисунок 19.16):
Lesson2.html
<p class="attentiongrab">
Подробнее о данном теге можно узнать <span class="fun"><a href="http://htmlbook.ru/html/html">на сайте</a></span>
</p>
Рисунок 16. Уменьшение ширины абзаца на 80% по сравнению с остальными
Создадим отдельную веб-страницу, где будет размещена навигация страницы.
Она будет иметь следующую предварительную разметку:
navigation.html
<!DOCTYPE html>
<html lang="en" title="Обучающая страница для студентов групп
4240,4242!">
<head>
<meta charset="UTF-8"/> <title>Главная страница</title>
<link href="style1.css" rel="stylesheet" type="text/css"/> </head>
<body>
<div id="header">
<h1>Главная страница сайта</h1> </div>
<div id="mainnavigation">
<h3>Навигация сайта</h3>
<ul>
<li><a href="Lesson1.html">Урок первый</a></li> <li><a href="Lesson2.html">Урок второй</a></li> <li><a href="Lesson3.html">Урок третий</a></li>
</ul></div></body></html>
Установим для блока div с id mainnavigation высоту и ширину в CSS-коде:
32
style1.css
#mainnavigation {
background-color: #ffcc33; <!--Цвет фона--> color: navy;
font-weight: bold; width: 200px; height: 400px;
}
На рисунке 19.17 показано, как страница будет выглядеть в браузере:
Рисунок 19.17. Отображение блока навигации с установленными размерами 200
пикселов в ширину и 400 в высоту
§19.22 Добавление границ блочным элементам
Можно использовать блочные элементы для того, чтобы создавать эффекты в виде границ. Границам можно придавать различную толщину, вид и стиль (сплошные,
прерывистые линии и т.д.). Для этого предназначены следующие свойства CSS: border-width, border-style, border-color.
Рассмотрим несколько примеров в действии. На рисунке 19.18 установлена самая простая граница: черная сплошная линия шириной 5 пикселов.
33
Рисунок 19.18. Простая черная граница
Этот эффект получен при применении такого CSS-кода:
.highlight { border-width: 5px; border-style: solid; border-color: black;
}
Рассмотрим еще несколько видов границ блочных элементов (таблица 19.3).
Таблица 19.3. Виды границ блочных элементов
Объемная вдавленная граница
.highlight { border-width: 5px; border-style: inset; border-color: black;
}
Цветная выпуклая граница
.highlight { border-width: 10px; border-style: ridge; border-color: red;
}
34
Прерывистые границы
.highlight { border-width: 10px; border-style: dotted; border-color: purple;
}
Штриховая серая граница
.highlight { border-width: 5px; border-style: dashed; border-color: gray;
}
Двойные границы
.highlight { border-width: 5px; border-style: double; border-color: red;
}
Также данные стили можно применить к отдельным краям блочного элемента,
используя свойства border-top, border-bottom, border-left, border-right.
Вот пример блока, у которого по отдельности оформлена каждая сторона:
35
.hightlightborderline { border-top-width: 1px; border-top-style: dotted; border-top-color: green; border-bottom-width: 5px; border-bottom-style: dashed; border-bottom-color: red; border-left-width: 3px; border-left-style: solid; border-left-color: fuchsia; border-right-width: 4px; border-right-style: double; border-right-color: yellow;
}
Существует быстрый метод оформления границы, который браузеры без проблем поддерживают. Для этого понадобится лишь такой код:
.highlight {
border: 5px solid black;
}
Универсальное свойство border позволяет одновременно установить толщину,
стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке,
разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента,
воспользуйтесь свойствами border-top, border-bottom, border-left, borderright.
Толщина границы устанавливается в следующих единицах: пиксели (px), точки
(pt) или em. Кроме того, можно просто указать одно из ключевых слов для толщины границы: thin – тонкая, medium – средняя или thick – толстая.
Граница может быть одного из следующих видов:
solid – сплошная (по умолчанию);
double – двойная;
dotted – точечная;
dashed – штриховая;
36
groove – желобок;
ridge – бороздка;
inset – вдавленная;
outset – выпуклая.
§19.23 Отступы и поля
CSS-свойство padding применяется для того, чтобы добавить отступ – дополнительное пространство между границей и текстом. Отступы к блочному элементу можно применить тремя различными способами, используя пиксели, значения em и проценты.
.pixelpadding {
padding: 30px;
border: 1px dashed black;
}
Рисунок 19. Задание отступа
Свойство margin позволяет задать величину свободного пространства снаружи от границы элемента. Добавим свойства margin-top: 100px; margin-left: 100px; в контекстный селектор #mainnavigation и оценим результат (рисунок
19.20):
Рисунок 20
37
§19.24 Свободное расположение элементов на странице
Не имея особых указаний, браузер размещает элементы на странице в том порядке, в каком они указаны на исходнике.
Немного обновим нашу первую веб-страницу и вспомним, какие разделы есть на нашем сайте:
Lesson1.html
<!DOCTYPE html>
<html lang="en" title="Обучающая страница для студентов групп
4240,4242!">
<head>
<meta charset="UTF-8"/> <meta name="author"
content="Заид Мингалиев"> <title>Урок первый - Основы HTML</title>
<link href="style1.css" rel="stylesheet" type="text/css"/> </head>
<body>
<div id="header"> <h1>Основы <b>HTML</b></h1> </div>
<div id="tagline">
<h2>Данный курс лекций посвящен веб-программированию</h2> </div>
<div id="content"> <div id="HTML_content">
<p>HTML (HyperText Markup Language) переводится как «язык разметки гипертекста». Под разметкой здесь понимается структурирование, форматирование и
оформление документов.</p>
</div>
<p class="fun">
HTML-страница представляет собой текстовый файл, который можно набрать в любом текстовом редакторе (например, в редакторе Notepad++) и, который имеет расширение *.html.
</p>
<p>Существуют <span style="color: red;">обязательные элементы</span>, которые должны присутствовать на любой веб-странице:
</p>
<ol>
<li>doctype – тип документа;</li>
<li>тег html;</li>
38
<li>тег head</li> <li>тег title;</li>
<li>тег body. ™</li> </ol>
</div>
<div id="mainnavigation" class="highlight"> <h3 align="center">Навигация сайта</h3> <ul>
<li><a href="navigation.html">Главная страница</a></li> <li><a href="Lesson2.html">Урок второй</a></li>
<li><a href="Lesson3.html">Урок третий</a></li> </ul>
</div>
<div id="author">
<p>© Заид Мингалиев, КНИТУ-КАИ</p> </div>
</body>
</html>
Собираясь «перекроить» свою страницу с помощью таблицы стилей, запомните полезное правило: добавьте временную границу к каждому разделу, который планируете передвинуть. С границами увидеть эффекты от ваших действий куда проще.
А затем, как только надобность в них отпадет, вы без труда сможете убрать временный стиль. Добавим такое временное правило, установим его в конец таблицы – таким образом оно переопределит все стили границ, которые вы установили ранее.
style1.css
#header, #tagline, #content, #mainnavigation, #author { border: 1px solid red;
padding: 20px; margin-bottom: 20px;
}
Здесь применяются небольшие отступы, а так же нижние поля, делающие отображение содержимого нагляднее.
На рисунке 19.21 показано, как документ выглядит в браузере после применения временного стиля:
39
Рисунок 19.21. Выделение структуры страницы с помощью красных границ
Самый простой метод размещения элементов на странице с помощью CSS –
абсолютное позиционирование. Используя его, мы определяем позиции (или координаты) верхней левой точки каждого элемента.
Для использования данного метода нужно лишь добавить в CSS-код свойство position: absolute, а затем определить, где вы хотите разместить элемент. В
показанном ниже примере мы определяем, что элемент должен смещаться на 100
пикселов вниз от верхнего края окна браузера и на 100 пикселов вправо от левого края с помощью свойств top и left:
absolute.html
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"/>
<title>Абсолютное позиционирование</title> <style type="text/css">
#blueblock { position: absolute; top: 200px;
left: 200px; color: white;
background-color: blue; font-weight: bold; width: 100px;
height: 100px; padding: 5px;
40