Свойства элементов в CSS

Подключение к Web—странице

Идентификаторы

Классы

Это специальные кодовые объекты в составе CSS файлов.

2 способа использования классов:

1) Класс представляется как придуманное разработчиком уникальное имя-идентификатор какого-либо перечня свойств.

Синтаксис:

НАЗВАНИЕ ЭЛЕМЕНТА.имя класса {Свойство: значение;}

Пример

Описание класса:

P.myclass {text-align: justify;}

Применение класса:

<P class=myclass> Текст, отформатированный с помощью стилей CSS </P>

<P> Текст, отформатированный по умолчанию </P>

2) Использование класса без привязки к конкретному элементу:

.имя класса {Свойство: значение;}

Пример

Описание класса:

.myclass {color: green;}

Применение класса:

<P class=myclass> Абзац с текстом зеленого цвета </P>

<h3 class=myclass> Заголовок с текстом зеленого цвета</h3>

Представляют собой кодовые объекты CSS, которые позволяют назначать свойства отдельным компонентам HTML без иcпользования прочих стандартных методов.

Синтаксис:

НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение;}

#имя идентификатора {Свойство: значение;}

Пример

Описание идентификатора: #new {color: blue;}

Применение идентификатора: <H1 id=new> Заголовок синего цвета </H1>

Существует 3 способа использования каскадных таблиц стилей на Web-странице:

1. Использование инструкций CSS непосредственно в тегах кода Web-страницы:

<ТЕГ STYLE=”Свойство: значение”>Содержимое тега</ТЕГ>

Пример

<P STYLE=”color:red”> Текст красного цвета </P>

2. Включение инструкций CSS в HTML-код наподобие подпрограммы в разделе STYLE.

Пример

<HTML>

<HEAD>

P {text-align: justify;}

H1 {color: green;}

</STYLE>

<BODY>

Тело документа

</BODY>

</HTML>

3. Подключение внешнего файла стилей к Web-странице:

<LINK rel=stylesheet type=”text/css” href=”URL”>, где URL содержит полный или сокращенный путь к файлу CSS.

Пример

1. Свойства шрифта.Свойства шрифта могут описывать элементы, содержащие текст (A, B, BODY, CAPTION, DD, DL, DT, EM, H1-H6, I, LI, P, SMALL, STRIKE, STRONG, TD, TH, U и др.)

1) font-family – задание семейства шрифтов (Arial, Times New Roman, Verdana и т.д.)

Пример.

P {font-family: Verdana;}

2) font-size – размер шрифта в абсолютных или относительных величинах.

Абсолютные величины – в пунктах (pt), сантиметрах (cm), миллиметрах (mm), пикселах (px).

Относительные величины – в процентах от высоты символов, принятой по умолчанию, или в виде следующих определений: smaller – самый маленький шрифт, small – маленький, medium – средний, large – большой, larger – самый большой.

Пример.

H1 {font-size: 30pt;}

H2 {font-size: 60%;}

3) font-weight – толщина символов, задаваемая числовыми значениями (0-900) или в виде следующих определений: normal – стандартный, lighter – тонкий, bold – жирный, bolder – очень жирный.

Пример.

P {font-weight: 800;}

4) font-variant – определяет регистр записи символов в виде следующих определений: normal – стандартное написание, small-caps – все символы переводятся в заглавные.

Свойство font-variant поддерживается только IE.

Пример.

caption {font-variant: small-caps;}

5) font-style – задает правила начертания символов: normal – стандартное написание, italic – наклонный шрифт.

6) font – объединяет все вышеизложенные свойства (family, style, variant, weight, size)

Пример.

P {font: italic bolder Arial 12pt;}

2. Свойства текста.Применяются к элементам Web-страниц, которые включают текст.

1) text-align – способ расположения текста относительно границ рабочего окна браузера или ячейки таблицы (P, H1-H6, TD, TR) в виде следующих определений:

left, right, center, justify

Пример.

P {text-align: right;}

2) text-indent – отступ текста (красная строка) (ед.длины или процент)
Пример.

P {text-indent:30 em;}

3) text-transform – преобразование текста (normal, сapitalize – каждое слово начинается с прописной буквы, uppercase – текст преобразуется в прописные, lowercase – текст преобразуется в строчные)
Пример.

CAPTION { text-transform:сapitalize;}

4) text-decoration – определяет стиль текста (none, underline-подчеркнутый, overline – надстрочный, line-through – перечеркнутый, blink – мерцающий)

Пример.

P {text-decoration: line-through;}

5) letter-spacing - расстояние между символами текста (рх, cm, mm)
Пример.

P {letter-spacing: 100px;}

6) vertical-align – вертикальное выравнивание элементов по отношению к другим элементам, стоящим в одном ряду (baseline – по условной базовой линии, top-text – по верхней точке текстовой строки, top – по верхней границе ячейки, middle – по центру ячейки, bottom – по нижней границе ячейки, bottom-text – по нижней точке строки)

Пример.

P { vertical-align: top-text;}

TD {vertical-align: top;}

7) line-height – межстрочный интервал (ед.длины или процент от интервала по умолчанию)

Пример.

P {line-height: 120%;}