 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Практическая работа №3. «Работа с каскадными таблицами стилей»
Практическая работа №2
«Работа с каскадными таблицами стилей»
Цели:
1. научиться работать с каскадными таблицами стилей;
2. изучить основные методы работы с CSS, селекторы, атрибуты.
Задание
Оформить подготовленный структурированный гипертекст, представленный в файле index.html в соответствии со стилем представленным на рисунке index.bmp
При выполнении работы допускается использовать «песочницу» http://cssdesk.com/
и справочник http://htmlbook.ru/css
Для подробного освоения темы по «margin» и «padding» рекомендуется прочитать:
http://habrahabr.ru/blogs/css/121810/
http://habrahabr.ru/blogs/css/123250/
Исходный HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "style.css";
</style>
</head>
<body>
<div class="content">
<div class="toph"></div>
<div class="right">
<div class="title">GREY</div>
<div class="nav">
<ul>
<li><a href=#>HOME</a></li>
<li><a href=#>ARTICLES</a></li>
<li><a href=#>GALLERY</a></li>
<li><a href=#>AFFILIATES</a></li>
<li><a href=#>SUPPORT</a></li>
<li><a href=#>CONTACT</a></li>
</ul>
</div>
<h2>Top Articles:</h2>
<ul>
<li><a href=#>NoHeader Template</a></li>
<li><a href=#>Consectetuer adipiscing elit</a></li>
<li><a href=#>Lorem ipsum dolor sit amet</a></li>
<li><a href=#>dolor sit amet consectet</a></li>
</ul>
<hr />
<h2>Links</h2>
<ul>
<li><a href=#>any.com</a></li>
<li><a href="htmlbook.ru/samcss">htmlbook.ru/samcss</a></li>
</ul>
<hr />
</div>
<div class="center">
<h2><a href=#>Try sNews 1.4!</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, <a href=#>turpis at tincidunt</a> porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros. Curabitur porttitor ante non est. Maecenas dolor. Aenean egestas sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed suscipit, nisi sit amet pharetra malesuada, sem velit laoreet sem, vitae iaculis diam neque consequat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt eros non quam. Mauris a magna sit amet libero accumsan auctor. Aenean nec urna non dui lobortis viverra...
<p class="date">Posted by Avenir <img src="more.gif" alt="" />
<a href=#>Read more</a> <img src="comment.gif" alt="" />
<a href=#>Comments (2)</a> <img src="timeicon.gif" alt="" /> 21.02.</p>
<br />
<h2><a href=#>Heading Item</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer euismod ante non diam. Sed eleifend odio sed quam. Sed vulputate, <a href=#>turpis at tincidunt</a> porttitor, est elit consequat metus, non dignissim augue mauris quis arcu. Phasellus faucibus blandit eros.
<p class="date">Posted by James <img src="more.gif" alt="" />
<a href=#>Read more</a> <img src="comment.gif" alt="" />
<a href=#>Comments (7)</a> <img src="timeicon.gif" alt="" /> 18.01.</p>
<br />
<div class="boxad"> Your Ads here...sNews is a completly free PHP and MySQL driven tool for publishing and maintaining news articles on a website.</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Требуемый стиль:
Ход работы
1. Для селектора «body»:
- установить цвет фона тела страницы #7D8085 используя свойство «background» селектора «body»;
- установить шрифт тела страницы 74% Arial, Sans-Serif используя свойство «font»;
2. Для селектора (класса) «.toph»:
- установить неповторяющийся фоновый рисунок «top.jpg», без полей, высотой 39px, с выравниванием по центру используя свойства «background», «height», «margin», «padding»;
3. Для селектора (класса) «.content»:
- установить повторяющийся фоновый рисунок «bg.jpg», без полей, шириной 800px, с выравниванием по центру используя свойства «background», «width», «margin», «padding»;
4. Для селектора (класса) «.title»:
- установить неповторяющийся фоновый рисунок «logo.jpg» c выравниванием по левой стороне используя свойство «background»;
- с полями от верхнего края 10px, от левого 40px, высотой 28px используя свойства «height», «padding»;
- установить размер шрифта 140%, полужирный, цвет #F29900 используя свойство «font»;
5. Для селектора (класса) «.right»:
- установить обтекание слева используя свойство «float»;
- с отступом от правого края 15px, и полем от правого края 1em используя свойства «margin», «padding»;
- установить размер шрифта 95%, полужирный, используя свойство «font»;
- установить ширину слоя 170px, используя свойство «width»;
6. Для селектора (класса) «.footer»:
- установить запрет на обтекание одновременно с правого и левого края используя свойство «clear»;
- установить неповторяющийся фоновый рисунок «bot.jpg» c выравниванием по центру стороне используя свойство «background»;
- установить выравнивание текста по центру используя свойство «text-align»;
- установить высоту слоя в 37px, используя свойство «height»;
- установить автоматическую ширину слоя «auto», используя свойство «width»;
7. Для селектора (класса) «.center»:
- установить обтекание справа, используя свойство «float»;
- установить ширину слоя 530px, используя свойство «width»;
- установить размер шрифта 95%, полужирный, используя свойство «font»;
- установить цвет текста #FFF;
- установить поля и отступы соответственно «margin: 0px 0 5px 35px; padding: 0;»;
8. Установить цвет ссылок для центрального блока:
- цвет основной ссылки #F29900 используя селекторы «.center a»;
- цвет ссылки под курсором #FFF используя селекторы «.center a:hover»;
9. Установить для блока «date»:
- цвет основного текста #ccc
- выравнивание текста по правому краю, используя свойство «text»
- поля и отступы соответственно «margin: 4px 0 5px 0; padding: 0.4em 0 0 0;»
- верхнюю границу блока толщиной в 1px цветом #555, используя свойство «border»;
10. Установить цвет ссылки в #ccc, используя свойство «color» селектора «.date a»;
11. Установить цвет ссылки в #7D8085, используя свойство «color» селектора «.right a»;
12. Установить цвет тегов параграфа и ссылок в #888, используя свойство «color» селекторов «p» и «а»;
13. Для селектора «а»:
- установить наследование фона, используя свойство «background» с параметром «inherit»;
- выключить стили текста, используя свойство «text-decoration»;
14. Для селектора «p» установить отступы и поля соответственно «margin: 0 0 5px 0; padding: 0;»
15. Для селектора «hr»:
- установить высоту 1px;
- установить основной и фоновый цвет в #eee;
- убрать «border»;
16. Для селектора заголовка «h1»:
- убрать отступы и поля;
- установить цвет в #FFF;
- установить жирный шрифт размера 1.8em, гарнитур Arial, Sans-Serif;
- установить наследование фона, используя свойство «background» с параметром «inherit»;
-установить свойство letter-spacing равным «-1px»;
17. Установить цвет для ссылок «а» находящихся в заголовке «h1» в #FFF, и установить для них наследование фона.
18. Для селектора заголовка «h2»:
- установить наследование цвета фона, используя свойство «background» с параметром «inherit»;
- установить отступы и поля согласно «margin: 10px 0 10px 0; padding:0;»
- установить основной цвет в #F29900;
- установить размер шрифта 140%, жирный;
19. Установить цвет для ссылок «а» находящихся в заголовке «h2» в #F29955. Для ссылок под курсором установить тот же цвет и убрать подчёркивание.
20. Применить стили элементов списка согласно инструкциям и вставить комментарии действия свойств:
ul { margin: 5px 0 20px 15px;
padding: 0;
list-style: none;
}
li { list-style-type: square;
color: #F29900;
margin: 0 0 0px 0;
padding: 0 0 0 0px;
}
li a { color: #7D8085; }
li a:hover { color: #F29900; }
21. Выполнить применение указанных стилей тремя методами: связанным, глобальным и внутренним
22. Дополнительно:
- рассмотреть работу базовых макетов построения сайта представленных в http://htmlbook.ru/layout
- ознакомиться с материалами статьи http://habrahabr.ru/blogs/css/126207/
Практическая работа №3
«Экспорт стилей и валидация»
Цели:
1. научиться экспортировать стили;
2. научиться структурировать документ.
Ход работы
Используя материал предыдущей работы выполнить следующее задание:
1. Сменить заголовок с «GRAY» на «CSS», подобрать логотип.
2. Перенести из учебника материал, по числу пунктов меню начиная с введения.
3. Выполнить хотя бы одно абсолютное и относительное позиционирование (http://ru.html.net/tutorials/css/lesson14.php).
4. Сделать хотя бы один плавающий блок – картинку (см. http://ru.html.net/tutorials/css/lesson13.php)
5. Сделать наслоение (http://ru.html.net/tutorials/css/lesson15.php)
6. Указать у всех используемых шрифтов родовые имена и объяснить зачем это нужно. (http://ru.html.net/tutorials/css/lesson4.php)
7. Выполнить экспорт стилей в файл и осуществить его подключение
8. Выполнить валидацию файла стиля (см. http://ru.html.net/tutorials/css/lesson16.php)
Поиск по сайту: