Css (Cascading Style Sheets) Вводные замечания

CSS (Cascading Style Sheets) – каскадные таблицы стилей– набор правил или свойств, которые описывают, как тот или иной элемент или группа элементов будут отображаться на экране монитора в браузере.

Действует два стандарта CSS – CSS1 CSS2.

Начал действовать стандарт CSS3.

Способы внедрения стиля в html-документ

1. Включение непосредственно в тег;

2. Описание стиля в заголовке документа;

3. Подключение стилевого файла (описание стиля хранится в отдельном файле).

Примеры:

1. <Pstyle="text-align:justify> Этот текст будет выровнен по ширине</P>

2. <style type="text/css">

P {text-align: justify}

</style>

3. Подключение стилевого файла st.css, где содержится полное описание стиля (записывается в заголовок документа):

<link rel="stylesheets" type="text/css" href="st.css">

Свойства текста

text-indent

Определяет длину отступа в первой строке блока

Например

P {text-indent: 2cm}

text-align

Определяет выравнивание текста в элементе.

Возможные значения: left(по левому краю),right(по правому краю),justify(по ширине).

Например

P {text-align: justify}

text-decoration

Определяет оформление текста.

Возможные значения: none(нет оформления),underline(подчеркивание),overline(линия над текстом),line-through(перечеркивание).

Например

H1 {text-decoration: underline}

letter-spacing

Определяет интервал между символами текста

Например

H1 {letter-spacing: 3mm}

word-spacing

Определяет интервал между словами

Например

P {word-spacing: 4mm}

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

color

Определяет цвет текста

Примеры

P{color:green}

TD{color:rgb(22, 255,22)}

background-color

Определяет цвет фона элемента

Примеры

P {background-color: green}

TD {background-color: rgb(22, 255,22)}

background-image

Определяет фоновое изображение элемента

Пример

body {background-image: url("pic.gif")}

background-repeat

Определяет направление, по которому экран будет заполняться копиями фонового изображения

Значения

repeat– фоновое изображение повторяется по горизонтали и по вертикали (по умолчанию)

repeat-x– фоновое изображение повторяется только по горизонтали

repeat-y– фоновое изображение повторяется только по вертикали

Пример

body {background-repeat: repeat-x}

Свойства шрифта

font-family

Определяет семейство шрифта, используемого в тексте элемента. Если перечислено несколько семейств (через запятую), то приоритет определяется порядком их следования в перечислении.

Пример

BODY {font-family: Baskerville, "Heisi Mincho W3", serif, arial, times}

- если свой-во содержит пробелы, то значения полагается закавычивать

font-style

Определяет начертание шрифта

Значения

Italic – курсив

oblique– наклонное начертание

Пример

TD{font-style:italic}

font-weight

Определяет толщину шрифта

Значения

normal

bold

bolder

lighter

100-900 (100 – lighter, 900 – bolder, 400 - normal)

Пример

H1 {font-weight: bolder}

font-size

Определяет кегль (высоту символов) шрифта

Значения

Задаются в пунктах (пт) или в процентах от базового значения, или

XX-small

small

medium

large

X-large

XX-large

Пример

P {font-size: 14pt}