Внешние и внутренние отступы в CSS.

Отступы

Оступы создают пространство вокруг содержания (внутри границы) элемента. На отступы влияет цвет фона элемента.

Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все отступы одновременно.

Возможные Значения

Длина: определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.)

%: определяет отступ в % от элемента-контейнера

В CSS можно указать различные отступы для разных сторон:

Примерpadding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

Чтобы укоротить код, можно указать все свойства отступов в одном свойстве. Оно называется стенографическим (сокращенным) свойством - "padding":

padding:25px 50px;

 

Свойство padding может иметь от одного до четырех значений.

padding:25px 50px 75px;

верхний отступ 25px

правый и левый отступы по 50px

нижний отступ 75px

 

 

Поля

Поле очищает пространство вокруг элемента (за пределами границы). Поля не имеет цвета фона и является полностью прозрачным.

 

Верхнее (top), правое (right), нижнее (bottom) и левое (left) поля могут изменяться независимо, используя различные свойства. Стенографическое свойство полей (margin) также может быть полезно, чтобы изменить все поля одновременно.

Возможные Значения

Auto: браузер устанавливает поля. Результат этого значения зависит от браузера

Длина: определяет фиксированное поле (в пикселях, пунктах, единицах em, и т.д.)

%: определяет поле в % от содержащего элемента

 

Можно использовать отрицательные значения, чтобы частично перекрыть содержание.

 

В CSS можно указывать различные поля для разных сторон:

Примерmargin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

 

Чтобы сократить код, можно указать все свойства полей в одном свойстве.оно называется стенографическим свойством - "margin":

margin:100px 50px;

 

Свойство margin может иметь от одного до четырех значений.

margin:25px 50px;

верхнее и нижнее поля равны по 25px

правое и левое поля равны по 50px

 

Позиционирование с помощью CSS.

CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.

Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.

Существует четыре различных метода позиционирования.

Статическое позиционирование

HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.

Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.

Фиксированное Позиционирование

Элемент с фиксированным положением позиционирован относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается:

Пример:

p.pos_fixed

{

position:fixed;

top:60px;

right:5px;

}

Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE.

Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, будто фиксированно расположенный элемент не существует.

Зафиксированные элементы могут перекрывать другие элементы.

 

Относительное позиционирование

Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.

Пример:

h2.pos_left

{

position:relative;

left:-20px;

}

Содержание относительно позиционированных элементов может быть сдвинуто и перекрываться с остальными элементами, однако зарезервированное пространство для элемента по прежнему остается в обычном потоке элементов.

Пример:

h2.pos_top

{

position:relative;

top:-50px;

}

Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных элементов.

 

Абсолютное Позиционирование

Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается <html>:

Пример:

h2

{

position:absolute;

left:100px;

top:150px;

}

Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.

Абсолютно расположенные элементы могут перекрывать другие элементы.

 

Перекрытие Элементов

Когда элементы расположены вне стандартного потока, они могут перекрывать другие элементы.

Свойство z-index указывает вертикальный порядок элемента (какой элемент должен быть помещен спереди, или сзади других элементов).

Элемент может иметь положительный или отрицательный вертикальный порядок:

Пример:

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

Элемент с большим вертикальным порядком всегда находится впереди элементы с меньшим вертикальным порядком.

Замечание: Если два позиционированных элементы перекрываются и не указан вертикальный порядок, элемент расположенный позже в HTML коде будет показан сверху.

 

Управление видимостью объекта в CSS.

Свойство display указывает отображать ли элемент и как его отображать, а свойство visibility указывает должен ли элемент быть видимым или нет.

Чтобы спрятать элемент, необходимо установить свойство display в "none" или установить свойство visibility в "hidden". Однако, эти два метода приводят к различным результатам:

 

visibility:hidden прячет элемент, но он будет по прежнему занимать то же место, что и прежде. Элемент будет спрятан, но будет по-прежнему влиять на компоновку страницы.

Пример: h1.hidden {visibility:hidden;}

display: none прячет элемент так, что он не будет занимать место на странице. Элемент будет спрятан, и страница будет отображаться, как будто на ней вовсе нет этого элемента:

Пример: h1.hidden {display:none;}

 

Графика с помощью CSS.

С CSS3 мы можем создавать анимацию, которая может заменить анимированные изображения, Flash анимацию и скрипты JavaScript во многих случаях.

Правило @keyframes используется для создания анимации. Укажите CSS стиль внутри правила @keyframes и анимация будет воспроизводиться, плавно изменяя текущий стиль на новый.

Поддержка Браузерами

Internet Explorer и Opera пока еще не поддерживают правило @keyframes и свойство animation.

Firefox требует приставки -moz-, тогда как Chrome и Safari требуют приставки -webkit-.

Пример:

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari и Chrome */

{

from {background: red;}

to {background: yellow;}

}

 

CSS3 свойство animation

Когда анимация создана в правиле @keyframe, привяжите ее к селектору, иначе анимация не произведет эффекта.

 

Привязка анимации к селектору осуществляется указанием по крайней мере двух следующих свойств CSS3 анимации:

Указание названия анимации

Указание продолжительности анимации

Пример

 

Привязка анимации "myfirst" к элементу div, продолжительность: 5 секунд:

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s; /* Firefox */

-webkit-animation: myfirst 5s; /* Safari и Chrome */

}

Замечание: Вы должны определить название (имя) и продолжительность анимации. Если продолжительность пропущена, анимация не запустится, так как значение по умолчанию равно 0.

 

Анимация - это эффект, который позволяет элементу плавно изменять один стиль на другой.

Вы можете изменять столько стилей, сколько захотите, и столько раз, сколько вам заблагорассудится.

Укажите, когда должно произойти изменение в процентах (от общей продолжительности одного цикла), или ключевые слова "from" и "to", которые обозначают 0% и 100% соответственно.

0% - это начало анимации, 100% - это завершение (когда анимация полностью завершена).

Пример

Изменить цвет фонаи положение, когда анимация завершена на 25%, 50% и снова, когда анимация будет полностью (на 100%) завершена: @keyframes myfirst

{

0% {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

 

CSS3 Animation Properties

Ниже перечислены все свойства анимации:

@keyframes: определяет анимацию

Animation: стенографическое (сокращенное) свойство для всех свойств анимации, за исключением свойства animation-play-state

animation-name: указывает название анимации @keyframes 3

animation-duration: указывает, сколько секунд (миллисекунд) требуется для завершения одного полного цикла анимации. По умолчанию 0

animation-timing-function: описывает, как будет изменяться скорость проигрывания анимации в течение одного цикла. Default "ease"

animation-delay: указывает, когда начнется анимация (задержка анимации). По умолчанию 0

animation-iteration-count: указывает, сколько раз будет воспроизводиться анимация. По умолчанию один раз

animation-direction: указывает, будет или нет анимация проигрываться в обратном направлении (от конца к началу) на четных циклах воспроизведения. По умолчанию равно "normal"

animation-play-state: указывает, запущена анимация или на паузе. Значение по умолчанию "running"

 

Оформление таблиц с помощью CSS.

Вид HTML таблицы может быть значительно улучшен с помощью CSS.

Чтобы указать границы таблиц в CSS, используйте свойство border.

Пример ниже указывает черную границу для элементов table, th, и td:

Пример

table,th,td

{ border:1px solid black; }

Таблица в примере выше имеет двойные границы, потому, что как элемент table, так и элементы th/td - имеют отдельные границы.

 

Свойство border-collapse устанавливает, будут ли границы таблицы свернуты в одинарную границу, или будут отображаться отдельно:

Пример

table

{ border-collapse:collapse; }

table, td, th

{ border:1pxsolidblack;}

 

Ширина и высота таблицы определяются с помощью свойств width и height.

Пример ниже устанавливает ширину таблицы в 100%, и высоту элементов th в 50px:

Пример

table

{ width:100%; }

th

{ height:50px; }

 

Текст в таблице выравнивается с помощью свойств text-align и vertical-align.

Свойство text-align указывает горизонтальное выравнивание, например, по левому краю (left), по правому краю (right), или по центру (center):

Пример

td

{text-align:right;}

 

Свойство vertical-align устанавливает вертикальное выравнивание, например, по верху (top), по низу (bottom), или по середине (middle):

Пример

td

{ height:50px;

vertical-align:bottom; }

 

Свойство Padding Таблицы

Чтобы контролировать пространство между границей и содержанием в таблице, используйте свойствоuse padding в элементах td и th:

Пример

td

{ padding:15px;}

 

Цвет Таблицы

Пример ниже указывает цвет границ, текста и фона элементов th:

Пример

table, td, th

{ border:1px solid green; }

th

{ background-color:green;

color:white; }

 

Оформление списков с помощью CSS.

CSS свойства списка позволяют вам:

-Устанавливать различные маркеры пунктов списка для упорядоченных списков

- Устанавливать различные маркеры пунктов списка для неупорядоченных списков

-Устанавливать изображение в качестве маркера пункта списка

В HTML существует два типа списков:

- неупорядоченные списки - пункты списка помечаются маркерами

- упорядоченные списки - пункты списка помечаются числами или буквами

 

С помощью CSS списки могут быть оформлены лучшим образом, и изображения могут использоваться в качестве маркеров для пунктов списка.

 

Тип маркера для пункта списка указывается с помощью свойства list-style-type:

Пример

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

Некоторые значения свойства list-style-type для неупорядоченных списков, и некоторые - для упорядоченных.

 

Чтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image:

Пример

ul

{ list-style-image:url('sqpurple.gif'); }

 

Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.

 

Следующий пример отрисовывает изображение-маркер одинаково во всех браузерах:

Пример

ul{

list-style-type:none;

padding:0px;

margin:0px;

}

li{

background-image:url(sqpurple.gif);

background-repeat:no-repeat;

background-position:0px 5px;

padding-left:14px;

}

Объяснение примера:

Для ul:

-Установка list-style-type в none - чтобы удалить маркер пункта списка

-Установка свойств padding и margin в 0px (для кросс-браузерной совместимости)

Для li:

-Установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз)

-Позиционирование изображения в желаемом месте (влево на 0px и вниз на 5px)

-Установка левого отступа для текста в списке

 

Также можно указать все свойства списка в одном - одиночном свойстве. Оно называется стенографическим (или сокращенным) свойством - list-style:

ul

{ list-style:squareurl("sqpurple.gif"); }

При использовании стенографического свойства порядок значений таков:

list-style-type

list-style-position

list-style-image

 

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

 

Все CSS Свойства Списка:

list-style: устанавливает все свойства списка в одном объявлении

list-style-image: устанавливает изображение в качестве маркера пункта списка

list-style-position: указывает, должны ли маркеры пункта списка появляться внутри или снаружи содержания

list-style-type: указывает тип маркера пункта списка

 

Плавающие элементы в CSS.

С помощью CSS плавающий элемент может быть вставлен слева или справа, позволяя другим элементам "оборачиваться" вокруг него.

Элементы плавают горизонтально, это означает, что элемент может плавать только слева или справа, но не снизу или сверху.

Плавающий элемент будет помещен влево или вправо настолько, насколько это возможно.

Элементы после плавающего элемента будут обтекать вокруг него.

Элементы до плавающего элемента не будут подвержены воздействию.

Если изображение плавает справа, следующий за ним текст будет пристыкован слева от него:

Пример

img

{ float:right;}

 

Если вы располагаете несколько плавающих элементов друг за другом, они будут "плавать" друг за другом, если позволяет пространство.

Здесь мы сделали галерею изображений, используя свойство float:

Пример

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

 

Элементы после плавающего элемента будут "плавать" вокруг него. Чтобы избежать этого, используйте свойство clear.

Свойство clear указывает, какие стороны элемента запрещены к воздействию других плавающих элементов.

Добавим строку текста к галерее изображений, используя свойство clear:

Пример

.text_line

{

clear:both;

margin-bottom:2px;

}