Inline- ("инлайн"-) элементы
Имеют ширину как у своего содержимого. Это означает, что два и более inline-элемента могут располагаться последовательно на одной линии. Например, тег a - это inline-элемент. Он может находиться прямо в тексте, окруженный текстом с двух сторон.
Любой веб-браузер содержит некий базовый встроенный набор правил, и знает, какой XHTML-элемент относится к типу "block", а какой - к "inline". Согласно этим правилам браузер рисует h1заголовки шрифтом, вдвое превышающим размер обычного шрифта, а гиперссылки по умолчанию отображаются синими с подчеркиванием.
С помощью CSS мы можем переопределять эти правила, влияя на отображение прямоугольников элементов. CSS позволяет задавать свойства, определяющие цвет шрифта, фона и бордюра, стиль и ширину бордюра, ширину полей и отступов и многое-многое другое.
Блочная модель
В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, мне кажется , что очень важно разобраться как это работает!
Итак, Плавающие блоки в CSS определяются свойством float.
Свойства
FLOAT
Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.
left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
none - блок не перемещается (значение по умолчанию).
Ну вот например, как будут располагаться по умолчанию ,три квадратных блока, со стороной в 200 пикселей.
html код :
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3">Третий блок</div>
CSS код :
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; }
Позиционирование и визуализация элементов страниц
Стили включают в себя способ установки элемента методом позиционирования. Данный метод основан на задании конкретных координат для каждого элемента. В каскадных листах стилей позиционирование описан свойством position, который имеет нижеприведённые значения:
absolute - начало координат левый верхний угол.
retative - относительное позиционирование, где "ноль" назначается согласно HTML-коду.
static - местоположение неизменно, относительно значений HTML-кода.
fixed - фиксация элемента на странице (элемент неподвластен "лифту").
Изменить положение элемента в CSS можно и путём смещения его по оси X (свойство left), по оси Y (свойство top) и оси Z (назначение слоев определяет свойство z-index). Создавать такие стили отдельно от тэга не целесообразно, потому как каждая позиция у элемента уникальна на странице. Пример: <DIV style="position: absolute; top: 200px; left: 160px; z-index: -1">элемент страницы</DIV> .
Стили также позволяют добавлять элементам эффекты визуализации, т.е менять их облик и способ отображения на экране. Менять прозрачность элемента призвано свойство visibility и его значения visible (элемент видим), hidden(элемент не виден) и collapse (скрывает текст или элементы таблиц). Код записывается в таком виде: style="visibility:_значение ".
Изображения, которые надо обрезать, обрабатываются свойством стиля clip. Значение последнего носит название rectему присвоены числа, которые указывают с какой стороны и сколько нужно урезать изображение. Принцип таков:
STYLE="clip: rect (_top_right_bottom_left), где _top и др. - числа в px урезания изображения с каждой из сторон и последовательность их неизменна.
Свойство стиля overtlow отвечает за визуализацию элемента в заданной ему области. Значения:
auto - появление прокрутки, если размер элемента будет больше области.
scroll - появление прокрутки независимо от размеров элементов и области.
hidden - элемент обрезается по границе области.
visible - элемент будет растягивается или сжимается по пределам области.
Отображение на экране элементов регулирует свойство display и его значения:
none - элемент не отображается.
block - элемент помещается в отдельный абзац.
inline - вставка текста в текущий абзац.
list-item - элемент списка.
table - блочная таблица (применяется только к тэгу <TABLE>).
inline-table - текстовая таблица (применяется только к тэгу <TABLE>).
table-cell - ячейка таблицы (применяется только к тэгам <TH> и <TD> ).
table-column - столбец таблицы (применяется только к тэгу <COL>).
table-row - строка таблицы (применяется только к тэгу <TABLE>).
table-caption - блочная таблица (применяется только к тэгу <CAPTION>).
table-row-group - группа строк таблицы (применяется только к тэгу <TBODY>).
table-column-group - группа столбцов таблицы (применяется только к тэгу <COLGROUP>).
table-footer-group - группа подзаголовков таблицы (применяется только к тэгу <THEAD>).
table-header-group - группа заголовков таблицы (применяется только к тэгу <THEAD>).
Посредством стилей можно делать обтекание элементов. Осуществляется это при помощи свойства float, где значение leftуказывает на обтекание с левой стороны, а right с правой. Аналогично применяется свойство clear (выбор стороны элемента, которой нельзя соприкасаться с предыдущем элементом). Пример: IMG {clear: left} .
Варианты компоновки веб-страниц. Основные типы верстки.