| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Свойства цвета и фона Свойство color
определяет цвет любого элемента CSS. Пример: SMALL {color: red:} Свойство background-color указывает на цвет фона какого-либо элемента, причем
этот цвет устанавливается именно для отображения элемента, а не всего html-документа. Учтите, что интерпретаторы разных броузеров обрабатывают данное свойство неодинаковым образом: например, Netscape Navigator
выделяет фоновым цветом сам элемент страницы, причем выделение ограничивается его видимой шириной, a Internet Explorer растягивает выделение на всю ширину страницы. Пример: H1
{ background-color: #f00000;} Свойство background-image устанавливает фоновое изображение всего документа или ячейки таблицы. С ним можно использовать параметр попе, указывающий на
то, что данная страница не содержит фоновых изображений. Пример: BODY {background-image: URL(/images/picture.gif):} Свойство background-repeat
определяет параметры повторения (копирования)фонового изображения в разных направлениях видимой части html-документа.Может принимать одно их следующих значений: no-repeat — не повторять изображение; repeat
— повторять изображение во всех направлениях; repeat-x —только по горизонтали; repeat-y — только по вертикали. Пример: BODY {background-repeat: no-repeat:}
Свойство background-attachment устанавливает правила скроллинга фонового изображения. Может принимать одно из двух значений: scroll заставляет фоновое изображение двигаться вместе с содержимым web-страницы
при прокрутке документа, a fixed фиксирует изображение на экране. Пример: BODY { background-attachment: scroll:} Свойство background-position,
в случае если значение свойства background-repeat установлено repeat-x или repeat-y, позволяет зафиксировать положение фонового изображения. Оно может принимать следующие значения: top — позиционирование
по верхней границе экрана, middle — по центру экрана, bottom — по нижней границе, left — выравнивание по левой границе экрана или ячейки таблицы, right — выравнивание по правой границе, center — выравнивание
по центру. Можно также указать в качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения в пикселах, миллиметрах или сантиметрах.
Пример использования: BODY {background-position: 30cm 0cm;} TD {background-position: middle:} Свойства границ
Свойства margin-left, margin-right, margin-top и margin-bottom определяют значения отступов вокруг содержащего их элемента в пикселах, сантиметрах или миллиметрах соответственно
слева, справа, сверху и снизу. Отступ представляет собой пустое пространство, не заполненное никакими другими элементами. Данные свойства могут применяться совместно с элементами изображений, абзацев, таблиц,
любых других компонентов, для которых вы хотите указать описанные здесь значения. Пример: Р {margin-left: 20px;} IMG{
margin-top: 10mm: margin-left: 15mm; margin-bottom: 10mm: } Свойства padding-left, padding-right, padding-top и
padding-bottom, аналогично рассмотренным выше, описывают значения отступов от видимых рамок объектов HTML, например таблиц. Величина отступов также определяется в пикселах, сантиметрах или миллиметрах.
Они могут применяться как вместе, так и по отдельности. Пример: TABLE { padding-left: 10рх: padding-right:10px; padding-top:
15px: padding-bottom: 15px: } Свойства border-top-width, border-bottom-width, border-right-width и border-left-width определяют толщину видимого
обрамления объектов, например таблиц и их ячеек, по правилам, аналогичным записи свойств, указанных выше. Пример: TD{ border-top-width: 2px:
border-bottom-width: 2px: border-right-width: 1mm: border-left-width: 1mm; } Свойство border-color
описывает цвет видимого обрамления объектов — рамок изображений и бордюров таблиц. Пример: TABLE (border-color: blue;}
Свойства списков Свойства списков применяются для настройки отображения элементов нумерованных и маркированных списков, определяемых в коде 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;}
является в корне неправильной. Учтите также, что для классов, равно как и для селекторов, справедливы свойства группировки и наследования. Идентификаторы
В отличие от селекторов и классов, идентификаторы представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML без использования прочих стандартных методов. В
файле CSS идентификатор обозначается знаком <#, а в документе HTML — атрибутом ID. Он имеет собственное имя, состоящее из цифр и символов латинского алфавита. Общий синтаксис записи идентификаторов можно
представить в следующем виде: НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;} Простым примером использования идентификатора может служить такой отрывок
файла CSS: P#qwerty{text-align: left:} В html-коде web-страницы этот идентификатор можно вызвать с использованием атрибута ID: <Р ID="qwerty">Teкст.
позиционированный по левой границе экрана</Р>Очевидно, что тег <Р>, включающий атрибут ID, в качестве значения которого использовано имя идентификатора, наследует свойства последнего. Если же
в записи этого тега вы не укажете данный атрибут, текст будет выровнен по умолчанию либо согласно другим директивам HTML или CSS. Идентификаторы также можно записывать без указания имени элемента, которому
они соответствуют. Так, строка #qwerty{color: #00FF00:} создает идентификатор, который может использовать любой элемент HTML, например: <Н1
ID="qwerty">Teкст заголовка</Н1> Комментарии Файл CSS может содержать введенные пользователем комментарии, поясняющие
назначение тех или иных участков кода. Комментарии в стандарте CSS заключаются в последовательность символов / и * следующим образом: /* текст комментария */ 1>>>2>>>3 Обсудить в форуме...>>>>
| 
