Составитель: Горбунова Елена Владимировна, педагог дополнительного образования МБОУ ДОД «Центр дополнительного образования детей», Россия, г. Прокопьевск, Кемеровской обл., ул. Обручева, 65, тел. (3846)

CSS (Cascading Style Sheets) - это каскадные таблицы стилей. Или, если объяснить это более понятным языком, CSS - это технология описания внешнего вида страниц, написанных на HTML. Главная задача таблиц стилей - это разделить код страниц и её внешний вид. Возможно, что Вы спросите: "А зачем нужно так делать?". Ответ очевиден: "Для большей мобильности". Действительно, допустим у Вас имеется сайт, на котором 100 страниц (это совсем немного). Допустим, шрифт обычного текста у Вас на сайте - 15pt. И представьте, что Вам захотелось сделать не 15pt, а 17pt, что Вы будете делать? Если Вы не используете CSS, то Вам придётся в каждой из 100 страниц, в каждом месте, где вставляется текст исправлять с 15pt на 17pt. Разумеется, займёт это несколько часов. Если Вы используете CSS, то тогда Вам требуется лишь открыть специальный файл со стилями, найти в этом файле задание размера шрифта и всего один раз изменить с 15pt на 17pt. И Ваш сайт полностью и сразу преобразится. Я уже молчу про массу возможностей создания необычных дизайнерских решений с помощью CSS, которые невозможно реализовать только с помощью HTML.

Подключение CSS к HTML Создадим в корневой директории нашего сайта HTML.LOC папку css. В ней мы будем хранить файлы с таблицами стилей. Открываем Notepad++ и сохраняем новый файл в папку CSS с именем style.css. Теперь нам надо подключить страницу style.css к html-странице. Добавим тег в нашу HTNL страницу. И эти две страницы будут взаимосвязаны. К одной HTML странице можно подключить несколько CSS страниц и наоборот к нескольким HTML страницам можно подключит одну страницу стилей. Установите программу ColorMania, которая находится в сети в dopmat\csskourse\soft

Правила и селекторы CSS CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки: Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой: Селектор { свойство 1: значение; свойство 2:значение; … свойство N:значение; } Например:

Селекторы CSS 1) Обычные селекторы Давайте попробуем на практике. Откройте html-страницу и css- страницу. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег, значит идем на страницу style.css и пишем следующий код: body{ background: blue; } Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом: body{ background: blue; color: white; }

Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2): body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; } Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.

2) Селекторы по идентификатору Что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль. В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например: Текст параграфа с идентификатором id Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:

Добавим в таблицу стилей style.css стили для наших абзацев: Мы сначала указали сделать текст всех параграфов черным, а текст параграфа с id "pink" сделать розовым. Наш селектор состоит в данном случае из элемента (p), разделителя (#) и имени идентификатора (pink). Важно запомнить, что на странице может быть только один идентификатор (id). Т.е. для нашего примера нельзя создать два параграфа с id "pink", параграф с таким id может быть только один. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей.

3) Селекторы по классу Но, что делать, если мы хотим, чтобы розовый цвет текста был у двух или трех параграфов. Для этого в HTML существует параметр class, в качестве значения которого указывается его имя. В таблице стилей напишем правило: body{ background: blue; color: white; } h1{ color:red; } h2{ color:yellow; } p{ color:black; } #pink{ color:pink; }.pink{ color:pink; }

4) Контекстный селектор Пусть у нас есть html-страница вот с таким кодом Мы хотим, чтобы курсив был выделен еще и зеленым цветом. Тогда в таблицу стилей мы запишем селектор по элементу, т.е. i{ color:green; } Сейчас наша страница в браузере выглядит так:

Но что, если мы захотим, чтобы не весь курсивный текст выделялся зеленым, а лишь тот, который находится в параграфах. Для этого мы внесем изменения в таблицу стилей: p i{ color:green; } Так мы указали, применять данный стиль к элементам i, которые находятся в элементах p. Названия элементов при этом отделяются пробелом. Такие селекторы называют контекстными. Теперь наша страница в браузере выглядит так:

5) Группировка селекторов Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были зеленого цвета), то их можно сгруппировать. Для этого селекторы, к которым будет применяться один стиль, нужно перечислить через запятую. Пример: h1, h2, h3{ color:green; } Предположим, что кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать в нашу таблицу стилей: h1, h2, h3{ color:green; } h1{ font-size:18px; } h2{ font-ize:16px; } h3{ font-size:14px; } У наших заголовков будет указанный размер, но все они будут зеленого цвета.

Псевдоклассы ссылок Как вы знаете, у ссылок есть четыре состояния: простая ссылка, активная ссылка, посещенная и та, на которую наведен курсор. Состояние ссылок зависит от действия пользователя, и браузер, в зависимости от этих действий может применять разные стили. Для описания этих стилей и существуют псевдоклассы: a:link - задает стиль обычной ссылки. a:active - задает стиль активной ссылки. a:visited - задает стиль посещенной ссылки. a:hover - задает стиль ссылки, на которую наведен курсор. Пусть на нашей html-странице есть ссылка Теперь, давайте зададим стиль для ссылки, на которую наведен курсор. Пусть она становится красного цвета: a{ color:green; } a:hover{ color:red; } Давайте сделаем нашу ссылку зеленой и уберем подчеркивание : a{ color:green; text-decoration:none; }

Фон – background Пусть у нас есть html-страница с таким кодом: background-color - задает цвет фона. body{ background-color:#243CED; color:yellow; } Сейчас наша страница в браузере выглядит так

background-image - задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей. body{ background-image:url(picture.gif); background-color:#243CED; color:yellow; } Пример В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif

background-repeat - задает возможность повторения фонового изображения Возможны 4 варианта: repeat - повторять изображение по горизонтали и вертикали. repeat-x - повторять изображение только по горизонтали. repeat-y - повторять изображение только по вертикали. no-repeat - не повторять изображение. body{ background-image:url(picture.gif); background-repeat:no-repeat; background-color:#243CED; color:yellow; }

Свойства – шрифты Font-family Для задания параметров шрифтов в CSS используется свойство font. Font-family Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп: Serif - шрифты с засечками, например, Times New Roman. Sans-serif - шрифты рубленные, без засечек, например, Arial. Monospace - моноширинные шрифты, например, Courier New. Cursive - курсивные шрифты, например, Calisto MT. Fantasy - декоративные шрифты, например, Torhok

Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. Например: Body { font-family: Verdana, sans-serif; } Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то будет использоваться любой другой из группы sans-serif. То есть будет подобран шрифт наиболее близкий ему по виду, и внешний вид страницы будет не очень отличаться от задуманного. Вообще, можно указать несколько шрифтов через запятую, в порядке убывания приоритета.

Font-style Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор: Зададим в таблице стилей шрифт для всех параграфов: p#sn, p#so, p#si{ font-family: Verdana, sans-serif; }

Теперь давайте зададим каждому параграфу свой стиль: p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#sn{ font-style:normal; } p#so{ font-style:oblique; } p#si{ font-style:italic; }

Font-variant Это свойство css задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal. p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#so{ font-variant:small-caps; } Давайте изменим таблицу стилей предыдущего примера на такую:

Font-weight Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка). При этом значению normal соответствует числовое значение 400, а значению bold Давайте зададим это свойство нашему второму параграфу: p#sn, p#so, p#si{ font-family: Verdana, sans-serif; } p#so{ font-weight: bold; }

Font-size Это свойство задает размер шрифта. Задавать размер в css можно тремя способами: с помощью ключевых слов (xx-small, x-small, small, medium, large, x- large, xx-large, smaller, large), с помощью относительных единиц (% и em), с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры). Использовать ключевые слова пока не рекомендуется, так как разные браузеры по-разному их отображают. С помощью относительных единиц задаются размеры относительно элемента-предка. З адавать размер с помощью единиц измерения кажется наиболее удачным, по крайней мере, на сегодняшний день. Здесь следует сказать несколько слов о единицах измерения.

Существует три относительных единицы измерения: px - равен одной точке на экране, называемой пикселом. em - равен высоте шрифта, используемого в данном элементе. ex - равен высоте строчной буквы "х" шрифта, используемого в данном элементе. И пять абсолютных единиц измерения: in - равен 1 дюйму (2,54 см). pt - равен 1/72 дюйма. pc - равен 1/6 дюйма. mm - равен 1 миллиметру. sm - равен 1 сантиметру. Абсолютные единицы имеют фиксированный размер, а относительные устанавливают размер относительно какой-то другой единицы У наших пользователей разные диагонали мониторов и разные разрешения экранов, и мы не знаем какие они. И то, что будет смотреться хорошо на одном экране, будет совершенно нечитабельным на другом. Поэтому для web-страниц лучше использовать только три единицы измерения: pt - для "фиксированного" дизайна сайта, % - для "резинового" дизайна и em - для пропорционального изменения размера.

Давайте зададим для наших параграфов размер в 12 пикселов, для второго параграфа увеличим его на 20%, а для третьего - уменьшим на 10% от базового (т.е. от 12 пикселов): Задание p#sn, p#so, p#si{ font-family: Verdana, sans-serif; font- size:12px; } p#so{ font-size:1.2em; } p#si{ font-size:0.8em; }

Сокращенная запись свойства font В этом случае значения всех свойств перечисляются через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Причем, любое из свойств, кроме font-size и font-family, можно не указывать. p#sn, p#so, p#si{ font:italic 12px Verdana, sans-serif; } p#so{ font-size:1.2em; } p#si{ font-style:normal; } Таким образом, сначала сокращенной записью мы задали значения свойства font для всех параграфов, а затем задали отличия для второго и третьего параграфов.

Псевдоэлементы Есть несколько элементов, которых не существует в HTML, но они присутствуют на странице (первая буква слова и первая строка абзаца). Такие элементы и называют псевдоэлементами. Им можно задавать стиль, также как и элементам HTML. first-letter - задает стиль первой букве слова. Выделим первую букву параграфа красным цветом, для этого в таблице стилей напишем: p:first-letter{ color:red; } first-line - задает стиль первой строке абзаца p:first-letter{ color:red; } p:first-line{ color:blue; }

Свойства – текст Text-decoration Это свойство отвечает за оформление текста. Может принимать следующие значения: none - у текста нет оформления. underline - текст подчеркивается. overline - текст надчеркивается линией, расположенной над текстом. line-through - текст отображается зачеркнутым. blink - текст становится мигающим (не работает в IE). Достаточно распространенный прием убрать подчеркивание у ссылок, а при наведении курсора подчеркивание будет снова появляться. Для этого в таблице стилей нужно написать: a{ text-decoration:none; } a:hover{ text-decoration: underline; }

Text-align Это свойство отвечает за горизонтальное выравнивание текста. Может принимать следующие значения: left - выравнивание по левому краю. center - выравнивание по центру. right - выравнивание по правому краю. justify - выравнивание по ширине. a{ text-decoration:none; text-align:center; } a:hover{ text-decoration:underline; }

Text-indent Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). p{ text-indent:1.2em; }

Text-transform Это свойство отвечает за видоизменение текста, точнее за смену регистра. Используются следующие значения: capitalize - меняет первую букву каждого слова на заглавную. uppercase - меняет все буквы на заглавные. lowercase - меняет все буквы на строчные. none - изменений не происходит. p#sc{ text-transform:capitalize; } p#su{ text-transform:uppercase; } p#sl{ text-transform:lowercase; }

Интервалы В CSS есть несколько свойств, регулирующих расстояния между словами, буквами в словах и строками. word-spacing - задает интервал между словами. letter-spacing - задает интервал между буквами. line-height - задает интервал между строками. Значения этих свойств задаются в единицах измерения и %. Вернемся к примеру с параграфами и изменим таблицу стилей: p#su{ word-spacing:10px; } p#sl{ letter-spacing:5px; } Обратите внимание на интервал между строками абзаца. Давайте его увеличим, для этого добавим в нашу таблицу стилей свойство line-height: p{ line-height:200% } p#su{ word-spacing:10px; } p#sl{ letter-spacing:5px; }

Задание Оформим следующую страницу

Блоки В CSS модель документа представляется блоком. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Итак, у блока есть содержимое, например, для элемента p - это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого. Затем идет граница блока (border), которая может быть как видимой, так и невидимой. Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента. Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.

Пример Для того, чтобы увидеть отступы, поля и границы, зададим границу (пока не вдаваясь в подробности из чего она состоит): Пусть у нас есть html-страница с двумя абзацами: p{ border:1px solid red; } Сейчас наша страница в браузере выглядит так:

Как мы уже знаем, отступы от границы задаются свойством padding, зададим его для параграфов: p{ border:1px solid red; padding:10px; } Посмотрим на результат в браузере:

Теперь у нас есть отступы внутри блока. Задание полей отделит блоки друг от друга: p{ border:1px solid red; padding:10px; margin:50px; } Посмотрим на результат в браузере:

Наконец, зададим размеры блоков параграфов: p{ border:1px solid red; padding:10px; margin:50px; width:100px; height:50px; } Посмотрим на результат в браузере:

Свойства - margin, padding, border div - этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами Создайте html-страницу со следующим кодом:

Border (граница) Границы в css можно задавать отдельно для каждой стороны: border-top - верхняя граница. border-right - правая граница. border-bottom - нижняя граница. border-left - левая граница. Каждый сегмент границы может иметь свои характеристики: цвет, толщину и тип линии. Для этого к свойству границы через дефис необходимо дописать ключевые слова : color (для цвета), width (для толщины) и style (для типа линии). Например, border-top-color определяет цвет верхней границы, а border-left-style - тип линии для левой границы. Если все четыре границы будут иметь одинаковые значения, то следует воспользоваться сокращенной записью: border-color - цвет всех границ. border-width - толщина всех границ. border-style - стиль всех границ.

Значениями свойства color могут быть именные цвета (red, blue и т.д.), шестнадцатеричные коды цветов (типа #FFCCFF) и десятичные коды в модели RGB (типа rgb(255, 0, 0)). Значениями свойства width могут быть ключевые слова: thin (тонкая граница), medium (средняя граница) и thick (толстая граница). А также любая единица измерения. Значениями свойства style могут быть следующие ключевые слова: none - граница отсутствует. dotted - граница состоит из точек. dashed - граница в виде пунктирной линии. solid - граница отображается сплошной линией. double - граница отображается двойной сплошной линией. groove - граница отображается вдавленной объемной линией. ridge - граница отображается выпуклой объемной линией. inset - граница отображается так, что весь блок выглядит вдавленным. outset - граница отображается так, что весь блок выглядит выпуклым.

Давайте зададим нашему первому div-у разные границы, чтобы посмотреть, как это работает: #first{ border-bottom-style:double; border-bottom-color:red; border-left-style:solid; border-left-width:2px; border-left-color:blue; border-right-style:solid; border-right-width:2px; border-right-color:yellow; border-top-style:dotted; border-top-color:green; } Посмотрим на результат в браузере: Давайте для всех элементов нашей страницы зададим один стиль границ, чтобы было удобнее разбираться с отступами и полями далее: #first, #second, #third, #fourth{ border: 1px solid red; }

Margin (поля) Как вы помните, поля задают свободное пространство вокруг элемента. Как и границы, поля в css можно определять отдельно для верхней, правой, нижней и левой сторон. Для этого используются свойства: margin-top - ширина верхнего поля. margin-right - ширина правого поля. margin-bottom - ширина нижнего поля. margin-left - ширина левого поля. Чаще используется сокращенная запись margin, где через пробел указываются ширина верхнего, правого, нижнего и левого полей. Причем, именно в таком порядке. p{ margin:5px 10px 15px 10px; }

Если значения верхнего и нижнего полей совпадают, и значения правого и левого полей совпадают, то сокращенная запись выглядит еще короче: p{ margin:5px 10px; } Если же у всех полей ширина одинакова, то сокращенная запись выглядит так: p{ margin:5px; } Давайте для нашего примера зададим всем элементам одинаковую ширину полей - в 10 пикселов: #first, #second, #third, #fourth{ border: 1px solid red; margin:10px; }

Padding (отступы) Отступы позволяют отделить содержимое блока от границы. Параметры отступов в css можно задать для каждой стороны отдельно, используя следующие свойства: padding-top - ширина верхнего отступа. padding-right - ширина правого отступа. padding-bottom - ширина нижнего отступа. padding-left - ширина левого отступа. Значения свойств могут задаваться в различных единицах длины или в процентах. Проценты вычисляются относительно ширины блока. В качестве значения может выступать только положительная величина. Давайте зададим для элементов нашей страницы отступы: сверху и снизу - по 10 пикселов, а справа и слева - по 5 пикселов. #first, #second, #third, #fourth{ border: 1px solid red; margin:10px; padding:10px 5px; }

ПОЗИЦИОНИРОВАНИЕ БЛОКОВ Предположим, у нас есть вот такая стандартная html-страница: Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а.

Теперь, на странице style.css зададим те свойства, которые уже знаем, а именно ширину, высоту и фон каждого блока: #header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; } Такое позиционирование элементов называется позиционированием в нормальном потоке. Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.

Схемы позиционирования в CSS абсолютное позиционирование относительное позиционирование плавающая блоковая модель Для определения схемы позиционирования используется свойство position, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования: static - блок позиционируется в нормальном потоке. Это значение по умолчанию. relative - относительное позиционирование (относительно нормального потока). absolute - абсолютное позиционирование fixed - фиксированное позиционирование (фиксируется относительно области просмотра).

Абсолютное позиционирование При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства: left - указывает на сколько надо сместить блок относительно левого края окна. right - указывает на сколько надо сместить блок относительно правого края окна. top - указывает на сколько надо сместить блок относительно верхнего края окна. bottom - указывает на сколько надо сместить блок относительно нижнего края окна.

Наши блоки header, menu и footer позиционируются в нормальном потоке, поэтому свойство position для них задавать не надо. А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu, т.е. на 190 пикселов, а от верхнего края окна на высоту блока header, т.е. на 100 пикселов. #header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; position:absolute; left:190px; top:100px; } #footer{ background:darkred; width:715px; height:30px; }

Наш блок расположился не совсем так, как ожидалось. Это происходит потому, что у браузеров есть свои, встроенные таблицы стилей. Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px, т.е. явно указать размер полей (в нашем примере - их отсутствие). body{ margin:0px; } Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера Добавим это в таблицу стилей:

Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента, например, вот так:

Тогда в нашу html-страницу, в div id="content" мы добавим div id="news": Тогда в таблице стилей смещение мы будем указывать относительно блока content: #news{ background:yellow; width:150px; height:280px; position:absolute; left:365px; top:10px; } Ширина блока content равна 525 пикселов, а ширина блока news пикселов. Значит, смещение от левого края равно ( ) 375 пикселов, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365 пикселов. Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news пикселов. Значит смещение от верхнего края может быть не более ( ) 20 пикселов, мы сделали 10.

Относительное позиционирование При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке. Давайте зададим в таблице стилей размеры и границы этих блоков: Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило: #blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; } #blok2{ position:relative; left:50px; top:25px; }

Плавающие блоки Плавающие блоки определяются свойством float, который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта: left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны. right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны. none - блок не перемещается и позиционируется согласно свойству position. И страница style.css со следующим кодом: #blok1{ border:1px solid red; width:150px; height:50px; } Сейчас наша страница в браузере выглядит так :

Давайте сделаем наш блок плавающим и прижмем его к левому краю: #blok1{ border:1px solid red; width:150px; height:50px; float:left; } Теперь давайте прижмем блок к правому краю #blok1{ border:1px solid red; width:150px; height:50px; float:right; }

Давайте добавим в нашу html-страницу еще один блок: #blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; } #blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:left; }

А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство clear, которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этого свойства может быть задано одно из четырех значений: left - блок должен располагаться ниже всех левосторонних блоков. right - блок должен располагаться ниже всех правосторонних блоков. both - блок должен располагаться ниже всех плавающих блоков. none - никаких ограничений нет, это значение по умолчанию. Давайте в нашем последнем примере зададим это свойство для второго блока: #blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right; }

Как можно сделать с помощью плавающих блоков страницу. На странице style.css зададим сначала размеры и фон для наших блоков: Итак, код самой страницы следующий: #header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; float:left; } #content{ background:oldlace; width:525px; height:300px; float:left; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; float:right; }

Наша страница в браузере выглядит так: Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке content. А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева. Почему же у нас так не получилось? Потому что наш блок news в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш div="news" выше текста (т.е. до слова "контент"):

А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей: #news{ background:yellow; width:150px; height:280px; float:right; margin:10px; }

Слои Мы можем создать несколько слоев, на каждом разместить необходимые элементы и пронумеровать слои с помощью свойства z- index. Чем больше номер, тем выше слой находится в стопке слоев. Слои часто используются при создании раскрывающихся меню. Подменю открываются на одном и том же месте, потому что написаны они на разных слоях. В зависимости от того, на какой пункт меню вы наводите мышку, видимым становится тот или иной слой, остальные становятся невидимыми (прозрачными). Давайте сделаем html-страницу с таким меню. Сначала создадим сами пункты меню:

Зададим стиль для нашего меню на странице style.css: #menu{ width:100px; height:100px; border:1px solid red; margin:5px; padding:5px; background:yellow; position:absolute; left:10px; top:10px; } #menu a{ color:#2b3845; text-decoration:none; display:block; } #menu a:hover{ color:#2b3845; text-decoration:underline; display:block; } Как видите, мы выбрали абсолютное позиционирование для нашего меню и это не случайно. Все подменю нам надо будет расположить на одном и том же месте, а сделать это можно именно с абсолютным позиционированием.

Добавим на html-страницу блоки подменю:Добавим это в таблицу стилей: #menu{ width:100px; height:100px; border:1px solid red; margin:5px; padding:5px; background:yellow; position:absolute; left:10px; top:10px; } #menu a{ color:#2b3845; text-decoration:none; display:block; } #menu a:hover{ color:#2b3845; text-decoration:underline; display:block; } #book, #movie, #musik, #game{ background:yellow; border:1px solid red; position:absolute; left:110px; top:15px; width:120px; height:100px; } #book{ z-index:1; } #movie{ z-index:2; } #musik{ z-index:3; } #game{ z-index:4; } #book a, #movie a, #musik a, #game a{ display:block; color:red; text-decoration:none; } #book a:hover, #movie a:hover, #musik a:hover, #game a:hover{ display:block; color:pink; text-decoration:underline; }

Откройте нашу страницу в браузере. Как и ожидалось, мы видим только подменю игр (т.е. верхний слой). Но нам надо, чтобы при открытии страницы отражалось только меню, а подменю открывались бы при наведении курсора мыши на пункт меню. Для этого сделаем все слои прозрачными (визуально невидимыми), добавим соответствующее свойство (visibility:hidden) в таблице стилей #book, #movie, #musik, #game{ background:yellow; border:1px solid red; position:absolute; left:110px; top:15px; width:120px; height:100px; visibility:hidden; }... Обновите страницу в браузере, теперь мы видим только меню, но знаем, что все подменю находятся на своем месте. Нам осталось только сделать так, чтобы при наведении курсора мыши на пункт меню, слой с соответствующим подменю становился видимым. К сожалению, средствами CSS этого сделать нельзя. CSS отвечает за ЧТО и ГДЕ поместить на странице, а на вопросы КОГДА и КАК отобразить отвечают сценарии, написанные на различных языках (например, на javascript). Ниже приведены три шага, которые необходимо сделать, чтобы наше меню заработало как надо.

Шаг 1 Создайте, например в блокноте, новый файл, скопируйте и вставьте в него следующий код: function books(){ document.getElementById("book").style.visibility='visible'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='hidden'; } function movies(){ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='visible'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='hidden'; } function musiks(){ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='visible'; document.getElementById("game").style.visibility='hidden'; } function games(){ document.getElementById("book").style.visibility='hidden'; document.getElementById("movie").style.visibility='hidden'; document.getElementById("musik").style.visibility='hidden'; document.getElementById("game").style.visibility='visible'; } Это javascript-функции, которые делают видимыми наши подменю. Сохраните этот файл под именем script.js (только не забудьте в типе файла выбрать "All types") в папку, где у вас лежат html-страница и css- страница.

Шаг 2 В head вашей html-страницы добавьте строку подключения к странице script.js: Шаг 3 В тело html-страницы надо добавить события, при которых будут срабатывать javascript-функции. Событие у нас одно - наведение курсора мыши - onMouseOver. А вот функций, которые должны сработать - четыре, по одной на каждый пункт меню. Поменяйте html-код нашего меню на следующий: Так мы указали, что при наведении курсора мыши на пункт меню "Книги" должна сработать функция "books", которая и сделает видимым слой с нужным подменю. Аналогично и для других пунктов меню.

Списки Как всегда CSS предоставляет большие возможности при создании списков, чем только HTML. Собственно свойств для списков существует всего три: list-style-type - определяет внешний вид маркера или нумератора. list-style-image - определяет пользовательское изображение маркера. list-style-position - определяет положение маркеров относительно блока. Создание маркированного списка list-style-type Для маркерованных списков ничего нового, все теже значения, что и в HTML: disk - закрашенный кружок. circle - незакрашенный кружок. square - закрашенный квадрат.

Код страницы style.css: #spisok1{ list-style-type:disk; } #spisok2{ list-style-type:circle; } #spisok3{ list-style-type:square; } Для этого создадим три одинаковых списка, но каждому в стилях зададим свое значение свойства. Итак, код html- страницы:

Создание нумерованного списка list-style-type decimal - десятичные числа. lower-roman - строчные римские цифры. upper-roman - прописные римские цифры. lower-alpha - строчные латинские буквы. Код страницы style.css: #spisok1{ list-style-type:decimal; } #spisok2{ list-style-type:lower-roman; } #spisok3{ list-style-type:upper-roman; } #spisok4{ list-style-type:lower-alpha; }

list-style-image Это свойство позволяет задать свой вид маркера. Для этого сначала надо создать картинку с маркером. Предположим у нас есть вот такая картинка и мы хотим, чтобы она была маркером. Создадим список: #spisok{ list-style-image:url(marker.gif); } Обратите внимание, для данного примера картинка лежит в той же папке, что и наши страницы. Если же поместить картинку, например, в папку images, то и путь к ней надо указать, как list-style-image:url(images/marker.gif);. В общем, где бы не лежала картинка, вы должны правильно указать путь к ней.

list-style-position Это свойство определяет положение маркера: внутри блока - inside или снаружи - outside. Зададим стили для списков с разными значениями: #sp{ width:150px; } #spisok1{ list-style-position:inside; } #spisok2{ list-style-position:outside; }