- •Лабораторная работа №2 Каскадные листы стилей css
- •Основные понятия
- •Основные css-свойства
- •Font - универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.
- •Height - устанавливает высоту блочных или заменяемых элементов.
- •Max-height - устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
- •Max-width - устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width
- •Min-height - задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
- •Width - устанавливает ширину блочных или заменяемых элементов
- •Margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента/
- •Пример верстки с двумя колонками:
- •Каждый отчет должен содержать:
Пример верстки с двумя колонками:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример</title>
<style type="text/css">
.leftColumn {
width: 200px;
float: left;
background: #eb0505;
}
.rightColumn {
margin-left: 220px;
background: #050feb;
}
.rightColumn .block1, .rightColumn .block2 {
float: left;
width: 300px;
margin-right: 20px;
background: #ebde05;
}
.rightColumn .block3 {
background: #eb8105;
clear: both;
}
.container {
width: 100%;
display: table;
}
* html .container {
margin-left: -3px;
}
</style>
</head>
<body>
<div class="main">
<div class="leftColumn">
Lorem ipsum dolor sit amet, consLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mlum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait null
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mlum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait null
</div>
<div class="rightColumn">
<div class="container">
<p class="block1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mlum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait null
</p>
<p class="block2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostr
</p>
<div class="block3"> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div>
</div>
<div class="rasporka"></div>
</div>
</body>
</html>
Задание к лабораторной работе:
Изменить web-сайт, разработанный в лабораторной работе №1 применив в качестве оформления каскадные листы стилей к элементам HTML, идентификаторам и классам, составить сложные селекторы (более 3 уровней вложенности). Сайт должен содержать не менее 5 связанных через главное меню страниц.
Верстка страницы должна быть «резиновой» (фиксированные левая и/или правая колонки и растягивающийся по содержимому контейнер) и основана на элементах div(слоях).
Все созданные стили должны находиться во внешнем файле. Допускается применение стилей непосредственно в html-коде или инлайновых только там где это действительно необходимо.
Изменить цвета, шрифты, расположение элементов, применить форматирование текста, стили к спискам, отступы, поля и другое.
Минимизировать HTML-код, оставив только необходимые теги и атрибуты, убрав все устаревшие элементы и те, которые можно заменить при помощи технологииCSS.
Если понадобится, то применить CSSхаки.
Страницы должны быть кросс-браузерными.