SiteEdit
       Рус  Eng

On-line руководство
по созданию сайтов

Приложение 2. Справочник по CSS

Категории:
Рассылка SiteEdit
E-mail *
Имя *
Компания
Телефон

Приложение создано на основе материалов, находящихся на сайте Справочник Web-языков www.spravkaweb.ru

Что такое CSS и как применить

Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов и следующего вида:

Это синий текст

А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега

и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас остануться только теги логического форматирования текста:

Это синий текст

Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.

Вы можете переназначить цвета текста для всех тегов

. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

.bluetext{ color: blue }

И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

Это синий цвет

Это синий цвет

Это жирный синий текст

Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

Этот текст будет синим

А этот - не будет!

Более того, вы можете встроить определение стиля прямо в тег:

Это синий текст

Это достигается при помощи атрибута style, который также поддерживают все теги HTML.

И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

#headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

Это заголовок документа

Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

P { color: blue; fotn-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги :

Тег

Этот текст останется красным.

Здесь установки, сделанные для текстового абзаца

, не будут перекрыты в дальнейшем.

Поддерживается IE начиная с 4.0

Единицы измерения CSS

В этой таблице перечислены все единицы измерения, поддерживаемые CSS.

Единица измерения

Обозначение

Высота буквы M текущего шрифта

em

Высота буквы x текущего шрифта

ex

Пикселы

px

Пункты

pt

Пики

pc

Дюймы

in

Миллиметры

mm

Сантиметры

cm

 

Фильты

Пару вводных слов

Надо отметить, что фильтры отображаются только в браузерах Internet Explorer не ниже 4-ой версии.

Синтаксис:

"filter:имя_фильтра(параметр1=значение, параметр2=значение,...)"

Некоторые фильтры могут быть без параметров.

Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.
Далее будут мною описаны 18 статических и 19 динамических фильтра.

Фильтры применяют через параметр STYLE:
Возьмём картинку (img.gif) и применим к ней фильтр прозрачности:
- имеем ту же картинку, но полупрозрачную.

Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.
JavaScript:

...
STYLE="filter:blur(strength=10)"
OnMouseOver="javascript:Blur(20)"
OnMouseOut="javascript:Blur(-20)">

Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.

VBScript:
...

Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.

Поддержка свойств CSS различными браузерами

 

Свойства CSS

ПРИМЕЧАНИЯ

Internet Explorer

Opera7.5

Mozilla5 Firefox1

Свойства шрифта элементов сайта

Цвет шрифта [color]

 

+

+

+

Размер шрифта [font-size]

 

+

+

+

Толщина символов [font-weight]

 

 

 

 

Начертание [font-family]

Если указать URL(file), то шрифт автоматически установится на компьютер пользователя

+

+

+

Наклон [font-style]

 

+

+

+

Подчеркивание [text-decoration]

Значение "blink" работает по- разному в различных браузерах

+

+

+

Расстояние между буквами [letter-spacing]

Доступны отрицательные значения

+

+

+

Межстрочный интервал

 

+

+

+

Заглавные буквы [font-variant]

По-разному отображаются в различных браузерах

+

+

+

Преобразование шрифта

 

+

+

+

Свойства фона и цвет элементов сайта

Цвет фона [background-color]

 

+

+

+

Фоновое изображение [background-image]

 

+

+

+

Прокручивание фона [background-attachment]

Значение "fixed;" работает только  с тегом

+

+

+

Положение фонового изображения [background-position]

 

+

+

+

Повторение фонового изображения [background-repeat]

 

+

+

+

Положение фонового изображение по X

 

+

-

-

Положение фонового изображение по Y

 

+

-

-

Границы элементов сайта

Общее обрамление [border]

(Задает ширину, стиль и цвет всех четырех границ элемента одновременно)

+

+

-

Толщина обрамления [border-width]

 

+

+

+

Цвет обрамления [border-color]

 

+

+

+

Стиль обрамления [border-style]

 

+

+

+

Верхняя граница [border-top]

 

+

+

+

Нижняя граница [border-bottom]

 

+

+

+

Правая граница [border-right]

 

+

+

+

Левая граница [border-left]:

 

+

+

+

Позиционирование блоков (элементов) сайта

Внешние отступы [margin]

Доступны отрицательные значения

+

+

+

Тип контейнера [display]

 

+

+

+

Общая ширина [width]

 

+

+

+

Общая высота [height]

 

+

+

+

Метод позиционирования [position]

 

+

+

+

Выравнивание [float]

 

+

+

+

Смещения

Доступны отрицательные значения

+

+

+

Расположение [clear]

 

+

+

+

Координаты прямоугольника, в котором выводится содержимое элемента

Обычно применяется в области програм-мирования на Java Scripts

+

+

+

Поведение

 

+

+

+

Порядок вывода (наложения) элементов друг на друга [z-index]

Чем больше значение z-index, тем ближе к наблюдателю находится слой.

+

-

+

Расположение текста внутри элементов (блоков) сайта

Внутренний отступ [padding]

Значение работает в различных браузерах - по разному

+

+

+

Горизонтальное выравнивание текста [text-align]

 

+

+

+

Вертикальное выравнивание текста [vertical-align]

Обычно используется для вертикального выравнивания текста внутри  столбцов и ячеек таблиц, также работает для вертикального расположения маркеров (list-item) внутри блока

 

 

 

Смещение текста

 

+

+

+

Другие настройки элементов сайта

Маркер списка [list-style-type]

 

+

+

+

Маркер списка (изображение) [list-style-image]

 

+

+

+

Расположение маркеров

 

+

+

+

Обработка пробелов в элементах сайта

 

+

+

+

Вид курсора

Если указать URL(file), то возможно использовать любой Ваш курсор

+

+

-

Фильтры

Чтобы работало, бывает необходимо указать ширину и высоту объекта

+

-

-

Полосы прокрутки элементов сайта

Полосы прокрутки

Для того чтобы придать цвета основному скролу, установите соответствующие значения для тега

+

-

-

 

Copyright © Edgestile Company, 2004
тел.:  8 (495) 229-45-50, 8 (812) 612-2642, 8 (34241) 3-69-90
e-mail:  info@siteedit.ru - общие вопросы
icq: 268-447-867 - общие вопросы
все контакты
Официальный сайт CMS Siteedit Получить сайт Тест-драйв интернет магазина