CSS. Цвет и фон, шрифт, текст презентация

CSS (Cascading Style Sheets)
Каскадные таблицы стилей
CSS - это свод стилевых описаний, тех или иных HTML тегов, который может быть применён как к отдельному тегу - элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта.
CSS является дополнением к HTML, которое значительно расширяет его возможности.

Возможности CSS1:
Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
И др.

Возможности CSS 2:
Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.
Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
И др.

Возможности CSS3:
Box-shadows
Text shadows
фоны из нескольких изображений
фоны из нескольких изображений (Multiple backgrounds)
рамка из изображений (Border images)
уровни прозрачности (Opacity levels)
RGBA coloring
закругленные углы (Rounded corners)
анимация
введение переменных (variables)
И др.

БАЗОВЫЙ СИНТАКСИС CSS

Способы применения CSS
Инлайн / in-line (атрибут style)
Внутренний (тэг style)
Внешний / external (ссылка на таблицу стилей)

Инлайн / in-line (атрибут style)
Пример: Красный цвет фона
Example style = "background-color: #FF0000;">
This is a red page

Внутренний (тэг style)
Example
<br></div></h3><div class="slides-content">body {background-color: red;} <br>
This is a red page

Внешний / external
1. Создаём HTML-документ, например default.htm
2. Создаём таблицу стилей, например style.css

My document "text/css"
href= "style/style.css">

ЦВЕТ И ФОН

Повторение/мультипликация фонового изображения

Блокировка фонового изображения

Расположение фонового рисунка
Можно использовать слова top, bottom, center, left и right

Пример1
h1 { color: #ff0000; }

Пример2
body { background-color: #FFCC66; }
h1 {
color: #990000;
background-color: #FC9804;
}

Пример3
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}

Пример4
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Пример5
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Пример6
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom; }
h1 {
color: #990000;
background-color: #FC9804;
}

Порядок свойств:
background-color
background-image
background-repeat
background-attachment
background-position

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
ИЛИ
body {
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
}

ШРИФТЫ

два типа имён
имя семейства/family-name;
общее/родовое семейство/generic family;

Пример7
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Стиль шрифта
[font-style]
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}

Вариант шрифта
[font-variant]
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

Вес шрифта
[font-weight]
p {font-family: arial, verdana, sans-serif;}
td {
font-family: arial, verdana, sans-serif; font-weight: bold;
}

Размер шрифта
[font-size]
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
p {font-size: 120%;}
'px' и 'pt' дают абсолютное значение размера шрифта,
'%' - относительное.

Порядок свойств font
font-style
font-variant
font-weight
font-size
font-family

Пример8
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

Сокращенная запись
font: font-style font-variant font-weight font-size font-family
p { font: normal small-caps 12px Courier; }
p { font: italic bold 30px arial, sans-serif; }

Пример9
p { font: 12pt/10pt sans-serif; }
p { font: bold italic 150% serif; }

ТЕКСТ

Отступы
[text-indent]
p { text-indent: 30px; }

Выравнивание текста
[text-align]
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }

Декоративный вариант
[text-decoration]
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
ТЕКСТ
ТЕКСТ

Интервал между буквами [letter-spacing]
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }

Трансформация текста
[text-transform]