Основы CSS

Основным понятием CSS является стиль — набор правил оформления и форматирования, которые могут быть применены к различным элементам страницы. В стандартном HTML для задания свойств элементов (таких как цвет, размер, положение) требовалось повторять код для каждого элемента, что увеличивало размер файла и время загрузки страницы.

CSS предлагает более удобный подход. Вы можете один раз описать стиль и затем применять его к нужным элементам страницы. Это не только экономит время, но и упрощает поддержку кода.

Более того, CSS позволяет сохранять стили в отдельном файле. Это позволяет использовать одни и те же стили на нескольких страницах и легко вносить изменения, редактируя всего один файл.

CSS также предлагает более широкий контроль над шрифтовым оформлением, избегая избыточного использования графики. Рассмотрим, как применять CSS на практике.

Практическое освоение CSS

Стили могут быть расположены:

Внешний файл: Стили сохраняются в отдельном файле с расширением .css, а в HTML-документе подключаются с помощью тега <link>, расположенного в секции <head>:
```
<link rel="stylesheet" type="text/css" href="styles.css">
```
Такой подход удобен для применения стилей на нескольких страницах.
Внутри HTML: Стили записываются в секцию <style>, расположенную внутри <head>:
```
<style type="text/css">
body { background-color: #f0f0f0; }
h1 { color: blue; }
</style>
```
Этот метод подходит для стилей, применяемых только на одной странице.
Inline-стили: Стили прописываются непосредственно в теге элемента:
```
<p style="color: red; font-size: 14px;">Пример текста</p>
```
Этот метод менее предпочтителен, так как ухудшает читаемость кода и затрудняет поддержку.

Присвоение стилей

Стили задаются по следующему шаблону:

SELECTOR { property: value; }

Где SELECTOR — это элемент HTML (например, h1, p), а property — свойство элемента (например, color или font-size), которому присваивается значение value.

Пример:

h1 { font-size: 24pt; color: navy; }

Этот код задаёт всем заголовкам <h1> размер шрифта 24 пункта и тёмно-синий цвет.

Классы и идентификаторы

CSS позволяет применять стили избирательно с помощью классов и идентификаторов:

Классы: Применяются для группы элементов. Название класса задаётся с помощью атрибута class.
Идентификаторы: Используются для единственного элемента. Задаются с помощью атрибута id.

Примеры:

.centered { text-align: center; color: red; }
#unique { background-color: yellow; }

HTML:

<p class="centered">Центрированный текст</p>
<div id="unique">Единственный элемент</div>

Основные свойства CSS

СВОЙСТВА ШРИФТА
`font-family`	Задаёт шрифт элемента. Пример: `p { font-family: Arial, sans-serif; }`
`font-size`	Определяет размер шрифта. Может задаваться в пунктах, пикселах или процентах. Пример: `h1 { font-size: 150%; }`
`font-weight`	Определяет жирность шрифта. Пример: `b { font-weight: bold; }`
ЦВЕТА
`color`	Задаёт цвет текста. Пример: `h1 { color: green; }`
`background-color`	Устанавливает цвет фона элемента. Пример: `div { background-color: #ffcc00; }`
СВОЙСТВА ТЕКСТА
`text-align`	Задаёт выравнивание текста. Пример: `p { text-align: justify; }`
`text-decoration`	Добавляет стили текста, такие как подчеркивание или зачёркивание. Пример: `a { text-decoration: none; }`
`line-height`	Устанавливает межстрочный интервал. Пример: `p { line-height: 1.5; }`
ГРАНИЦЫ И ОТСТУПЫ
`margin`	Задаёт внешний отступ элемента. Пример: `div { margin: 10px; }`
`padding`	Устанавливает внутренний отступ. Пример: `div { padding: 5px; }`
ЕДИНИЦЫ ИЗМЕРЕНИЯ
`px`	Пиксели
`em`	Размер шрифта текущего элемента
`%`	Проценты от родительского элемента
`rem`	Размер шрифта корневого элемента

Итак, перейдём к изучению безопасных элементов CSS. Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определённого значения. Название свойства и его значение разделяются двоеточием.

Если вы указываете абсолютные размеры шрифтов, пользователи теряют возможность изменять их размер через настройки браузера. Это может создать проблемы, особенно для пользователей с низким разрешением дисплея или слабым зрением. Шрифты будут отображаться строго в указанном вами размере.

Рекомендация: Используйте относительные размеры шрифтов, такие как проценты, em, rem. Это позволяет браузеру динамически адаптировать размер текста. Например, указание font-size: 120%; делает шрифт на 20% больше стандартного размера, сохраняя адаптивность.

Скрытие стилей от устаревших браузеров

Некоторые старые браузеры не поддерживают CSS и могут отображать описания стилей, помещённых в теги <style>, как обычный текст. Чтобы избежать этого, заключите описания стилей в HTML-комментарии:

<head>
<style type="text/css">
<!-- описания стилей -->
</style>
</head>

Старые браузеры игнорируют текст внутри комментариев, а современные интерпретируют его как CSS-код. Это позволяет совместить старый и новый подходы без видимых ошибок.

Работа с отрицательными значениями отступов

CSS позволяет использовать отрицательные значения для отступов. Это открывает возможность создавать интересные эффекты наложения, например, трёхмерные заголовки без использования графики.

Пример:

<head>
<style type="text/css">
body {
    font-family: Verdana;
    font-size: 70pt;
    font-weight: bold;
}
.z1 {
    color: silver;
    margin-top: 100px;
    margin-left: 70px;
}
.z2 {
    color: navy;
    margin-top: -118px;
    margin-left: 68px;
}
</style>
</head>
<body bgcolor="white">
<div class="z1">3D Заголовок</div>
<div class="z2">3D Заголовок</div>
</body>

В этом примере два слоя текста наложены друг на друга, создавая эффект объёмного заголовка. Подбирая параметры отступов и цвета, можно добиться более выразительных эффектов.

Оптимизация параграфов

Создайте файл стилей styles.css для стандартизации оформления параграфов:

p {
    font-family: "Times New Roman", serif;
    color: #000000;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 1pt;
    margin-bottom: 1pt;
    text-indent: 1cm;
    text-align: justify;
}

Этот стиль задаёт шрифт, цвет, боковые и вертикальные отступы, выравнивание текста по ширине и табуляцию первой строки параграфа. Применение боковых отступов в процентах делает текст адаптивным к различным разрешениям дисплея.

Оформление заголовков

Добавьте стиль для заголовков второго уровня:

h2 {
    font-family: Verdana, Arial Cyr, Arial;
    font-weight: bold;
    font-size: 14pt;
    color: black;
    margin-left: 20%;
    margin-top: 1cm;
    text-align: left;
}

Этот стиль задаёт шрифт, жирность, размер, цвет текста, а также боковые и верхние отступы. Использование относительных значений (процентов) для отступов обеспечивает адаптивность заголовков к различным ширинам окна браузера.

Подключение CSS

Для использования созданного файла стилей добавьте в секцию <head> HTML-документов следующую строку:

<link rel="stylesheet" type="text/css" href="styles.css">

Если файл стилей находится в том же каталоге, что и HTML-документы, указывайте только имя файла, как в примере выше. Это упрощает подключение и управление стилями для всего сайта.

Благодаря подключению внешнего файла CSS вы можете централизованно управлять оформлением страниц, изменяя стили в одном месте.