Сегодня мы будем учиться задавать свойства блоков. И делать это мы будем на примерах элементов div и span.
div - этот элемент является контейнером для остальных. Элемент div отделяется от остальных
элементов абзацными отступами. Элемент span, в отличии от div, создает строчный блок.
Посмотрим на примере, создайте html-страницу со следующим кодом:
Заголовок документа
Это текст в тегах div с id="first".
Это текст в тегах div с id="third".
Это текст в тегах div с id="fourth".
Посмотрите на нашу страницу в браузере:
Как видите, содержимое тегов div располагается с абзацным отступом, т.е. одно под другим. На примере этой страницы
мы и будем рассматривать свойства блоков.
Border (граница)
Границы в css можно задавать отдельно для каждой стороны:
border-top - верхняя граница.
border-right - правая граница.
border-bottom - нижняя граница.
border-left - левая граница.
Каждый сегмент границы может иметь свои характеристики: цвет, толщину и тип линии.
Для этого к свойству границы через дефис необходимо дописать ключевые слова : color (для цвета), width (для толщины) и style (для типа линии).
Например, border-top-color определяет цвет верхней границы, а border-left-style -
тип линии для левой границы.
Если все четыре границы будут иметь одинаковые значения, то следует воспользоваться сокращенной записью:
border-color - цвет всех границ.
border-width - толщина всех границ.
border-style - стиль всех границ.
Значениями свойства color могут быть именные цвета (red, blue и т.д.), шестнадцатеричные коды цветов (типа #FFCCFF) и
десятичные коды в модели RGB (типа rgb(255, 0, 0)).
Значениями свойства width могут быть ключевые слова: thin (тонкая граница), medium (средняя граница) и thick
(толстая граница). А также любая единица измерения.
Значениями свойства style могут быть следующие ключевые слова:
none - граница отсутствует.
dotted - граница состоит из точек.
dashed - граница в виде пунктирной линии.
solid - граница отображается сплошной линией.
double - граница отображается двойной сплошной линией.
groove - граница отображается вдавленной объемной линией.
ridge - граница отображается выпуклой объемной линией.
inset - граница отображается так, что весь блок выглядит вдавленным.
outset - граница отображается так, что весь блок выглядит выпуклым.
В браузере разные стили границ выглядят так:
Давайте зададим нашему первому div-у разные границы, чтобы посмотреть, как это работает:
Иногда возможность задавать стили для разных секторов границы очень выручает, но чаще требуется задать единый стиль для всех
границ и тогда удобнее пользоваться сокращенной записью border, в которой через пробел указываются: толщина, тип и цвет (именно в таком
порядке).
Давайте для всех элементов нашей страницы зададим один стиль границ, чтобы было удобнее разбираться с отступами
и полями далее:
Сейчас, если посмотреть на нашу страницу в браузере,
то мы увидим наложение границ разных элементов друг на друга. Это происходит
потому, что еще не заданы поля элементов.
Margin (поля)
Как вы помните, поля задают свободное пространство вокруг элемента. Как и границы, поля в css можно определять отдельно для верхней,
правой, нижней и левой сторон. Для этого используются свойства:
margin-top - ширина верхнего поля.
margin-right - ширина правого поля.
margin-bottom - ширина нижнего поля.
margin-left - ширина левого поля.
Чаще используется сокращенная запись margin, где через пробел указываются ширина верхнего, правого, нижнего
и левого полей. Причем, именно в таком порядке. Пример записи:
p{
margin:5px 10px 15px 10px;
}
Если значения верхнего и нижнего полей совпадают, и значения правого и левого полей совпадают, то сокращенная запись выглядит
еще короче:
p{
margin:5px 10px;
}
В данном случае ширина верхнего и нижнего полей будет 5 пикселов, а правого и левого - по 10 пикселов.
Если же у всех полей ширина одинакова, то сокращенная запись выглядит так:
p{
margin:5px;
}
Значения полей можно задавать и в других единицах длины, и в процентах. Также величина значения может иметь отрицательное значение,
что в некоторых случаях очень удобно использовать. Давайте для нашего примера зададим всем элементам
одинаковую ширину полей - в 10 пикселов:
Обратите внимание текст в самих элементах прижат к границам, чтобы это исправить, давайте зададим ему отступы.
Padding (отступы)
Как вы помните, отступы позволяют отделить содержимое блока от границы. Параметры отступов в css можно задать для каждой стороны
отдельно, используя следующие свойства:
padding-top - ширина верхнего отступа.
padding-right - ширина правого отступа.
padding-bottom - ширина нижнего отступа.
padding-left - ширина левого отступа.
Значения свойств могут задаваться в различных единицах длины или в процентах. Проценты вычисляются относительно ширины блока.
В качестве значения может выступать только положительная величина.
Как и с полями чаще удобнее использовать сокращенную запись, которая аналогична записи для полей.
Давайте зададим для элементов нашей страницы отступы: сверху и снизу - по 10 пикселов, а справа и слева - по 5 пикселов.
Теперь наша страница в браузерах Opera, FireFox и Chrome выглядит так:
А в IE вот так:
Но мы задали ширину у всех блоков одинаковую, почему же тогда в IE блок с id="second" шире первого блока? Да потому, что IE
не включает в размер блока поля и отступы. Браузер отобразил 3 и 4 блоки шириной в 300 пикселов, а потом задал им поля и
отступы, именно на это количество пикселов наш второй блок и шире первого. А остальные браузеры делают наоборот. Исправим это так, чтобы
во всех браузерах было одинаково:
Вообще разное отображение свойства margin в разных браузерах держите в голове, так как при верстке сайта оно используется обязательно,
а вот отображаться может по-разному.
Собственно мы рассмотрели все способы задания полей, отступов и границ. Как всегда в конце урока добавим то, что уже
изучили, например, так:
Надо сказать, что сегодня мы затронули основы блочной верстки сайта. Поэтому хорошенько разберитесь с полями, отступами и границами,
чтобы в дальнейшем это не вызывало трудностей.