Найти в Дзене
Вадим Кулишов // Программирование
9 подписчиков

Введение в CSS - для новичков.

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

CSS (Cascading Style Sheets) - это язык стилей, используемый для описания внешнего вида документа, написанного на языке разметки, таком как HTML. CSS описывает, как элементы должны отображаться на экране, на бумаге, в речи или на других медиа.

Синтаксис CSS

Стиль CSS состоит из списка правил. Каждое правило или набор правил состоит из одного или нескольких селекторов и блока деклараций. Например:

CSS

h1 {
color: blue;
font-size: 12px;
}

В этом примере, h1 - это селектор, color и font-size - это свойства, а blue и 12px - это значения этих свойств.

Применение CSS

CSS можно применять к HTML следующими тремя способами:

  1. Внешний CSS: Стили задаются в отдельном файле CSS, который затем подключается к HTML-документу с помощью элемента <link>.

HTML

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

  1. Внутренний CSS: Стили задаются непосредственно в HTML-документе с помощью элемента <style> внутри <head>.

HTML

<head>

<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>

</head>

  1. Встроенный CSS: Стили применяются непосредственно к элементам с помощью атрибута style.

HTML

<h1 style="color:blue;">This is a Blue Heading</h1>

Фишки CSS

  1. Селекторы: CSS предоставляет множество различных типов селекторов, позволяющих выбирать элементы по их имени тега, классу, идентификатору, атрибуту и т.д.
  2. Псевдоклассы и псевдоэлементы: Псевдоклассы, такие как :hover, :focus и :active, позволяют стилизовать элементы в определенном состоянии. Псевдоэлементы, такие как ::before и ::after, позволяют вставлять и стилизовать контент в определенных частях элемента.
  3. Медиазапросы: Медиазапросы позволяют применять разные стили в зависимости от характеристик устройства, таких как ширина экрана или разрешение.
  4. Анимации и переходы: CSS предоставляет возможности для создания анимаций и переходов, позволяя элементам плавно изменять свои свойства со временем.
  5. Flexbox и Grid: Это современные методы макетирования в CSS, которые предоставляют гибкие и мощные инструменты для создания сложных макетов.

Надеюсь, это введение в CSS будет полезным для вас. Удачи в изучении CSS!