CSS (Cascading Style Sheets) - это язык стилей, который используется для описания внешнего вида HTML-документа. Он определяет, как элементы HTML должны отображаться на экране, при печати или на других носителях.
1. Основные концепции:
- Селекторы (Selectors): Определяют, к каким элементам HTML применяются стили.
- Свойства (Properties): Определяют, какие характеристики элемента будут изменены (например, цвет, размер шрифта, отступы).
- Значения (Values): Определяют, какое значение будет присвоено свойству.
- Правила (Rules): Сочетание селектора, свойства и значения.
2. Структура CSS-правила:
CSS-правило состоит из селектора и блока объявлений. Блок объявлений заключается в фигурные скобки {} и содержит одно или несколько объявлений, разделенных точкой с запятой ;. Каждое объявление состоит из свойства и значения, разделенных двоеточием :.
selector {
property: value;
property: value;
...
}
css
Пример:
h1 {
color: blue;
font-size: 36px;
}
css
В этом примере:
- h1 - это селектор (выбирает все элементы <h1>).
- color и font-size - это свойства.
- blue и 36px - это значения.
3. Способы подключения CSS к HTML:
Существует три способа подключения CSS к HTML-документу:
- Встроенные стили (Inline Styles): Стили применяются непосредственно к отдельным элементам HTML с помощью атрибута style.
<h1 style="color: blue; font-size: 36px;">Заголовок</h1>
html
- Плюсы: Быстро применить стиль к конкретному элементу.
- Минусы: Неудобно для больших проектов, сложно поддерживать, нарушает принцип разделения контента и представления. Не рекомендуется для использования, кроме случаев, когда нужно быстро внести небольшое изменение.
- Внутренние стили (Internal Styles): Стили определяются внутри элемента <style> в разделе <head> HTML-документа.
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
<style>
h1 {
color: blue;
font-size: 36px;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
html
- Плюсы: Удобно для небольших проектов или отдельных страниц.
- Минусы: Стиль применяется только к одной странице, сложно поддерживать для больших проектов.
- Внешние стили (External Styles): Стили определяются в отдельном CSS-файле (с расширением .css) и подключаются к HTML-документу с помощью элемента <link> в разделе <head>.
<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
html
Файл style.css:
h1 {
color: blue;
font-size: 36px;
}
p {
color: green;
}
css
- Плюсы: Лучший способ для больших проектов, легко поддерживать, стили могут использоваться на нескольких страницах.
- Минусы: Требуется дополнительный файл.
Рекомендация: Использовать внешние стили - это лучший подход для большинства проектов, так как он обеспечивает разделение контента (HTML) и представления (CSS), что упрощает поддержку и масштабирование проекта.
4. Типы селекторов:
- Селекторы элементов (Type Selectors): Выбирают все элементы указанного
- типа (например, h1, p, div).
p {
font-size: 14px;
}
css
- Селекторы классов (Class Selectors): Выбирают элементы с указанным классом. Классы задаются с помощью атрибута class в HTML. Селектор класса начинается с точки ..
<p class="highlight">Этот абзац будет выделен.</p>
html
.highlight {
background-color: yellow;
}
css
- Селекторы идентификаторов (ID Selectors): Выбирают элемент с указанным идентификатором. Идентификаторы задаются с помощью атрибута id в HTML. Селектор идентификатора начинается с решетки #. Идентификаторы должны быть уникальными на странице.
<div id="header">Шапка сайта</div>
html
#header {
background-color: lightblue;
padding: 10px;
}
css
- Селекторы атрибутов (Attribute Selectors): Выбирают элементы с указанным атрибутом или значением атрибута.
<input type="text" name="username">
<a href="https://www.example.com">Ссылка</a>
html
input[type="text"] {
border: 1px solid gray;
}
a[href^="https://"]{ /* Выбирает ссылки, начинающиеся с "https://" */
color: green;
}
css
- Универсальный селектор (Universal Selector): Выбирает все элементы на странице. Обозначается звездочкой *.
* {
margin: 0;
padding: 0;
}
css
- Внимание: Использовать универсальный селектор слишком часто может негативно сказаться на производительности. Обычно его используют для сброса стандартных стилей браузера.
- Комбинаторы (Combinators): Определяют отношения между селекторами.
- Селектор потомков (Descendant Selector): Выбирает элементы, являющиеся потомками другого элемента. Обозначается пробелом.
<div class="container">
<p>Это абзац внутри контейнера.</p>
</div>
html
.container p {
color: red; /* Выбирает все абзацы внутри элемента с классом "container" */
}
css
- Селектор дочерних элементов (Child Selector): Выбирает элементы, являющиеся непосредственными дочерними элементами другого элемента. Обозначается символом >.
<div>
<p>Это прямой потомок.</p>
<span><p>Это не прямой потомок.</p></span>
</div>
html
div > p {
font-weight: bold; /* Выбирает только абзацы, являющиеся непосредственными потомками div */
}
css
- Селектор соседних элементов (Adjacent Sibling Selector): Выбирает элемент, непосредственно следующий за другим элементом. Обозначается символом +.
<h1>Заголовок</h1>
<p>Этот абзац будет выбран.</p>
<p>Этот абзац не будет выбран.</p>
html
h1 + p {
font-style: italic; /* Выбирает только абзац, непосредственно следующий за h1 */
}
css
- Селектор общих соседних элементов (General Sibling Selector): Выбирает все элементы, следующие за другим элементом, находящиеся на одном уровне вложенности. Обозначается символом ~.
<h1>Заголовок</h1>
<p>Этот абзац будет выбран.</p>
<p>Этот абзац тоже будет выбран.</p>
html
h1 ~ p {
text-decoration: underline; /* Выбирает все абзацы, следующие за h1 */
}
css
5. Важнейшие свойства CSS:
- color: Цвет текста.
- background-color: Цвет фона.
- font-size: Размер шрифта.
- font-family: Семейство шрифтов.
- font-weight: Толщина шрифта (например, bold).
- text-align: Выравнивание текста (left, right, center, justify).
- margin: Внешний отступ (расстояние от элемента до других элементов).
- padding: Внутренний отступ (расстояние от контента элемента до его границы).
- border: Граница элемента.
- width: Ширина элемента.
- height: Высота элемента.
- display: Определяет, как элемент отображается (block, inline, inline-block, none, flex, grid). block - элемент занимает всю ширину, создает перенос строки. inline - элемент занимает только необходимую ширину, не создает перенос строки. inline-block - элемент ведет себя как встроенный, но позволяет задавать ширину и высоту. none - элемент не отображается.
- position: Определяет способ позиционирования элемента (static, relative, absolute, fixed, sticky).
- float: Обтекание элемента другими элементами (left, right, none). Используется для создания макетов.
- box-sizing: Определяет, как рассчитывается ширина и высота элемента (content-box, border-box). border-box включает padding и border в общую ширину/высоту элемента, что упрощает создание макетов.
- list-style-type: Тип маркера списка (например, disc, circle, square, decimal, none).
- text-decoration: Оформление текста (например, underline, overline, line-through, none).
- opacity: Прозрачность элемента (от 0 до 1).
- visibility: Видимость элемента (visible, hidden). hidden - элемент не отображается, но занимает место. display: none - элемент не отображается и не занимает место.
- cursor: Форма курсора мыши при наведении на элемент.
6. Каскадность и наследование:
- Каскадность: Определяет, как браузер разрешает конфликты стилей, когда к одному и тому же элементу применяется несколько стилей. Правила с более высокой специфичностью (например, стили, определенные с помощью ID-селекторов) имеют приоритет над правилами с более низкой специфичностью (например, стили, определенные с помощью селекторов элементов). Также важен порядок объявления стилей: более поздние объявления переопределяют более ранние.
- Наследование: Некоторые свойства CSS наследуются от родительских элементов к дочерним. Например, свойство color обычно наследуется, а свойство border - нет. Можно явно указать, что свойство должно наследоваться, используя значение inherit.
7. Специфичность селекторов:
Специфичность определяет, какое правило CSS будет применено к элементу, если к нему применяется несколько правил. Правила с более высокой специфичностью имеют приоритет.
Специфичность селекторов определяется по следующей формуле:
inline styles > ID selectors > class selectors = attribute selectors = pseudo-classes > type selectors = pseudo-elements > universal selector
- Встроенные стили (Inline Styles): Самая высокая специфичность.
- ID селекторы (ID Selectors): Высокая специфичность.
- Селекторы классов (Class Selectors), селекторы атрибутов (Attribute Selectors), псевдоклассы (Pseudo-classes): Средняя специфичность.
- Селекторы элементов (Type Selectors), псевдоэлементы (Pseudo-elements): Низкая специфичность.
- Универсальный селектор (Universal Selector): Самая низкая специфичность.
8. Box Model (блочная модель):
Каждый элемент HTML можно представить как прямоугольный блок, состоящий из следующих частей:
- Content (Содержимое): Текст, изображения и другие элементы, находящиеся внутри элемента.
- Padding (Внутренний отступ): Пространство между содержимым и границей.
- Border (Граница): Линия, окружающая элемент.
- Margin (Внешний отступ): Пространство между границей элемента и соседними элементами.
9. Flexbox и Grid Layout:
Это современные методы создания сложных макетов веб-страниц.
- Flexbox: Предназначен для создания одномерных макетов (вдоль одной оси).
- Grid Layout: Предназначен для создания двухмерных макетов (по горизонтали и вертикали).
10. Рекомендации по изучению:
- Начните с основ: Изучите основные концепции CSS, такие как селекторы, свойства, значения и каскадность.
- Практикуйтесь: Создавайте собственные веб-страницы и экспериментируйте с различными стилями.
- Используйте онлайн-ресурсы: MDN Web Docs, CSS-Tricks, FreeCodeCamp и другие ресурсы предлагают отличные учебные материалы и примеры кода.
- Читайте код других разработчиков: Анализируйте CSS-код существующих веб-сайтов, чтобы понять, как они создают свои макеты и стили.
- Используйте инструменты разработчика в браузере: Инструменты разработчика в браузере позволяют просматривать и изменять CSS-стили веб-страницы в режиме реального времени.
Примеры распространенных задач CSS:
- Изменение цвета текста и фона
- Настройка шрифтов
- Добавление отступов и границ
- Создание макетов веб-страниц (с использованием Flexbox или Grid)
- Адаптация веб-страниц для разных устройств (с использованием медиазапросов)
- Создание анимации и переходов.