ВВЕДЕНИЕ В СПЕЦИАЛЬНОСТЬ
Каскадные таблицы стилей (Cascading Style Sheets, CSS)
Каскадные таблицы стилей CSS
Пример использования CSS
Каскадные таблицы стилей CSS
Каскадные таблицы стилей CSS
Пример использования стилей
Уровни форматирования
Правила описания стиля
Правила таблицы стилей
Синтаксис CSS
Атрибуты class и id
Атрибуты class и id
Возможные значения CSS свойств
Единицы измерения размера
Единицы измерения размера
Некоторые свойства CSS
CSS свойства. Фон
CSS свойства. Фон
CSS свойства. Текст
CSS свойства. Текст
CSS свойства. Текст
CSS свойства. Текст
CSS свойства. Текст
CSS свойства. Текст
CSS свойства. Границы
1.03M
Category: internetinternet

Каскадные таблицы стилей 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