Все о HTML и CSS

Здесь вы найдете много полезной информации о том как построить собственный сайт, как правильно верстать Web страницы, а также освоите множество приемов и трюков которые можно выполнить при помощи CSS, без использования Java-скриптов. Данный сайт будет полезен как новичку, так и опытному Web Мастеру.

Приветствую Вас Гость | Регистрация | Вход
МЕНЮ
КАЛЕНДАРЬ
«  Март 2009  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
КАТЕГОРИИ УРОКОВ
HTML [8]
Тут уроки только по HTML
CSS [15]
Уроки только по CSS
Верстка дизайнов [0]
Верстка собственных дизайнов
Статьи [9]
Статьи о веб дизайне и не только
Скрипты [82]
Скрипты CSS
Форматирование
Здесь описаны свойства, позволяющие установить ширину и высоту элемента, расположение элемента относительно родительского контейнера, запретить полное или частичное обтекание элемента другими или полностью скрыть его из вида.

Свойства:

width
- определяет ширину элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:

Code
width: 200px; // Ширина элемента 200 пикселей

Значение по умолчанию - auto

height
- определяет высоту элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:

Code
height: 100px; // Высота элемента 100 пикселей

Значение по умолчанию - auto

max-width
- определяет максимальную ширину элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:

Code
max-width: 300px; // Максимальная ширина элемента 300 пикселей

max-height
- определяет максимальную высоту элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:

Code
max-height: 150px; // Максимальная высота элемента 150 пикселей

clear
- запрещает обтекание элемента другими с указанной стороны.
Примеры:

Code
clear: both; // Запрещает обтекание слева и справа от элемента

Code
clear: left; // Запрещает обтекание слева от элемента

Code
clear: none; // Разрешает обтекание

Значение по умолчанию - none

clip
- определяет область обрезания элемента (в виде прямоугольника).
Части элемента, которые выступают за грани прямоугольника будут обрезаны.
Устанавливается координатами точек прямоугольника относительно левого верхнего угла браузера.
Координаты указываются в пикселях или процентах
Данный атрибут работает только когда в классе CSS используется
position: absolute;
Пример:

Code
clip: rect (40px, 200px, 60px, 20px);

Пояснение:
40px - расстояние до верхней грани прямоугольника по оси X (по вертикали).
200px - расстояние до правой грани прямоугольника по оси Y (по горизонтали).
60px - расстояние до нижней грани прямоугольника по оси X (по вертикали).
80px - расстояние до левой грани прямоугольника по оси Y (по горизонтали).
В данном случае у нас получится прямоугольник размером 20Х120 пикселей, на расстоянии 40 пикселей от верха и 80 пикселей слева.

display
- определяет нужный вариант отображения элемента в странице.
Примеры:

Code
display: block; // Элемент отображается как блочный

Code
display: inline; // Элемент отображается на одной линии с предыдущим

Code
display: list-item; // Элемент отображается как блочный список

Code
display: none; // Элемент невиден, но продолжает занимать место

float
- определяет по какой стороне выравнивать элемент относительно подительского контейнера.
Примеры:

Code
float: left; // Выравнивание по левой стороне

Code
float: right; // Выравнивание по правой стороне

Code
float: none; // Выравнивание не указывается

Значение по умолчанию - none

overflow
- определяет что делать, если содержание элемента выходит за его границы.
Примеры:

Code
overflow: visible; // Элемент виден даже за пределами границ

Code
overflow: hidden; // Выступающие части будут обрезаны

Code
overflow: scroll; // Выступающие части будут видны с помощью прокрутки

Code
overflow: auto; // Полосы прокрутки добавляются только при необходимости.

Значение по умолчанию - auto

visibility
- определяет видимость элемента.
Примеры:

Code
visibility: visible; // Элемент видим

Code
visibility: hidden; // Элемент невидим

Значение по умолчанию - visible
Категория: CSS | Просмотров: 1178 | Добавил: Red_Line666x | 13:08 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 2008-2024 Школа HTML и CSS. Все права защищены.
При копировании материалов с данного сайта, гиперссылка на //school-html-css.3dn.ru/ ОБЯЗАТЕЛЬНА! Вся информация защищена законами о защите авторских правах.
Полную информацию о копировании материалов читайте в разделе "Правила копирования информации"