CSS

(Cascading Style

Sheets)

Шестаков Александр Петрович http://comp-science.narod.ru

Вводные замечания

CSS (Cascading Style Sheets) – каскадные таблицы стилей – набор правил или свойств,

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

Действуют два стандарта CSS – CSS1 и CSS2. В разработке – стандарт CSS3

Возможности CSS

1. Осуществлять выбор элемента или группы элементов, к которым будет применен тот или иной стиль. Это делается с помощью так называемых селекторов. Они позволяют применять стили:

•ко всем элементам данной группы, например, ко всем элементам <h1>;

•к элементам с определенным классом или id, которые указываются непосредственно в коде страницы

например, к элементам <Н1 class="topHeader">;

• к элементам, содержащимся внутри другого элемента

•к первой букве элемента, например <р>, что позволяет создавать буквицы;

•к первой строке элемента;

•к посещенным, непосещенным и активным ссылкам.

Возможности CSS

2.Осуществлять создание блоков; устанавливать размеры самих блоков, отступов, полей и рамок; устанавливать тип и цвет рамок.

3.Осуществлять некоторое позиционирование блоков:

•выравнивание по горизонтали;

•обтекание блоков текстом.

4.Управлять шрифтом на странице:

•устанавливать начертание;

•устанавливать насыщенность;

•устанавливать размер и стиль шрифта.

Возможности CSS

5.Управлять фоном на странице:

•устанавливать цвет фона или фоновое изображение блока;

•управлять повторением фонового изображения;

•позиционировать фоновое изображение.

6.Писать стили для текста:

•устанавливать расстояние между словами и буквами;

•устанавливать атрибуты оформления, например подчеркивание и перечеркивание текста;

•выравнивать текст по горизонтали и вертикали;

•устанавливать высоту строки;

•устанавливать цвет текста.

7.Управлять списками:

•устанавливать тип маркера в начале каждого пункта списка;

•использовать в качестве маркера графические изображения;

•позиционировать маркеры.

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

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

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

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

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

Примеры

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

2.<style type=“text/css”>

P {text-align: justify} </style>

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

<link rel=“stylesheet” type=“text/css” href=“st.css”>

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

text-indent

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

Например

P {text-indent: 2cm}

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

text-align

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

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

Например

P {text-align: justify}

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

text-decoration

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

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

текстом), line-through (перечеркивание) Например

H1 {text-decoration: underline}

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

letter-spacing

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

Например

H1 {letter-spacing: 3mm}