Каскадные таблицы стилей (Cascading Style Sheets, CSS)

1.03M

Category:

internet

Каскадные таблицы стилей CSS (лекция 15)

1. ВВЕДЕНИЕ В СПЕЦИАЛЬНОСТЬ

Лекция 15
«Каскадные таблицы
стилей CSS »
Лектор,
Панфилов Александр Эдуардович
Камышин 2021

2. Каскадные таблицы стилей (Cascading Style Sheets, CSS)

• Особенностью HTML 4 является разделение
содержания (контента) и способа ее отображения
(представления) с помощью использования CSS
• CSS дают возможность дизайнерам описать то, как
будет выглядеть страница в браузере отдельно от
содержания HTML страницы
• Таблица стилей - это набор правил, который
сообщают браузеру, как выполнять отображение
документа
• Каждое такое правило состоит из двух частей:
• селектора, который указывает HTML-тег, к
которому данное правило должно применяться
• описателя стиля, которое описывает свойства,
применяемые к указанному HTML-тегу

3. Каскадные таблицы стилей CSS

• При показе страницы в баузере, HTML код
отвечает на вопрос «Что показывать?", а
CSS код отвечает на вопрос «Как показывать?".
• Например, можно задать, что:
весь текст в таблицах должен
показываться голубым цветом
все ссылки должны показываться курсивом и
жирным шрифтом
• С помощью CSS можно описать классы, которые
сообщают браузеру, как отображать все
элементы данного класса

4. Пример использования CSS

CSS-код:
HTML-код:
<body>
Body text goes here. Lorem ipsum
dolor sit amet.
<div>Div text goes here. This text is
written in a different font.</div>
Body text continued.
<div class="important">This is very
important!</div>
Body text continued. Lorem ipsum
dolor sit amet, consectetur
adipisicing elit.
</body>
body {
font-family: Verdana;
font-size: 9pt;
text-align: right;
}
div {
font-family: Georgia;
}
.important {
background-color: #ffffde;
border: thin black ridge;
font-family: Franklin Gothic Book;
}

5. Каскадные таблицы стилей CSS

Правила стилей могут использоваться тремя
способами:
1. Глобальный. Записываться в отдельный файл
(расширение *.css), ссылка на который (тег
link) включается в HTML документ:
<head>
<link rel="StyleSheet" href="style.css"
type="text/css">
</head>

6. Каскадные таблицы стилей CSS

Правила стилей могут использоваться тремя
способами:
2. Страничный. Встраиваться в HTML документ (тег
style):
Описание цвета и размера
шрифта для тега h1
<head>
<style type="text/css">
H1 { font-size: 20pt; color: red } </style>
</head>
3. Локальный. Встраиваться в HTML элемент (атрибут
style):
<body>
<h1 style="font-size:20pt;
color:red">
//
Заголовок </h1>
</body>

7. Пример использования стилей

<!doctype html>
(1) Ссылка на таблицу стилей
<html>
<head> <title>Стили</title>
<link rel="stylesheet" type="text/css" href="Styles.css">
<style>
p {font-family: Comic Sans MS, Lucida Sans, sans-serif;
font-size: medium;}
(2) Определение стиля
</style>
на уровне страницы
</head>
<body>
<p>Формат по стилям из файла стилей. </p>
<p>Шрифт по стилю, описанному в элементе head </p>
<p style="font-size: 20px; font-style: italic"> Курсив по
встроенному стилю. </p>
(3) Определение стиля,
</body>
встроенное в элемент
</html>

8. Уровни форматирования

Уровень
Где определяется
Глобальный В файле таблицы
(global)
стилей (*.css)
На что действует
Все страницы,
ссылающиеся на
эту таблицу стилей
Страничный В страничном
(page)
элементе head
Все элементы
текущей страницы
Локальный
(inline)
Только текущий
элемент
Внутри HTMLэлемента
• Формат, определенный внутри элемента (локально),
имеет приоритет перед форматом, заданным на
уровне страницы, а тот — перед форматом,
определенным глобально (в таблице стилей).
• Эти правила и дали имя таблицам стилей, которые
называются каскадными.

9. Правила описания стиля

1. Каждое CSS определение (правило) должно иметь имя
(selector) и объявление (declaration). Объявление
(declaration) записывается в фигурных скобках после
имени
2. Объявление состоит из одного или нескольких свойств
(property), разделенных точкой с запятой
3. Каждое свойство состоит из имени, двоеточия и значения
4. Свойство может иметь много значений, разделенных
запятой (например, "Verdana, Arial")
5. При записи CSS кода можно использовать пробелы и
переходы на новые строки, чтобы код был читабельнее

10. Правила таблицы стилей

• Каждое правило
определяет, как будет
форматироваться
один тип элементов
web-страницы
• Часть после точки это уникальное имя
(имя CSS класса),
которое задается для
идентификации
правила
h2 {
font-size: 20px;
font-style: italic;
}
.heading1 {
font-weight: bold;
font-size: large;
color: lime;
font-family: Arial;
}

11. Синтаксис CSS

Селекторы правила CSS могут быть:
• селекторами элементов (a, p, ...)
p { font-family: Garamond, serif; }
• селекторами классов (class)
.note { color: red;
background: yellow;
font-weight: bold; }
• селекторами идентификаторов (id)
#paragraph1 { margin: 0;
width:100px;}
• селекторами псевдоклассов (a:hover…)
a:active { color:yellow; }
• …

12. Атрибуты class и id

• В HTML любому тегу можно присвоить
атрибуты class и/или id
• Эти атрибуты - для идентификации какого-либо
тега либо группы тегов
• Идентификация тегов позволяет обращаться к
конкретному тегу через CSS или JavaScript.
Для чистого HTML они не нужны
• Атрибут class предназначен для
идентификации группы тегов
• Атрибут id предназначен для идентификации
какого-либо конкретного тега

13. Атрибуты class и id

• Значения атрибутов class и id - любая строка,
состоящая из латинских букв, цифр, знака
подчеркивания и дефиса, причем начинаться
значения должны с буквы
• Значения атрибутов class и id чувствительны к
регистру
• В пределах всей HTML-страницы должен
существовать только один тег с определенным
значением тега id
• Любому тегу может быть присвоено сразу
несколько классов (указываются через пробел):
<div class="class1 class2 class3"></div>

14. Возможные значения CSS свойств

НЕКОТОРЫЕ СВОЙСТВА
CSS

15. Единицы измерения размера

CSS свойства. Фон
• background-color — фоновый цвет тега
background-color: red;
• Лучше воспользоваться универсальным
свойством background:
background: #ff0078
(меньше места и можно изменить свойство, задав
еще и фоновую картинку)
• Значение по умолчанию: transparent

16. Единицы измерения размера

CSS свойства. Фон
• background-image — фоновая картинка (поверх
фонового цвета)
background-image: url(".../img/1.png");
• Синтаксис:
background-image: url("путь к картинке")
• Если нужно задать только картинку, то можно так:
background: transparent url("путь к картинке");
• Значение по умолчанию: none

17. Некоторые свойства CSS

CSS свойства. Текст
• font-size — задание размера шрифта текста
font-size: 12pt;
• Синтаксис:
font-size: абсолютный размер | относительный
размер | значение | проценты | inherit
абсолютный размер: xx-small, x-small, small,
medium, large, x-large, xx-large
относительный размер: larger, smaller
• Значение по умолчанию: medium

18. CSS свойства. Фон

CSS свойства. Текст
• color — задание цвета текста
color: #ff0000;
• Синтаксис:
color: цвет | inherit
• Как показывает время, лучший цвет для
текста — черный

19. CSS свойства. Фон

CSS свойства. Текст
• font-style — задание начертания шрифта
font-style: italic;
• Синтаксис:
font-style: normal | italic | oblique | inherit
• Значение по умолчанию: normal

20. CSS свойства. Текст

• font-weight — задание насыщенности
шрифта
font-weight: bold;
• Синтаксис:
font-weight: bold | bolder | lighter | normal |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900
• Значение по умолчанию: normal (400)

21. CSS свойства. Текст

• font-family— задание гарнитуры (типа) шрифта
font-family: "Comic Sans MS", Arial, Tahoma;
• Синтаксис:
font-family: имя шрифта [, имя шрифта[, ...]]
| inherit
• Если первый шрифт не обнаружен в системе
пользователя, то будет использоваться
применяется второй шрифт. Если второго нет третий и т. д.

22. CSS свойства. Текст

Типы шрифтов для font-family:
• serif — отображать текст любым шрифтом
с засечками
• sans-serif — любым шрифтом без засечек
(рубленый)
• cursive — любым курсивным шрифтом
• fantasy — любым декоративным шрифтом
• monospace — любым моноширинным
шрифтом
• Для текста будет использоваться шрифт
по умолчанию, относящийся к шрифтам
выбранного типа

23. CSS свойства. Текст

CSS свойства. Границы
• border-width — толщина границы тега
• border-style — стиль границы тега
• border-color — цвет границы тега
border-width: 1px;
• Универсальное свойство
border: [border-width || border-style || bordercolor] | inherit
border: 1px solid #0f0;

24. CSS свойства. Текст

CSS свойства. Границы
• Универсальное свойство border-width:
border-width: [значение | thin | medium | thick]
{1,4} | inherit
border-width: 1px 2px 3px;
• thin = 2px
• medium = 4px
• thick = 6px

25. CSS свойства. Текст

CSS свойства. Границы
• Универсальное свойство border-style:
border-style: [none | hidden | dotted |
dashed | solid | double | groove | ridge | inset
| outset] {1,4} | inherit
border-style: double;

26. CSS свойства. Границы

• Универсальное свойство border-color:
border-color: [цвет | transparent] {1,4} |
inherit
border-color: red white;

English Русский Rules