10_laba
advertisement
ПГУТИ
Отчет по лабораторной работе №10
Применение каскадных таблиц стилей CSS
Выполнил:
студент группы ИТ-71
Самара 2010
Задание 1
Создайте каталог /css/
Создайте в нем файл main.css
Подключите его ко всем страницам сайта с помощью тега <LINK>.
Задайте по умолчанию следующие параметры для всех страниц (переопределив тег
<body>):
- цвет фона
- размер шрифта
- цвет шрифта
- семейство шрифта (например Arial)
5. Проверьте работоспособность.
6. В комментариях (в файле main.css) поясните эти параметры.
1.
2.
3.
4.
Листинг файла main.css:
body
{
background-color: #FFFAAA; /*цвет фона*/
text-size: 16pt;
/*размер шрифта*/
color: #002200;
/*цвет текста*/
font-family: Arial; /*Шрифт arial*/
}
Задание 2
1. Задайте по умолчанию следующие параметры для всех абзацев (переопределив тег
<p> и псевдоклассы тега <p>):
- выравнивание абзаца
- отступ красной строки
- размер и цвет первой буквы
2. Проверьте работоспособность.
3. В комментариях (в файле main.css) поясните эти параметры.
Листинг файла main.css:
p
{
text-align: left;
/*выравнивание*/
text-indent: 20pt; /*отступ в 50 пунктов*/
}
p:first-letter
{
font-size: 22pt;
color: #FF0000;
}
/*размер 1-й буквы*/
/*цвет первой буквы*/
2
Задание 3
1. Задайте по умолчанию следующие свойства ссылок для всех страниц:
- цвет и оформление ссылки
- цвет и оформление посещенной ссылки
- цвет и оформление активной ссылки
- цвет и оформление ссылки, в момент нахождения курсора мыши над ней
2. Проверьте работоспособность.
3. В комментариях (в файле main.css) поясните эти параметры.
Листинг файла main.css:
a:link {
color: #DD0000;
}
/*цвет ссылки*/
a:visited {
color: #00AA33;
}
/*посещенная ссылка зеленого цвета*/
a:active {
color: #00CC33;
}
/*активная ссылка*/
a:hover
{
color: #AAAA11;
text-decoration: none;
}
/*цвет ссылки при наведении*/
/*не подчеркнутые*/
Вывод: в данной работе я ознакомился с базовыми приемами css, которые мне
позволили гибко задать оформление создаваемых мною html-страниц, изучив теорию,
выполнил предложенные задания, тем самым закрепив теорию на практике
3
