Поделиться
104. Каскадные таблицы стилей CSS.doc
Лабораторная работа №3. Каскадные таблицы
стилей CSS
(4 часа)
Цель работы:
Изучить основы каскадных таблицы стилей CSS 3.
Задание:
Изменить html-документ, полученный в результате выполнения лабораторной работы №2 «Создание статического html-документа», изменив в нем с помощью каскадных таблиц стилей:
- текст (шрифт, размер, цвет, поля, обрамление);
- гиперссылки (цвет непосещенных и посещенных ссылок);
- документ (фон);
- список (маркеры или нумерацию);
- таблицу (границы, фон).
Использовать определение стилей для тегов и классы стилей, псевдоклассы.
Использовать три способа определения каскадных таблиц стилей:
- с помощью тега <link>;
- с помощью тега <style>;
- с помощью параметра style тега.
Продемонстрировать действие приоритетов при применении различных способов определения CSS;
Создать два слоя, частично перекрывающих друг на друга.
Создать изображение в соответствии с вариантом, используя только свойства CSS.
|
Вариант 1: |
Вариант 6: |
|
|
|
|
Вариант 2: |
Вариант 7: |
|
|
|
|
Вариант 3: |
Вариант 8: |
|
|
|
|
Вариант 4: |
Вариант 9: |
|
|
|
|
Вариант 5: |
Вариант 10: |
|
|
|
Порядок выполнения лабораторной работы:
1. Запустить текстовый редактор.
2. Изменить с помощью каскадных таблиц стилей html-документ в соответствии с заданным вариантом. Для справки о свойствах и их значениях можно использовать справочник, расположенный по адресу http://htmlbook.ru.
3. Протестировать созданный документ в браузере.
Содержание отчета (отчет в электронном виде):
- отчет сохранить в файле с именем АВТ-000 Иванов (лр3).doc;
- титульный лист (образец можно скачать по адресу http://ermak.cs.nstu.ru/webprog/wp_labwork_title_page.doc);
- цель работы;
- задание;
- порядок выполнения лабораторной работы
- код созданного html-документа, включая созданные стили;
- скриншот html-документа;
- выводы по работе.
Теоретические сведения
Каскадные таблицы стилей CSS (Cascading style sheets) — формальный язык описания внешнего вида документа, созданного с использованием языка разметки гипертекста.
Каскадные таблицы стилей позволяют разделить описание логической структуры html-документа (выполненное с помощью языка разметки) и описание внешнего вида html-документа (выполненное с помощью CSS).
Существует три способа определения стилей: 1) в отдельном файле, подключаемом к html-документам, 2) с помощью тега <style> непосредственно в некотором html-документе и 3) с помощью атрибута style непосредственно в некотором теге.
Наиболее высокий приоритет имеет стиль, определенный в теге, затем следует определение стиля с помощью тега style и самым низким приоритетом обладают свойства, определенные в отдельном файле.
Каскад приоритетов особенно удобен при разработке больших проектов, например, сайтов, состоящих из большого числа html-документов. В этом случае общее оформление может быть вынесено в отдельный файл, в html-документе могут быть внесены изменения в стиль документа с помощью тега <style>, атрибут тега style позволяет изменить оформление одного тега.
Стили определяются парами свойств и значений, перечень пар заключается в фигурные скобки и пары разделяются точкой с запятой:
{property_1:value_1; property_2:value_2; … ; property_n:value_n}
где property — это свойство, а value — значение свойства.
Стиль можно определить для конкретного тега, например, задать для тега <body> отображение белого текста на черном фоне:
body
{background-color:black; color:white}
Можно определить «чистый» стиль, не привязанный заранее к конкретному тегу, в этом случае речь идет об определении класса стиля:
.small_silver
{font-size:10px; color:silver}
или
#big_gold
{font-size:150px; color:#D7B56D}
Применение класса стиля:
<p class=small_silver>Текст светло-серого цвета размером 10 пиксел</p>
или
<p id=big_gold>Текст светло-желтого цвета размером 150 пиксел</p>
Описание стилей для тегов или классов стилей выполняется одинаково как в отдельном файле, так и в теге <style>.
Файл со стилями должен иметь расширение *.css и быть подключен к html-документу с помощью тега <link>, расположенного в теге <head>.
<link href=”style.css” rel=”stylesheet” type=”text/css”>
Тег <style> также должен быть расположен в теге <head>, после тега <link>.
Стили, определяемые непосредственно в теге с помощью атрибута style:
<p style=”text-decoration-line:underline; color:rgb(255,0,0)”>Подчеркнутый текст красного цвета</p>
Возможно задание различных стилей отображения одного и того же html-документа в различных средах представления, например, на экране или печати с помощью атрибута media тега <link>.
Файл screen.css
body
{color:silver; background:black}
.forprint
{display:none}
Файл print.css
body
{color:black; background:white}
.forscreen
{display:none}
Файл media.html
<html>
<head>
<link href=”screen.css” rel=”stylesheet” type=”text/css” media=”screen”>
<link href=”print.css” rel=”stylesheet” type=”text/css” media=”print”>
</head>
<body>
<h1>Версия для <i class=forscreen>экрана</i><i class=forprint>печати</i></h1>
<div class=forscreen>Изображение будет видно на экране:
<p><img src=css3.jpg height=200px>
</div>
<div class=forprint><b>Внимание!</b> В версии для печати изображения нет.</div>
</body>
</html>
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
