CSS Block model; Positioning Блочная модель; Позиционирование
CSS-Блочная/строчная модель n Строчные элементы <span> … </span> q n <P>текст обычный, <span style=“color: red”>красный</span>, обычный</P> Блочные элементы <div>…</div> q <div style=“text-align: center”> <p>Выровнен по центру</p> </div>
CSS-выравнивание n n Обтекание элемента float q q q n none - элемент не обтекается (по умолчанию). left – элемент cлева, обтекание справа. right - элемент справа, обтекание слева. сlear (запрещение обтекания) q q none - обтекание доступно со всех сторон (по умолчанию). left - элементов не должно быть слева right - элементов не должно быть справа both - элементов не должно быть справа и слева
CSS-Блочная модель (каждый элемент генерирует один или несколько прямоугольных* блоков) Отступ (Padding)
CSS-Блочная модель — рамка n n Рамка border-top-width, border-right-width, borderbottom-width, border-left-width q n p { border-top-width: 5 px } Краткая запись q p{ border-width: 2 px 1 px}
CSS-Блочная модель — рамка n n Цвет рамки border-top-color, border-right-color, borderbottom-color, border-left-color q n p { border-top-color: red} Краткая запись q p{ border-color: red blue}
CSS-Блочная модель — рамка n n Стиль рамки (если требуется рамка, то стиль задавать обязательно) border-top-style, border-right- style, border-bottom- style, border-left- style q n n p{ border-top-style: double; } Краткая запись border-style q p{ border-style: double, solid}
CSS-Блочная модель — рамка n n Краткие записи: border-top, border-right, border-bottom, border-left q n p{border-top: 1 px solid red; } border q p{border: 1 px solid red; }
CSS-Блочная модель — рамка n n Свойства рамки, аналогично border, но нельзя конкретизировать по сторонам. outline-width q n outline-style q n body{ outline-style: double; } outline-color q n body{outline-width: 10 px 30 px 5 px} body{ outline-color: red; } outline q body{outline: 1 px solid red}
CSS-Блочная модель — поля n n Поля margin-top, margin-right, margin-bottom, margin-left (ширина поля) q n p {margin-top: 10 px; } Краткая запись q q p {margin: 20 px 30 px 5 px; } h 1 {margin: 20 px; } h 2 {margin: 20 px 30 px 5 px; } h 3 {margin: 20 px 30 px; }
CSS-Блочная модель — внутренние отступы n n Отступы padding-top, padding-right, padding-bottom, padding-left q n n p {padding-top: 20 px; } Краткая запись padding q h 1{padding: 5 px 3 px; } *
CSS-Позиционирование n n Метод позиционирования position q q static - обычный элемент (по умолчанию). relative - задает смещение элемента от его обычного положения в документе. absolute - задает смещение элемента от положения родительского элемента (если родительский элемент так же имеет абсолютное позиционирование). fixed - задает смещение элемента от положения родительского элемента, (как в absolute), но положение элемента фиксируется и прокрутке окна не перемещается. * (не работает в IE до 8 -й версии) p {position: absolute}
CSS-Позиционирование n n n top, left right, bottom z-index (позволяет определить порядок блоков при наложении) q img {position: absolute; top: 20 px; left: 40 px; z-index: 3}
CSS-визуальное форматирование n Ширина (width) q n p {width: 260 px} Высота (height) q p {height : 10%}
CSS-визуальное форматирование n display (*) q q inline - строчный элемент. block - блочный элемент, …… none - отсутствие элемента.
CSS-визуальное форматирование n Переполнение (overflow) q q q n Видимость (visibility) q q q n visible – полное отображение содержимого (по умолчанию). hidden – отсекается часть. scroll - полосы прокрутки. visible - элемент видимый. collapse – (если не для табл. то = hidden) hidden - элемент не видимый, но для него выделяется место. Вырезаемая область (clip) q img {clip: rect(5 px 4 рх 2 рх 4 рх)}
Скачать презентацию CSS Block model Positioning Блочная модель Позиционирование
CSS-блочная модель, позиционирование.ppt