Свойства списков
Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде HTML тегом <LI>.В языке CSS данному элементу присваиваются следующие свойства. Свойство list-style-type определяет внешний вид маркера нумерованного или маркированного списка и может принимать одно из перечисленных далее значений: попе — маркер списка не отображается; для маркированного списка disc — метка отображается в виде черного круга, circle — в виде полой окружности, square — в виде черного квадрата; для нумерованного списка decimal —метки отображаются в виде последовательности арабских чисел, lower-roman —в виде последовательности римских цифр, записанных в строчном регистре, upper-roman — в виде последовательности римских цифр в заглавном регистре, lower-alpha — в виде последовательности строчных букв, upper-alpha — в виде последовательности заглавных букв.
Пример: LI {list-style-type: square:}
Свойство list-style-image позволяет назначить в качестве метки маркированного списка произвольное изображение.
Пример: LI {list-style-image: URL(/images/marker.gif);}
Свойство list-style-position описывает позиционирование элементов списка и может принимать следующие значения: outside — позиционирование осуществляется по умолчанию и inside — позиционирование без отступа от левой границы рабочего окна броузера.
Пример: LI { list-style-position: inside:}
Вспомогательные свойства элементов
Свойства width и height определяют соответственно ширину и высоту объекта в пикселах, миллиметрах, сантиметрах или процентах от значения, принятого по умолчанию. Применяются они в основном для задания геометрических размеров изображений различной величины в случаях, когда их необходимо выровнять по вертикали или горизонтали. Данные свойства можно использовать как вместе, так и по отдельности.
Пример: IMG { height: 80%; width: 120px: }
Свойство float указывает на расположение какого-либо объекта в окне броузера относительно других объектов, размещенных рядом. Оно может приниматьодно из следующих значений: попе — расположение объекта по умолчанию, left — расположение объекта слева или right — расположение объекта справа.
Пример: TD {float: left:}
Свойство clear описывает правила расположения других объектов вокруг данного элемента web-страницы. Принимает одно из следующих значений: попе —расположение объектов по умолчанию, left — расположение слева, right —справа и, наконец, both — расположение с двух сторон.
Пример: IMG {clear: both;}
Свойство white-space применяется для управления отображением пробелов и переносов между элементами html-документа или словами текста. Свойство может использовать одно из следующих значений: normal — стандартное отображение текста, при котором несколько следующих подряд пробелов преобразуются в один, рге — допускается отображение нескольких символов пробела подряд и, наконец, nowrap — запрещен перенос строки в пределах действия элемента
Пример: Р {white-space: рге;}
Свойство display применяется для управления взаимным расположением текстовых строк и объектов на экране монитора. Может принимать одно из следующих значений: block — отображает перенос строки до и после объекта; list-item — переносит строку до и после объекта, а кроме того, добавляет в начало строки маркер, как в случае использования маркированного списка; inline —допускается отображение объекта на одной строке с другими элементами; none — объект не отображается.
Пример : IMG {display: block;}
Классы
CSS является достаточно гибкой структурой, позволяющей описывать не только определенные параметры для каких-либо элементов таблицы стилей, но и назначать различные свойства одним и тем же ее элементам. Предположим, в тексте вашего html-документа встречается несколько вариантов расположения текста: часть абзацев позиционируется по всей ширине страницы, а часть — по ее левому краю. И в том и в другом случае для описания отрывков текста используется тег <Р>. Если вы назначите данному элементу те или иные свойства, представив его в качестве селектора в файле CSS, то все отрывки текста, помеченные в коде web-страницы тегом <Р>, будут представлены на экране одинаковым образом. Чтобы избежать этого, можно использовать в составе ess-файласпециальные кодовые объекты, называемые классами. Существуют два метода использования классов. В первом случае класс можно представить как придуманное программистом уникальное имя-идентификатор какого-либо перечня свойств, предваряющееся символом точки и записанное исключительно с применением символов латинского алфавита и цифр. Оно ставится между названием элемента и его описанием. В общем виде синтаксис записи такой функции выглядит следующим образом:
НАЗВАНИЕ ЭЛЕМЕНТА. имя класса {свойство: значение;}
Простым примером использования данной функции CSS может служить следующий отрывок текста ess-файла:
P.myclass {text-align: justify;}
В этом случае именем класса у вас служит символьный определитель «myclass». Теперь, если вы вызовете в коде web-страницы тег форматирования абзаца с указанием имени класса, данному абзацу будут присвоены значения, определенные в описании элемента <Р>:
<BODY> <Р CLASS="myclass">Teкст, отформатированный согласно директивам CSS</P> <Р>Текст. отформатированный по умолчанию</Р> </BODY>
Очевидно, что теперь текст, заключенный в первую пару тегов <Р> и </Р>, будет растянут по всей ширине окна броузера, а текст, заключенный во вторую пару этих тегов, останется отформатированным по умолчанию. Таким образом, вы можете придавать одним и тем же элементам разметки гипертекста различные свойства в пределах одного документа. Во втором случае класс можно использовать без привязки к какому-либо конкретному элементу, правила записи директив CSS допускают такую возможность. В этом случае общий синтаксис описания класса будет выглядеть так:
.имя класса{свойство: значение;}
В качестве примера такого представления класса можно предложить следующий вариант описания свойств элементов web-страниц:
,myclass{color: green;}
Записав предложенную выше строку в файл CSS, вы можете вызывать класс с именем «myclass» из кода html-документа, присваивая его свойства любому тегу. Например, указав в html-коде директиву <Р CLASS="myclass">TeKCT, отображаемый зеленым цветом </Р> вы сделаете так, что выводимый в окне броузера текст будет отображаться зеленым шрифтом. В этом же документе вы можете применить такую команду:
<Н3 CLASS="myclass ">текстовый заголовок</Н3>
Заголовок третьего уровня также будет представлен на экране зеленым цветом. Очевидно, что каждый класс можно вызывать в пределах одной web-страницынеограниченное количество раз, равно как каждый файл CSS может содержать неограниченное количество классов.
Создавая классы CSS, следует помнить о том, что для одного элемента каскадной таблицы стилей может быть специфицирован только один класс.
Например, запись
A.class-l.c1ass-2{text-decoration: none;}
является в корне неправильной. Учтите также, что для классов, равно как и для селекторов, справедливы свойства группировки и наследования.