HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

Свойство list-style – это компактная версия для всех других характеристик стиля списков. Оно принимает любые значения, допустимые для свойств list-style-type, list-style-position и list-style-image, которые можно указывать в произвольном порядке, применяя значения,
подходящие для типа списка, на который они действуют. Вот допустимые объявления свойства list-style:

li {list-style: disc}
li {list-style: lower-roman-inside}
li {list-style:
url(http://www.site.ru/images/tiny-quat.gif) square} читать далее

Свойство list-style-type выполняет двойную задачу в том смысле, что определяет способ, которым выводятся элементы как упорядоченных, так и неупорядоченных списков броузерами, поддерживающими стили. Оно действует на элементы списков так же, как атрибут type.

Свойство list-style-type применяется к элементам неупорядоченного списка и принимает одно из четырех значений: disc, circle, square или none. Броузер помечает элемент списка одним из этих маркеров. По умолчанию для элементов самого внешнего списка принимается значение disc; броузеры изменяют применяемое по умолчанию значение
в зависимости от глубины вложения списка. читать далее

Существует два способа разместить маркер, ассоциированный с элементом списка, – внутри связанного с элементом блока или за его пределами. В соответствии с этим свойство list-style-position допускает одно из двух значений: inside или outside.

По умолчанию принимается outside, означающее, что маркер будет висеть слева от элемента примерно так:

•       Это маркированный список
с маркером «outside»

Значение inside «вдвигает» маркер в элемент списка, который обтекает его примерно так же, как текст обтекает плавающее изображение:

•      Это маркированный список
с маркером «inside»

Отметьте, что вторая строка текста выводится без отступа и выравнивается по левому краю маркера.

Текущие версии популярных броузеров полностью поддерживают свойство list-style-position.

Свойство list-style-image определяет изображение, которым броузер будет отмечать элемент списка. Значением этого свойства служит URL файла с изображением или ключевое слово none, принимаемое по умолчанию.

Такое изображение будет маркером, предваряющим содержимое пунктов списка. Если оно доступно, броузер отобразит его вместо любого другого иначе определенного маркера. Если изображение недоступно или пользователь отключил его автоматическую загрузку, будет применяться маркер, определенный свойством list-style-type.

Авторы могут употреблять свойство list-style-image для определения типовых маркеров своих неупорядоченных списков. Хотя допустимо использование любых изображений в качестве маркеров, мы рекомендуем применять GIF- или JPEG-изображения небольшого размера, чтобы гарантировать привлекательный вид ваших списков.

К примеру, если вы хотите употребить в качестве маркера изображение из файла mybullet.gif, хранящегося на вашем сервере, можно написать:

li {list-style-image: url(pics/mybullet.gif); list-style-type: square}

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

Свойство overflow сообщает броузеру, как поступить с содержимым, переполняющим область вывода элемента. Значением этого свойства по умолчанию является visible. Оно предписывает броузеру выводить все содержимое, даже если оно не умещается в область, отведенную под элемент.

Не заботясь о последствиях, авторы веб документов обычно хотят выводить все содержимое. Однако в редких случаях элементы могут накладываться друг на друга, создавая довольно некрасивую картину. Чтобы предотвратить подобные неприятности, установите свойство overflow в значение hidden, scroll и auto.

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

Добавление постоянных полос прокрутки гарантирует, что они не будут то исчезать, то появляться по мере того, как изменяется размер элемента в динамическом документе. Отрицательной стороной такого решения является визуальная «замусоренность» страницы, порождаемая полосами прокрутки, которые отвлекают читателя от докумен
та. Чтобы избежать всего этого, установите свойство overflow в значение auto. Когда задано значение auto, полосы прокрутки появляются только в случае необходимости. Если содержимое элемента изменяется так, что он больше не усекается, полосы прокрутки удаляются.

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

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

Вот допустимые установки для ее размеров:

p {padding-left: 0.5cm}
img {padding-left: 10%}

Первый пример создает полусантиметровый отступ между содержимым тега <p> и его левой рамкой. Второй пример формирует подложку слева от тега <img> шириной в десять процентов от ширины родительского элемента.

Так же как и «скорые на руку» margin и border, можно использовать свойство padding для определения размеров подложки со всех четырех сторон, приписывая ему от одного до четырех значений. Свойство padding не поддерживает Internet Explorer, и в этом он расходится с остальными броузерами.

Оригинал документа http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505

Содержание

1. Каковы Рекомендации удобства Веб-содержимого?
2. Каковы «приоритеты» и «уровни соответствия,» и как использовать эмблемы?
3. Для кого написаны эти рекомендации?
4. Почему эти рекомендации необходимы? Почему они так важны?
5. Сколько людей затронуто проблемами удобства Сети?
6. Опишите некоторые примеры общих преград на Web-страницах?
7. Как эти рекомендации затронут удобство и простоту использования а также внешний вид сайтов для пользователей без физических недостатков?
8. Почему эти рекомендации не требуют использовать текстовые страницы?
9. Делать сайт удобным обойдется дороже?
10. Какой инструментарий лучше использовать, чтобы делать правильные сайты ?
11. Эти рекомендации станут требованием? Юридические последствия для сайта не соответствующего стандартам?
12. Какие средства поддержки доступны для того, чтобы использовать эти рекомендации?
13. Есть ли средства, которые могут помочь мне? Я могу проверить удобство использования своего сайта?
14. Какая самая важная вещь с точки зрения создания удобного сайта?
15. Останутся ли рекомендации неизменны в условиях развития технологий Сети?
16. Кто был вовлечен в разработку этих рекомендаций?
17. Какие Вебсайты уже используют эти рекомендации? Я могу видеть примеры?
18. Как эти рекомендации связаны с другими рекомендациями W3C/WAI?
19. Как узнать больше об удобстве использования сети и WAI?
20. Какова роль W3C в обеспечении удобства Сети?
читать далее

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

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

Вот их допустимые установки:

body {margin-left: 1in; margin-top: 0.5in; margin-right: 1in}
p {margin-left: -0.5cm}
img {margin-left: 10%}

Первый пример создает поля шириной в один дюйм слева и справа во всем документе и полудюймовое поле сверху. Второй пример выносит тег <p> на полсантиметра на левое поле. Последний – создает слева от тега <img> поле шириной в десять процентов от ширины родительского элемента.

Для краткости записи можно употребить свойство margin, чтобы определить все четыре поля, применяя от одного до четырех значений, действующих в ранее упомянутом порядке. С использованием этой формы поля тега <body> из предыдущего примера могут быть описаны также так:

body {margin: 0.5in 1in}

Свойства margin-left и margin-right взаимодействуют со свойством width при определении полной ширины элемента.

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

Свойство float допускает одно из трех значений: left, right или none, принимаемое по умолчанию. Использование none выключает свойство float. Другие значения действуют, как их аналоги для атрибута align, приказывая броузеру поместить содержимое тега у соответствующего края потока и позволить другому содержимому обтекать его.

Таким образом, броузер разместит специфицированное при помощи float:left содержимое (включая все поля, заполнители и рамки) тега слева от левой границы потока текста, и последующее содержимое будет обтекать его справа, вниз и под содержимым тега. Пара float:right помещает содержимое тега напротив правого края потока, и другое содержимое будет обтекать его слева вниз и под содержимое тега.

Однако свойство float, чаще всего используемое с таблицами и изображениями, можно с успехом применять и к текстовым элементам. Например, следующее описание создает «встроенный» заголовок, который обтекается потоком текста.

h2 {
float: left;
text-align: center;
margin right: 10px;
}