close

Вход

Забыли?

вход по аккаунту

ЛАБОРАТОРНАЯ РАБОТА №5 КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ

код для вставкиСкачать
ЛАБОРАТОРНАЯ РАБОТА №5
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS
Дисциплина: информационные системы и сети
Курс, семестр: 4/7
Цель: изучить на практике базовые принципы стилизации WEB-страниц с помощью
каскадных таблиц стилей CSS.
Оборудование, ПО: персональный компьютер, текстовый редактор, веб-браузер
Ход работы.
Этап I.
Форматирование страницы и абзацев.
Как уже многократно упоминалось на занятиях, за форматирование содержимого
WEB-страниц отвечает не HTML (его задача – структура и содержание), а стили CSS. В
последующих заданиях для простоты будем помещать описание стилей внутри HTMLдокумента (тег style внутри тега head), однако ничто не мешает поместить описание стиля
отдельным файлом и дать ссылку в виде
<link rel="stylesheet" type="text/css" href="[сылка_на_файл]">
Примечание. В качестве источника текстов Вы можете использовать как результаты
выполнения предыдущего задания, так и взять готовую бессмыслицу с сайта
http://referats.yandex.ru/ (рекомендую, оно забавно).
Результат выполнения каждого задания следует оформить отдельным файлом. Вашим
отчетом является архив со всеми выполненными заданиями.
1. Используя свойства background и color селектора body, установите цвет фона и
текста для всей веб-страницы. Тег style должен помещаться внутри тега head.
<style>
body {
color: #ffcc66; /* Цвет текста */
background: #ffffa0; /* Цвет фона */
}
</style>
Обратите внимание на синтаксис описания стилей:
селектор {
свойство: значение;
свойство: значение;
} /* необязательный комментарий */
2. Замените цвета на более подходящие по Вашему мнению. Цвет кодируется
следующим образом: #rrggbb, где rr – шестнадцатеричный код красной
составляющей, gg – зеленой, bb – синей. Соотвественно темно-зеленый
можно представить как #009100, и так далее.
3. Дополните описание стилей селектором p, указав для абзацев другой цвет:
<style>
p {
background: #a0ffa0;
}
</style>
4. Обратите внимание на наследование: цвет фона абзаца изменился, цвет текста
абзаца остался тем же, который был задан для всей страницы.
5. Для выделения отдельных участков внутри абзаца и придания им определенных
стилей существует HTML-тег <span>. Дополнительно указывается атрибут class
или id, который идентифицирует один или несколько таких блоков.
Пример, в котором реализована возможность задания «букцвицы»:
<style>
body {
font-family: Arial, sans-serif; /* Рубленая гарнитура */
}
.letter {
color: red; /* Красный цвет символов */
font-size: 200%; /* Размер шрифта в процентах */
font-family: serif; /* Гарнитура с засечками */
position: relative; /* Относительное позиционирование */
top: 5px; /* Положение до верхнего края родительского
элемента */
}
</style>
………
<p><span
class="letter">Э</span>лектрон
отражает
гравитационный эксимер - все дальнейшее далеко выходит за
рамки текущего исследования и не будет здесь рассматриваться.
Лазер, как того требуют законы термодинамики, немагнитен.
Исследователями
из
разных
лабораторий
неоднократно
наблюдалось, как взвесь испускает межатомный фотон, тем самым
открывая возможность цепочки квантовых превращений. Изолируя
область наблюдения от посторонних шумов, мы сразу увидим, что
примесь волнообразна.p>
<p>Яндекс.Рефераты</p>
6. Для группировки блочных элементов существует тег <div>. Так же, как и span, без
использования классов и стилей не влияет на отображение документа и потому без
них бесполезен.
Создайте документ, содержащий 6 абзацев. Задайте для первых двух и последних
двух один и тот же класс (например, big_letters), для третьего и четвертого –
второй класс (например, small_letters). Используя свойство font-size,
установите соответствующие наименованиям класса размеры шрифта.
7. Используя справочник и свойства border, padding и margin, поэкспериментируйте с
отступами, полями и границами. Установите различные значения для отдельных
классов.
Этап II.
Верстка.
На этом этапе мы познакомимся с современным подходом – блочной версткой.
Фактически блок – это отдельный элемент документа (как правило, обозначенный тегом div
с указанием имени класса) и соответствующим позиционированием.
1. Фиксированные элементы определяются с помощью свойства fixed и указания
расположения. Рассмотрите пример:
<style type="text/css">
#content {
width: 500px; /* Ширина блока */
margin: 0 auto 50px; /* Выравнивание по центру */
}
#footer {
position: fixed; /* Фиксированное положение */
left: 0; bottom: 0; /* Левый нижний угол */
padding: 10px; /* Поля вокруг текста */
background: #39b54a; /* Цвет фона */
color: #fff; /* Цвет текста */
width: 100%; /* Ширина блока */
}
<div id="content">
Атом притягивает ультрафиолетовый лазер, и это неудивительно,
если вспомнить квантовый характер явления. Течение среды, в
рамках ограничений классической механики, пространственно
поглощает ультрафиолетовый лептон, генерируя периодические
импульсы
синхротронного
излучения.
Поверхность
тормозит
электрон, генерируя периодические импульсы синхротронного
излучения. Взвесь масштабирует коллапсирующий поток при любом
их взаимном расположении. Возмущение плотности масштабирует
тахионный атом, хотя этот факт нуждается в дальнейшей
тщательной
экспериментальной
проверке.
Гамма-квант
неустойчиво
восстанавливает
луч
даже
в
случае
сильных
локальных возмущений среды.
</div>
<div id="footer">
Реферат по физике
</div>
2. Измените предыдущий пример так, чтобы добавился неперемещаемый заголовок в
верхней части страницы.
3. Размещение блоков рядом по горизонтали. Пусть нам необходимо разделить
страницу на две части, где первая часть имеет фиксированный размер (например,
для навигации). Вот пример:
<style>
.layer1 {
background-color: #fc0; /* Цвет фона блока */
padding: 5px; /* Поля вокруг текста */
float: left; /* Обтекание по правому краю */
width: 200px; /* Ширина блока */
}
.layer2 {
background-color: #c0c0c0; /* Цвет фона блока */
padding: 5px; /* Поля вокруг текста */
width: 300px; /* Ширина блока */
float: left; /* Обтекание по правому краю */
}
.clear {
clear: left; /* Отмена обтекания */
}
<div class="layer1">
первая колонка
</div>
<div class="layer2">
вторая колонка
</div>
<div class="clear"></div>
<p>колонки закончились</p>
4. Замените текст в предыдущем примере на что-то более приемлемое. Например,
реферат от Яндекса по физике. Обратите внимание на пустой элемент <div
class="clear"> - он необходим для отмены обтекания.
5. Создайте макет сайта с заголовком, левой колонкой для навигации, правой
колонкой для содержимого и завершающим элементом.
1/--страниц
Пожаловаться на содержимое документа