- •Лабораторная работа №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 - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента/
- •Пример верстки с двумя колонками:
- •Каждый отчет должен содержать:
Height - устанавливает высоту блочных или заменяемых элементов.
Max-height - устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
Max-width - устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width
Min-height - задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
min-width- устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.
IE, не понимает эти свойства css. Хак для блока с id “wrapper” выглядит так: А) Минимальная ширина 750px
#wrapper {
min-width: 750px;
width:expression(document.body.clientWidth < 750? "750px": "auto" );}
Б) Максимальная ширина 1220px, минимальная 750px
#wrapper {
min-width: 750px;
max-width: 1220px;
width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}
Более удобный хак Min-height
selector {
min-height:500px;
height:auto !important;
height:500px;}
Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width
overflow- управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
overflow:auto|hidden|scroll|visible
visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden - Отображается только область внутри элемента, остальное будет обрезано.
scroll - Всегда добавляются полосы прокрутки.
auto - Полосы прокрутки добавляются только при необходимости.
visibility- предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойствомdisplay.
visibility:visible|hidden|collapse
Width - устанавливает ширину блочных или заменяемых элементов
position- устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
position:absolute|fixed|relative|static
absolute- Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутамиleft, top, right и bottomотносительно края окна браузера.
fixed - По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрамиleft, top, right и bottomточке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
relative - Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottomизменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
static - Элементы отображаются как обычно. Использование параметров left, top, right и bottomне приводит к каким-либо результатам.
top, right, bottom, left- устанавливает положение верхнего, правого, нижнего, левого края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметраposition, он обычно принимает значениеrelative(относительное положение) илиabsolute(абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от края исходного положения элемента, а при абсолютном — относительно края окна документа.


z-index- любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибутz-index.
z-index: число |auto
