Свойства позиционирования

position: absolute | fixed | relative | static

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице

absolute – абсолютное позиционирование. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

fixed – фиксированное позиционирование. Положение элемента привязывается к указанной атрибутами left, top, right и bottom точке на экране и не меняет своего положения даже при прокрутке веб-страницы.

relative – относительное позиционирование. Положение элемента задается при помощи атрибутов left, top, right и bottom относительно его родителя.

static – статическое позиционирование. Элементы отображаются как обычно. Использование атрибутов left, top, right и bottom не приводит к каким-либо результатам.

top: значение | проценты | auto

left: значение | проценты | auto

right: значение | проценты | auto

bottom: значение | проценты | auto

z-index: число | auto

задаетразмещение перекрывающихся элементов по оси z.

width: значение | проценты | auto

только для элементов блокового уровня

height: значение | проценты | auto

только для элементов блокового уровня

Свойства блоков.

Для того, что бы описанные свойства корректно работали тег должен принадлежать блокового уров. Каждый тег при отображении представляется в виде прямоугольной области, состоящей из таких частей:

padding – поле, внутренний отступ, расстояние от содержимого до границы

border –граница, рамка

margin – внешний отступ, расстояние от содержимого до границы элемента

 

margin: значение

margin-top: значение

margin-bottom:значение

margin-left:значение

margin-right:значение

 

padding: значение

padding -top: значение

padding -bottom:значение

padding -left:значение

padding -right:значение

 

border-width: значение

border-left-width:значение

border-right-width:значение

border-top-width:значение

border-bottom-width:значение

 

border-color: цвет

border-left-color:цвет

border-right-color:цвет

border-top-color:цвет

border-bottom-color:цвет

 

border-style: стиль

border-left-style:стиль

border-right-style:стиль

border-top-style:стиль

border-bottom-style:стиль

border: border-width | border-style | color

Свойства списков.

Перечисленные ниже свойства применимы к тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

устанавливает тип маркера для списков.

Не может использоваться, если установлено значение list-style-image.

Тип	Пример	Тип	Пример
disc	·	decimal	1, 2, 3, ...
circle	o	lower-roman	i, ii, iii, ...
square	§	upper-roman	I, II, III, ...
		lower-alpha	a, b, c, ...
		upper-alpha	A, B, C, ...

list-style-image: none | url('путь к файлу')

загрузка маркера из файла.

 

list-style-position: inside | outside

определяет размещение маркера относительно текста.

outside — маркер вынесен за границу элемента списка

inside — маркер обтекается текстом

Пример.

<style>

.mylist span{

display: list-item;

margin-left: 20px;

list-style-image: url(file.png);

}

</style>

 

<div class="mylist">

<span>Пункт1</span>

<span>Пункт2</span>

<span>Пункт3</span>

<span>Пункт4</span>

</div>

 

 

Пример.

 

КР (30 минут):

1. Нарисовать структуру документа в виде дерева (5 минут).

2. По заданному CSS-файлу определить как будет отображаться заданный html-файл (7 минут).

3. Для заданного html-файла написать CSS-файл, описывающий указанное форматированое документа (8 минут).

4. Задания на применения классов, идентификаторов, правильность вложения и т.п. (10 минут)