Свойства CSS - цвет и фон

1.

Свойства CSS - цвет и фон.
Свойства CSS - шрифты.
Свойства CSS - текст. Свойства
CSS – слои, Свойства CSS –
списки

Свойства - color (цвет) и background (фон)
body{
color:green;
}
h1{
color:#FF0000;
color:rgb(255,0,0);
}
background-repeat
задает
возможность
повторения фонового изображения.
1. repeat - повторять изображение по
горизонтали и вертикали.
2. repeat-x - повторять изображение только по
горизонтали.
3. repeat-y - повторять изображение только по
вертикали.
4. no-repeat - не повторять изображение.
background-color - задает цвет фона.
body{
background-color:#243CED;
}
body{
background-image:url(picture.gif);
background-repeat:repeat-x;
}
Color – задает цвет текста
background-image - задает фоновое изображение
body{
background-image:url(picture.gif);
}

3.

Свойства - color (цвет) и background (фон)
background-attachment - указывает, должно ли
фоновое изображение прокручиваться вместе с
текстом элемента или оно должно оставаться
неподвижным.
1. scroll - фон прокручивается вместе с текстом.
2. fixed - фоновое изображение фиксируется
относительно окна браузера, и во время
прокрутки текста оно остается неподвижным.
Сокращенная запись свойства background
body{
background-image:url(picture.gif);
background-attachment:fixed;
}
h1 {
body{
background:url(picture.gif) no-repeat #33CCFF center top;
color:yellow;
}
Пример 1.
color: blue;
}
p{
color: green;
background-position - задает расположение
элемента относительно окна браузера.
body{
background-image:url(picture.gif);
background-position:10% 30%;
}
}
.background-example {
background-color: #f0f0f0;
}
a{
color: red;
}

4.

Свойства – шрифты Font
Font-family - Это свойство css задает гарнитуру
шрифта
1. Serif - шрифты с засечками, например, Times
New Roman.
2. Sans-serif - шрифты рубленные, без засечек,
например, Arial.
3. Monospace - моноширинные шрифты,
например, Courier New.
4. Cursive - курсивные шрифты, например, Calisto
MT.
5. Fantasy - декоративные шрифты, например,
Torhok.
body{
font-family: Verdana, sans-serif;
}
Font-style
–
Это
свойство
css
задает
стиль
шрифта: normal (обычный), oblique (наклонный), italic (курси
вный).
<html>
<head>
<title>css шрифты</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Текст в параграфе с идентификатором sn.
Текст в параграфе с идентификатором so.
Текст в параграфе с идентификатором si.
</body>
</html>
p#sn, p#so, p#si{
font-family: Verdana, sans-serif;
}
p#sn{
font-style:normal;
}
p#si{
font-style:italic;
}

5.

Свойства – шрифты Font
Font-variant - Это свойство css задает вариант написания
букв из двух возможных: normal (обычный) и small-caps
(малые прописные буквы).
p#so{
font-variant:small-caps;
}
Font-weight - Это свойство css задает толщину букв
шрифта. В качестве значений выступают числа: 100 - 900.
А также ключевые слова: normal (нормальный), bold
(полужирный), bolder (более жирный по отношению к
базовому, унаследованному от предка) и lighter (менее
жирный по отношению к базовому, унаследованному от
предка).
p#so{
font-weight:bold;
}
Font-size - Это свойство задает размер шрифта.
Существует три относительных единицы измерения:
1. px - равен одной точке на экране, называемой пикселом.
2. em - равен высоте шрифта, используемого в данном
элементе.
3. ex - равен высоте строчной буквы "х" шрифта, используемого
в данном элементе.
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
p#sn, p#so, p#si{
font:italic 12px Verdana, sans-serif;
}

6.

Свойства - текст
Text-align - Это свойство отвечает за горизонтальное
выравнивание текста. Может принимать следующие
значения:
1. left - выравнивание по левому краю.
2. center - выравнивание по центру.
3. right - выравнивание по правому краю.
4. justify - выравнивание по ширине.
a{
text-align:center;
}
Text-indent - Это свойство отвечает за отступы в абзацах.
Отступы задаются в единицах измерения и %, могут быть
как положительными (красная строка), так и
отрицательными (висячая строка).
p{
text-indent:1.2em;
}
Text-transform - Это свойство отвечает за видоизменение текста,
точнее за смену регистра. Используются следующие значения:
1. capitalize - меняет первую букву каждого слова на заглавную.
2. uppercase - меняет все буквы на заглавные.
3. lowercase - меняет все буквы на строчные.
4. none - изменений не происходит.
p{
text-transform:capitalize;
}
p{
text-transform:uppercase;
}
Интервалы - В CSS есть несколько свойств, регулирующих
расстояния между словами, буквами в словах и строками.
1. word-spacing - задает интервал между словами.
2. letter-spacing - задает интервал между буквами.
3. line-height - задает интервал между строками.
p{
line-height:200%
}
p#su{
word-spacing:10px;
}

7.

8.

Примеры
Пример 2.
Пример 1.
h1, h2 {
font-family: 'Roboto', sans-serif; /* Используем
шрифт Roboto */
}
h1 {
font-size: 36px;
}
h2 {
font-size: 24px;
}
p{
font-family: Arial, sans-serif;
}
.custom-paragraph {
font-size: 18px;
font-weight: bold;
}
.red-text {
color: red;
}
.bold-text {
font-weight: bold;
}
.italic-text {
font-style: italic;
}
.underline-text {
text-decoration: underline;
}
.strike-through-text {
text-decoration: line-through;
}
<body>
Красный текст
Жирный текст
Курсивный текст
Подчеркнутый текст
Зачеркнутый текст
</body>

9.

Самостоятельные задания
Задание 1: Изменение цветов и шрифта
Задание 3: Стилизация ссылок
Создайте HTML-документ с заголовком "Моя первая вебстраница".
Используя CSS, установите следующие стили:
Создайте HTML-документ с несколькими ссылками.
1.
2.
3.
1.
2.
4.
Заголовок должен быть синего цвета.
Параграфы текста должны быть черного цвета.
Используйте шрифт Arial или любой другой шрифт без
засечек.
Задайте размер шрифта для параграфов равным 16
пикселям.
Используя CSS, установите следующие стили для ссылок:
3.
Ссылки должны иметь синий цвет.
При наведении курсора мыши, цвет ссылки должен
измениться на красный.
Ссылки должны быть подчёркнутыми.
Задание 4: Работа с шрифтами
Задание 2: Эффекты текста
Создайте HTML-документ с несколькими абзацами текста.
Создайте HTML-документ с заголовком "Заголовок с эффектами".
Используя CSS, реализуйте следующие эффекты текста:
Используя CSS, реализуйте следующее:
1.
2.
3.
4.
Заголовок должен быть красного цвета.
Заголовок должен быть написан курсивом.
Параграф текста должен быть с фоновым цветом #f0f0f0 и
тёмно-серым цветом текста.
Текст в параграфе должен быть выделен жирным
начертанием.
1.
2.
3.
4.
Установите шрифт "Georgia" для всех абзацев.
Установите крупный размер шрифта для первого абзаца (24
пикселя).
Установите курсивное начертание для второго абзаца.
Установите жирное начертание для третьего абзаца.

10.

Самостоятельная работа 2
1. Создайте папку в удобном для вас месте на вашем компьютере
2. В этой папке создайте новый HTML документ - index.html
3. В index.html создайте HTML скелет документа
4. Создайте новый CSS файл - style.css
5. Подключите CSS файл к HTML файлу
6. Создайте заголовок первого уровня в теге body и напишите там текст "Оформление текста"
7. Добавьте данному заголовку класс title
8. В CSS файле в самом верху создайте селектор для тега body и напишите следующие стили - шрифт
Arial, sans-serif, размер шрифта 16px, цвет текста #333, межстрочный отступ 1.5
9. В CSS файле создайте селектор для класса title, и напишите следующие стили - размер шрифта 40px,
цвет текста #f03333, межстрочный отступ 1.2, все буквы заглавные
10.После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор
случайного текста lipsum.com
11.После абзаца создайте заголовок второго уровня, напишите текст "Заголовок второго уровня" и придайте
ему класс subtitle
12.В CSS файле создайте селектор для класса subtitle, и напишите следующие стили - размер шрифта
30px, цвет текста #12ac11, межстрочный отступ 1.2, подчеркивание текста снизу
13.После заголовка создайте абзац и напишите там немного текста, можете использовать сайт-генератор
случайного текста lipsum.com

English Русский Rules