- •Лабораторная работа №2 Каскадные листы стилей css
- •Основные понятия
- •Основные css-свойства
- •Font - универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.
- •Height - устанавливает высоту блочных или заменяемых элементов.
- •Width - устанавливает ширину блочных или заменяемых элементов
- •Пример верстки с двумя колонками:
- •Cursor - устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
- •Эмуляция псевдокласса first-child в ie6
- •Порядок создания страниц сайта при помощи css
- •Каждый отчет должен содержать:
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
margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента/
Отступ от каждой границы можно устанавливать отдельно. Таким отступам соответствуют свойства margin-bottom, margin-left, margin-right, margin-top
padding - устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
Каждое поле можно устанавливать отдельно. Таким полям соответствуют свойства padding-bottom, padding -left, padding -right, padding -top
border-collapse - устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
border-collapse: collapse | separate
border-spacing - задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.
caption-side - определяет положение заголовка таблицы, который задается с помощью тега <caption>, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.
caption-side: top | bottom
table-layout - определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
table-layout: auto | fixed
