CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей. CSS это язык стилей, определяющий отображение HTML-документов HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого

управление отображением множества документов с помощью одной таблицы стилей; более точный контроль над внешним видом страниц; различные представления для разных носителей информации (экран, печать, и т.д.); сложная и проработанная техника дизайна.

Метод 1: Инлайн/In-line (атрибут style) Example This is a red page

Метод 2: Внутренний (тэг style) Example body {background-color: #FF0000;} This is a red page

Метод 3: Внешний (ссылка на таблицу стилей) My document

Цвет переднего плана : свойство 'color' h1 { color: #ff0000; } Свойство 'background-color body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } Фоновые изображения [background- image] body { background-color: #FFCC66; background- image: url("butterfly.gif"); }

Повторение/мультипликация фонового изображения [background-repeat] Background-repeat: repeat-x Рисунок повторяется по горизонтали background-repeat: repeat-y Рисунок повторяется по вертикали background-repeat: repeat Рисунок повторяется по горизонтали и вертикали background-repeat: no-repeat Рисунок не повторяется Блокировка фонового изображения [background-attachment] Background-attachment: scroll Изображение прокручивается вместе со страницей - разблокировано Background-attachment: fixed Изображение блокировано

Расположение фонового рисунка [background- position] background-position: 2cm 2cm Рисунок расположен на 2 cm слева и на 2 cm сверху background-position: 50% 25% Рисунок расположен по центру и на четверть экрана сверху background-position: top right Рисунок расположен в правом верхнем углу страницы Сокращённая запись [background] [background-color] | [background-image] | [background- repeat] | [background-attachment] | [background-position] background: #FFCC66 url(pic.gif") no-repeat fixed right bottom;

Семейство шрифта [font-family] h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;} Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

Стиль шрифта [font-style] Свойство font- style определяет normal, italic или oblique. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;} Размер шрифта [font-size] Размер шрифта устанавливается свойством font-size. h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;}

Отступы [text-indent] Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам p { text-indent: 30px; } Выравнивание текста [text-align] CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, center илиjustify. th { text-align: right; } td { text-align: center; } p { text-align: justify; }

Декоративный вариант [text-decoration] Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере подчёркнуты, - имеют черту над текстом, а - перечёркнуты. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }

В CSS мы также можем использовать a в качестве селектора: a { color: blue; } Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок. a:link { color: blue; } a:visited { color: red; } a:active { background-color: #FFFF00; } a:hover { color: orange; font-style: italic; }

Группирование элементов с помощью class Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким: Виноград для белого вина: Рислинг Шардонэ Пино Блан Виноград для красного вина: Кабернэ Совиньон Мерло Пино Нуар a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }

Идентификация элемента с помощью id Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id. Глава 1. Глава 1.1 Глава 1.2 Глава 2 Глава 2.1 Глава #c1-2 { color: red; }

Группирование с помощью Элемент можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, может использоваться для визуальных эффектов применимо к отдельным блокам текста. Кто рано ложится и рано встаёт, тот будет здоровым, богатым и умным. span.benefit { color:red; }

Группирование с помощью В то время как используется в элементах уровня блока, как в предыдущем примере, применяется для группирования одного или более блок-элементов. Кроме этого отличия, группирование с помощью работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:

Франклин Д. Рузвелт Гарри Трумэн Джон Ф. Кеннеди Линдон Б. Джонсон Джимми Картер Билл Клинтон Дуайт Д. Эйзенхауэр Ричард Никсон Джэралд Форд Роналд Рейган Джордж Буш Джордж У. Буш #democrats { background:blue; } #republicans { background:red; }

body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

Типы рамок [border-style] h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

Установка ширины [width] Свойством width вы можете определять ширину элемента. Установка высоты [height] Свойством height вы можете определять ширину элемента. div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

Абсолютное позиционирование Элемент, позиционированный абсолютно, не получает никакого пространства к документе. Это означает, что после позиционирования он не оставляет после себя пустое пространство. Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса. #box1 { position:absolute; top: 50px; left: 50px; }

Относительное позиционирование Чтобы позиционировать элемент относительно, установите в свойстве position значение relative. Разница между относительным абсолютным позиционированием состоит в том, как обсчитывается позиционирование. Позиция элемента, размещаемого относительно, обсчитывается относительно его оригинальной позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё занимает в документе пространство после позиционирования. #dog1 { position:relative; left: 350px; bottom: 150px; }

CSS оперирует в трёх измерениях - высота, ширина и глубина. Для этого необходимо присвоить каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером. #ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }