roma-dxunvrs
87 lines
4.1 KiB
Markdown
87 lines
4.1 KiB
Markdown
- CSS (Cascade StyleSheets) - язык описания внешнего вида [[HTML]]-документа
|
||
- CSS - технология описания внешнего вида документа, написанного языком разметки
|
||
- Используется для задания цветов, шрифтов и других аспектов представления документа
|
||
- Основная цель - разделение содержимого документа и его представления
|
||
- Позволяет представлять один и тот же документ в различных методах вывода (например, обычная версия и версия для печати)
|
||
## Источники CSS
|
||
- Авторские стили:
|
||
- Inline-стили - указывается прямо в атрибуте `style`
|
||
- Встроенных стилей - блоков CSS внутри HTML-документа
|
||
- Внешних таблиц стилей - отдельного файла .css
|
||
- Пользовательские стили:
|
||
- Локальный CSS-файл, указанный пользователем в браузере
|
||
- Стиль браузера:
|
||
- Стандартный стиль, используемый браузером по умолчанию
|
||
## Структура CSS
|
||
- Таблица состоит из набора *правил*
|
||
- Каждое правило состоит из набора *селекторов* и *блока определений*:
|
||
```CSS
|
||
селектор, селектор {
|
||
свойство: значение;
|
||
свойство: значение;
|
||
свойство: значение;
|
||
}
|
||
```
|
||
Например:
|
||
```CSS
|
||
div, td {
|
||
background-color: red;
|
||
}
|
||
```
|
||
## Приоритеты стилей
|
||
- Если к одному элементу "подходит" сразу несколько стилей, применен будет наиболее приоритетный
|
||
- Приоритеты (от большего к меньшему)
|
||
1. свойство задано при помощи `!important`
|
||
2. стиль прописан напрямую в теге
|
||
3. наличие идентификаторов (`#id`) в селекторе
|
||
4. количество классов (`.class`) и псевдоклассов (`:pseudoclass`) в селекторе
|
||
5. количество имен тегов в селекторе
|
||
- Имеет значение относительный порядок расположения свойств - свойство, указанное позже, имеет приоритет
|
||
## Селекторы
|
||
1. Точка (`.message`) - Класс
|
||
- Может повторяться на странице сколько угодно раз
|
||
- Через атрибут `class`
|
||
- Можно указать несколько через пробел `<div class="message error bold">`
|
||
2. Решетка (`#message`) - ID
|
||
- Должен быть строго уникальным на всей странице
|
||
- Через атрибут `id`
|
||
3. Без ничего - тег
|
||
## Внешний файл стилей
|
||
Создается отдельный файл со стилями, например, `style.css` и подключается внутри `head` в HTML-файле с помощью тега `<link>`
|
||
```HTML
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
</body>
|
||
</html>
|
||
```
|
||
## Внутренние стили
|
||
Пишутся в теге `<style>` тоже внутри `head`
|
||
```HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<style>
|
||
body {
|
||
background-color: #f0f0f0;
|
||
}
|
||
.title {
|
||
color: blue;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1 class="title">Привет, мир!</h1>
|
||
</body>
|
||
</html>
|
||
```
|
||
## Инлайн-стили
|
||
Стиль пишется прямо внутри конкретного тега
|
||
```HTML
|
||
<p style="color: red; font-size: 20px;">Это красный текст</p>
|
||
```
|
||
|
||
Дополнительно: [[CSS-препроцессоры]] |