- •Учебник css для начинающих.
- •Версия для печати раздела "Учебник css" сайта www.Webremeslo.Ru
- •Введение
- •Что такое css?
- •Глава 1 Внедрение css в html документ.
- •Атрибут style.
- •Css в отдельном внешнем файле.
- •Полезные советы:
- •Глава 2 Свойства текста.
- •Выравнивание текста.
- •Оформление текста.
- •Отступ первой строки.
- •Трансформация текста
- •Вертикальное выравнивание
- •Пробелы и перенос строки.
- •Расстояние между словами.
- •Межсимвольное расстояние.
- •Интерлиньяж
- •Полезные советы:
- •Глава 3 Свойства шрифта.
- •Стиль шрифта
- •Начертание шрифта
- •Размер шрифта
- •Жирность шрифта
- •Семейство шрифта
- •Прараметры шрифта
- •Полезные советы:
- •Глава 4 Цвет и фон.
- •Цвет элемента.
- •Цвет фона элемента.
- •Фоновое изображение.
- •Фиксация фонового изображения.
- •Повторение фонового изображения.
- •Позиция фонового изображения.
- •Полезные советы:
- •Глава 5 Границы элемента.
- •Стиль границы.
- •Толщина границы.
- •Цвет границы.
- •Границы справа слева сверху и снизу отдельно.
- •Границы таблицы.
- •Полезные советы:
- •Глава 6 Классы и идентификаторы.
- •Классы css.
- •Идентификаторы
- •Полезные советы:
- •Глава 7 Размеры элемента. Блоки и строки.
- •Ширина и высота блочных элементов.
- •Управление содержанием элемента.
- •Минимальные и максимальные размеры элемента.
- •Полезные советы:
- •Глава 8 Поля и отступы.
- •Возможные значения margin и padding.
- •Дочерние свойства margin и padding.
- •Полезные советы:
- •Глава 9 Курсоры.
- •Стандартные курсоры.
- •Пользовательские курсоры.
- •Полезные советы:
- •Глава 10 Форматирование.
- •Показ элементов.
- •Видимость элемента.
- •Видимая часть элемента.
- •Полезные советы:
- •Глава 11 Поплавки.
- •Обтекание элемента
- •Запрет обтекания
- •Блочная вёрстка.
- •Полезные советы:
- •Глава 12 Позиционирование.
- •Абсолютное позиционирование.
- •Относительное позиционирование.
- •Фиксированное позиционирование.
- •Полезные советы:
- •Глава 13 Стиль списка.
- •Вид маркера в списке.
- •Пользовательский маркер рисунок.
- •Стиль обтекания маркера списком.
- •Полезные советы:
- •Глава 14 Полоса прокрутки.
- •Кроссбраузерность свойства scrollbar.
- •Полезные советы:
- •Глава 15 Псевдоклассы.
- •Псевдокласс hover.
- •Псевдоклассы и ссылки.
- •Псевдокласс focus.
- •Псевдокласс first-child.
- •Язык текста.
- •Полезные советы:
- •Глава 16 Псевдоэлементы.
- •Стиль первой буквы.
- •Стиль первой строки.
- •Контент.
- •Псевдоэлемент ::selection.
- •Полезные советы:
Цвет элемента.
Для того, что бы перекрасить текст, какого либо, элемента в нужный нам цвет необходимо воспользоваться свойством color и присвоив ему нужное значение - собственно цвет.
Как уже сказано выше цвет в CSS может быть задан следующими методами:
#ff0000- шестнадцатеричное значение цвета RGB.
red- именное значение цвета.
RGB(255,0,0)- значение цвета RGB.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Цвет элемента</title> </head> <body> <div style="color: red">Блок 1</div> <div style="color: #ff0000">Блок 2</div> <div style="color: RGB(255, 0, 0)">Блок 3</div> </body> </html>
Цвет фона элемента.
А вот свойство background-color - определяет цвет фона элемента.
Цвет фона может иметь следующие значения:
#ff0000- шестнадцатеричное значение цвета RGB.
red- именное значение цвета.
RGB(255,0,0)- значение цвета RGB.
transparent- прозрачный фон. (по умолчанию)
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Цвет фона элемента</title> </head> <body style="background-color: #fffacd"> <div style="background-color: white">Белый блок</div> <div style="background-color: #0000ff">Синий блок</div> <div style="background-color: RGB(255,0,0)">Красный блок</div> <div style="background-color: transparent">Прозрачный блок</div> </body></html>
Фоновое изображение.
Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image.
Возможные значения background-image:
url- путь к файлу с изображением.
none- изображение отсутствует. (по умолчанию)
Для того чтобы сделать некую картинку фоном для элемента необходимо указать к ней путь согласно следующего синтаксиса url(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке.
В примере ниже в качестве основного фона (элемент body) используется одно графическое изображение, а для блока div другое, возможность использования различных фоновых изображений для разных элементов страницы позволяет решать практически любые дизайнерские задумки.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Фоновое изображение</title> <style type="text/css"> body{ background-image: url(fon.jpg); } div{ background-image: url(fon1.gif); border: 5px double #245404; height: 250px; } p{ text-align: center; color: #008040; font: bold 24px Arial; } </style> </head> <body> <p>Страница с фоновым изображением</p> <div><p>Блок с фоновым изображением</p></div> </body></html>
Если рисунок не заполняет собой весь фон элемента, то он выкладывается "плиткой".
Фиксация фонового изображения.
Если на странице или в каком либо блоке присутствует полоса прокрутки, то фоновое изображение будет прокручиваться вместе с остальным содержанием данного блока.
Зафиксировать фоновое изображение позволяет свойство background-attachment, которое может принимать одно из двух значений:
fixed- фиксированный фон.
scroll- подвижный фон (по умолчанию).
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Фиксация фонового изображения</title> <style type="text/css"> body{ background-image: url(fon.jpg); background-attachment: fixed; } h1{ color: #0000ff; font: bold 28px; } div{ line-height: 2; white-space: pre; color: #0000ff; font-size: 24px; } </style> </head> <body> <h1>Песенка мамонтенка</h1> <div>По синему морю, к зелёной землеПлыву я на белом своём корабле.... ... ...... ... ...Музыка: В. Шаинский Слова: Д. Непомнящий </div> </body></html>