Frontend разработчик

Краткая шпаргалка по CSS. Часть 1

1. Базовая структура CSS

селектор {
  свойство: значение;
}

Пример:

p {
  color: blue;
  font-size: 16px;
}

2. Типы селекторов

#### Селекторы тегов
Применяются к определенным HTML-тегам.

h1 {
  color: red;
}

#### Классы
Используются для применения стилей к элементам с атрибутом class. Класс можно использовать для множества элементов.

.class-name {
  color: green;
}

Применение в HTML:

<p class="class-name">Текст</p>

#### Идентификаторы (ID)
Применяются к элементам с уникальным атрибутом id.

#id-name {
  background-color: yellow;
}

Применение в HTML:

<div id="id-name">Контент</div>

#### Группировка селекторов
Селекторы можно группировать для одинаковых стилей.

h1, h2, p {
  color: blue;
}

#### Селекторы потомков
Применяют стили к элементам, находящимся внутри других элементов.

div p {
  color: orange;
}

Применяется только к p, находящимся внутри div.

3. Псевдоклассы

#### Стилизация ссылок

a:link { color: blue; }  /* Непосещенная ссылка */
a:visited { color: purple; }  /* Посещенная ссылка */
a:hover { color: red; }  /* Наведение мыши */
a:active { color: green; }  /* Активная ссылка */

#### Псевдоклассы для элементов

p:first-child { color: green; }  /* Первый дочерний элемент */
li:nth-child(odd) { background-color: #f0f0f0; }  /* Нечетные элементы списка */

4. Псевдоэлементы

#### Псевдоэлементы для создания контента

p::before { content: "Привет, "; }  /* Добавляет текст перед содержимым */
p::after { content: "!" }  /* Добавляет текст после содержимого */

#### Стилизация первых букв и строк

p::first-letter {
  font-size: 200%;
  color: red;
}

5. Модели отображения (Box Model)

Каждый элемент состоит из:
- content (содержимое),
- padding (внутренние отступы),
- border (граница),
- margin (внешние отступы).

Пример:

div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

6. Размеры и единицы измерения

- px — пиксели.
- % — проценты от родительского элемента.
- em — относительный размер шрифта от родительского элемента.
- rem — относительный размер шрифта от корневого элемента (`html`).
- vw и vh — проценты от ширины и высоты окна браузера.

Пример:

p {
  width: 50%;  /* 50% ширины родителя */
  font-size: 1.5em;  /* 150% от родительского шрифта */
}

👉 @frontend_1

www.tgoop.com/frontend_1/3779

1.8K viewsOct 13, 2024 at 07:56

Краткая шпаргалка по CSS. Часть 1

1. Базовая структура CSS

селектор {
  свойство: значение;
}

p {
  color: blue;
  font-size: 16px;
}

h1 {
  color: red;
}

.class-name {
  color: green;
}

<p class="class-name">Текст</p>

#id-name {
  background-color: yellow;
}

<div id="id-name">Контент</div>

h1, h2, p {
  color: blue;
}

div p {
  color: orange;
}

a:link { color: blue; }  /* Непосещенная ссылка */
a:visited { color: purple; }  /* Посещенная ссылка */
a:hover { color: red; }  /* Наведение мыши */
a:active { color: green; }  /* Активная ссылка */

p:first-child { color: green; }  /* Первый дочерний элемент */
li:nth-child(odd) { background-color: #f0f0f0; }  /* Нечетные элементы списка */

p::before { content: "Привет, "; }  /* Добавляет текст перед содержимым */
p::after { content: "!" }  /* Добавляет текст после содержимого */

p::first-letter {
  font-size: 200%;
  color: red;
}

div {
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

p {
  width: 50%;  /* 50% ширины родителя */
  font-size: 1.5em;  /* 150% от родительского шрифта */
}

BY Frontend разработчик