CSS (Cascading Style Sheets) - это язык стилей, используемый для описания внешнего вида документа, написанного на языке разметки, таком как HTML. CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи или на других медиа.
Синтаксис CSS
Стиль CSS состоит из списка правил. Каждое правило или набор правил состоит из одного или нескольких селекторов и блока деклараций. Например:
CSS
h1 {
color: blue;
font-size: 12px;
}
В этом примере, h1 - это селектор, color и font-size - это свойства, а blue и 12px - это значения этих свойств.
Применение CSS
CSS можно применять к HTML следующими тремя способами:
- Внешний CSS: Стили задаются в отдельном файле CSS, который затем подключается к HTML-документу с помощью элемента <link>.
HTML
<link rel="stylesheet" type="text/css" href="styles.css">
- Внутренний CSS: Стили задаются непосредственно в HTML-документе с помощью элемента <style> внутри <head>.
HTML
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
- Встроенный CSS: Стили применяются непосредственно к элементам с помощью атрибута style.
HTML
<h1 style="color:blue;">This is a Blue Heading</h1>
Фишки CSS
- Селекторы: CSS предоставляет множество различных типов селекторов, позволяющих выбирать элементы по их имени тега, классу, идентификатору, атрибуту и т.д.
- Псевдоклассы и псевдоэлементы: Псевдоклассы, такие как :hover, :focus и :active, позволяют стилизовать элементы в определенном состоянии. Псевдоэлементы, такие как ::before и ::after, позволяют вставлять и стилизовать контент в определенных частях элемента.
- Медиазапросы: Медиазапросы позволяют применять разные стили в зависимости от характеристик устройства, таких как ширина экрана или разрешение.
- Анимации и переходы: CSS предоставляет возможности для создания анимаций и переходов, позволяя элементам плавно изменять свои свойства со временем.
- Flexbox и Grid: Это современные методы макетирования в CSS, которые предоставляют гибкие и мощные инструменты для создания сложных макетов.
Надеюсь, это введение в CSS будет полезным для вас. Удачи в изучении CSS!
