= WEB-design =
la_serg
Стильные таблицы - часть 5 и последняя ;))
окончание: начало #52, #53,
#54, #55
Продолжаем скучное изучение параметров CSS тегов.
Сегодня я постараюсь сделать это нудное веселее - украсив теорию
некоторыми примерчиками из реальной жизни. Итак продолжим.
display Возможные значения: none - не отображается,
block - разбивает линию (строку) до и после элемента (т.е. делает
элемент элементом списка, аналогичен тегу <li>)
inline - не разбивает линию (= строку). Т.е. элемент может находиться
на одной линии с другими элементами, list-item - разбивает линию
(= строку) до и после элемента + добавляет маркер как у list-item
элементов. Применимо к любому элементу. Описание: определяет, как
будет отображаться элемент.
Лирическое отступление. Лично для меня очень полезным,
как ни странно, оказалось свойство display:none. Меня жутко раздражали
банеры в гостевой книги моего сайта. Никаких меток (name) баннеры
не имели, по этому у меня не получилось ничего с ними сделать. После
долгих творческих поисков мною был написан файлик стилей:
img {display:none}
img.my {display:block}
картинки, имевшие параметр class="my" отображались
нормально (Этот параметр имела верхняя картинка в гостевухе), а
баннеры, не имевшие этого параметра, не отображались и не загружались.
Таким образом, были отключены баннеры в guestbook.ru :)))
white-space Возможные значения: normal
- "сжимает" несколько подряд идущих пробелов в один, pre - допускает
отображение несколько подряд идущих пробелов, nowrap - не допускает
перенос строки без тэга <br>.
Применимо к: Block-level elements. Описание: Определяет, как будут
отображаться пробелы между элементами.
Примерчик: white-space:nowrap.
list-style-type Возможные значения: disc,
circle, square, decimal, lower-roman, upper-roman, lower-alpha или
upper-alpha; none - никакой. Применимо к: Elements with display
value list-item. Описание: определяет вид list-item маркера. Если
значение list-style-image равно none или не уточнено.
Пример: list-style-type:lower-alpha.
list-style-image Возможные значения: none
- нет, URL. Применимо к: Elements with display value list-item.
Описание: задает вид list-item маркера в виде картинки. Если Вам
надоели стандартные кружочки или квадратики в списках, Вы можете
заменить их на любую свою картинку с помощью данного тега. Достаточно
лишь указать относительный или абсолютный URL к файлу картинки.
list-style-position Возможные значения:
inside - при переносе следующие строки будут отображаться без отступа,
outside - по умолчанию. Применимо к: Elements with display value
list-item. Описание: определяет положение маркера в зависимости
от list item элемента.
Пример: list-style-position:inside.
Свойства отображения
margin-right, margin-top, margin-bottom, margin-left
Возможные значения: длина, процент, auto- автоматически. Применимо
к любому элементу. Описание: определяет отступ справа, сверху, снизу,
слева (по отдельности) соответственно.
Пример: margin-top:100
margin Применимо к любому элементу. Описание:
обобщает все вышеперечисленные свойства, позволяет задавать все
в одном месте, менее наглядно.
Пример: margin:100pt
padding-top, padding-bottom, padding-left, padding-right
Возможные значения: длина, процент. Применимо к любому элементу.
Описание: отступ от верхнего (нижнего, левого, правого) border'а
(соответственно).
Пример: padding-top:100pt
padding Применимо к любому элементу. Описание:
Обобщает все вышеперечисленные свойства, позволяет описывать все
отступы в одном месте, менее наглядно.
Пример: padding:100px
border-top-width Возможные значения: длина;
thin, medium или thick. Применимо к любому элементу. Описание: толщина
верхнего border'а.
Пример: border-top-width:4pt
border-right-width Возможные значения: длина;
thin, medium или thick. Применимо к любому элементу. Описание: толщина
правого border'а.
Пример: border-right-width:thick.
border-bottom-width Возможные значения:
длина; thin, medium или thick. Применимо к любому элементу. Описание:
толщина нижнего border'а.
Пример:border-bottom-width:5em
border-left-width Возможные значения: длина;
thin, medium или thick. Применимо к любому элементу. Описание: толщина
левого border'а.
Пример: border-left-width:medium
border-color Возможные значения: color.
Описание: Цвет border'а. Применимо к любому элементу.
Пример: border-color:green.
Width Возможные значения: длина; процент.
рименимо к: Block-level and replased elements Описание: ширина элемента.
Пример: width:10%
height Возможные значения: длина, процент.
Применимо к: Block-level and replaced elements Описание: высота
элемента.
Пример: height:100pt.
Float Возможные значения: left, right, none.
Применимо к любому элементу. Описание: расположение элемента.
Пример: float:right
clear Возможные значения: left, right, both
- c двух сторон, none. Применимо к любому элементу. Описание: расположение
других элементов вокруг данного
Пример: clear:both
Во всех статьях посвященных CSS мы активно использовали
слово "длина" - настало время понять: что же это такое. Длина может
задаваться как положительным, так и отрицательным числом, после
числа обычно идет единица длины. Вот список единиц измерения, выбирайте
для себя наиболее удобную (обычно это пиксели):
- em - ems , высота используемого элементом шрифта
- ex - x-height, ширина буквы "x" используемого элементом шрифта
- px - pixels, пикселы
- in - inches, дюймы
- cm - centimeters, сантиметры
- mm - millimeters, миллиметры
- pt - points, точка ( 1pt = 1/72дюйма)
- pc - picas ( 1pc = 12pt )
- % - процент от пользовательского шрифта.
На этом изучение CSS считаю законченным. Подкрепляйте свои теоретические
знания- практикой. К следующему разу еще чего-нибудь придумаю ;))
Удачи!
#15(56)/15.05.2001
|
