СОДЕРЖАНИЕ

Как создать свой сайт Создать сайт
Основы Интернет : FTP HTTP хостинг Вводный курс
Создание сайтов : создать сайт Создание сайтов
Статьи о хостинге : платный бесплатный выделенный сервер Unix Все о хостинге
Учебник HTML Учебник HTML
Учебник CSS Учебник CSS
Учебник CGI : cgi-программирование : методы GET и POST Учебник CGI
Учебник php Учебник PHP
Учебник perl Учебник Perl
Раскрутка сайта : оптимизация кода ключевые слова индекс цитирования регистрация в поисковиках Раскрутка сайта
Заработок на сайте Заработок на сайте
Платёжные системы : rupay webmoney Платежи в сети
книги литература по html css xml flash java Dreamweaver Нужные книги

 

заработок для вебмастера
Заработок для начинающего вебмастера!

 


создать сайт // учебник CSS // блоки CSS

Блоки CSS

Свойства этой категории устанавливают параметры блоковых элементов (см. страницу "Модель форматирования"). Среди них можно выделить три больших группы, формирующих блоки полей, границ и отступов, причём группу, работающую с границей, можно подразделить ещё на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Все эти группы отличает то, что в них включены свойства для задания параметров верхних, нижних, правых, левых и одновременно всех четырёх частей соответствующих блоков форматирования элемента.

Совет
При знакомстве со свойствами блоковых элементов желательно им6еть перед глазами схему параметров форматирования блоковых элементов. Чтобы открыть её (рисунок в формате .bmp) в новом окне кликните тут.

В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырёх параметров поля элемента.

Ширина соответствующих полей задаётся значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0.

Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определенно только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трёх значений недостающие значения беруться из установок противоположных сторон. Например:

BODY { magrin: 1em 2 em } /* верх и низ =  1em, право и лево = 2em */

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

Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значение свойства border-width определяет ширину границ элемента для всех перечисленных её частей. Всё, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.

Значениями этих свойств могут быть ключевые параметры thin, medium и thick или значения длины. Ширина границы, определяемая ключевыми параметрами зависит от браузера. Единственное, что можно гарантировать, - это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick.

Цвета частей границы задаются значениями свойств border-top-color, border-right-color, border-bottom-color и border-left-color. Свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются всё тем же правилам, описанным при задании полей элемента. Если задан тип границы (см. ниже), но не задан цвет границы, то по умолчанию используется цвет самого элемента.

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

Для задания типа любой из четырёх частей границы приметяются свойства border-top-style, border-right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset. Описание типов границ, соотетствующих всем перечесленным значениям, представленны в таблице.

Типы линий границы
Ключевой параметр Тип границы
none Граница не отображается (несмотря на значение свойства border-width)
solid Граница отображается сплошной линией
double Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства border-width)
groove Граница отображается, как будто она вдавлена в лист ("желобок")
ridge Граница отображается, как будто она выдавлена из листа ("барельеф")
inset Весь блок элемента отображается, как будто он вдавлен в лист
outset Весь блок элемента отображается, как будто он выдавлен из листа ("барельеф")

Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяет ширину, тип и цвет, соответственно, верхней правой, нижней и левой границы. В отличии от аналогичных свойств, задающих параметры полей и отступов, данные свойства устанавливают одинаковые значения для всех частей границы.

 



 

 

 

 

как создать свой сайт