Skip to content

Commit ebee47c

Browse files
FedorovAlexanderFedorovAlexander
committed
Добавлены ссылки на предыдущий и следующий вопросы
1 parent fe32531 commit ebee47c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

119 files changed

+1121
-326
lines changed

‎CSS/1.md

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,23 @@
22

33
В следующем списке типы селекторов расположены по возрастанию специфичности:
44

5-
0. селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
6-
1. селекторы классов (например, `.example`), селекторы атрибутов (например, `[type="radio"]`) и псевдоклассов (например, `:hover`)
7-
2. селекторы идентификаторов (например, `#example`).
5+
0. Селекторы типов элементов (например, `h1`) и псевдоэлементов (например, `::before`)
6+
1. Селекторы классов (например, `.example`), селекторы атрибутов (например, `[type="radio"]`) и псевдоклассов (например, `:hover`)
7+
2. Селекторы идентификаторов (например, `#example`)
88

9-
Универсальный селектор (`*`), комбинаторы (`+, >, ~, ' '`) и отрицающий псевдокласс (`:not()`) не влияют на специфичность. (Однако селекторы, объявленные внутри `:not()`, влияют)
9+
Универсальный селектор (`*`), комбинаторы (`+`, `>`, `~`, `' '`) и отрицающий псевдокласс (`:not()`) не влияют на специфичность. (Однако селекторы, объявленные внутри `:not()`, влияют)
1010

11-
Стили, обьявленные в элементе (например, `style="font-weight:bold"`), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.
11+
Стили, объявленные в элементе (например, `style="font-weight:bold"`), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.
1212

1313
**Расчёт специфичности**
1414

15-
- тег и псевдоэлемент имеют специфичность 0001
16-
- класс, псевдокласс, атрибут - 0010
17-
- id имеет специфичность 0100
18-
- инлайновый стиль имеет приоритет 1000
15+
- Тег и псевдоэлемент имеют специфичность 0001
16+
- Класс, псевдокласс, атрибут - 0010
17+
- ID имеет специфичность 0100
18+
- Инлайновый стиль имеет приоритет 1000
19+
20+
---
21+
22+
<div align="right">
23+
<a href="2.md">Следующий вопрос</a>
24+
</div>

‎CSS/10.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
### Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
22

3-
Использовал сетку Bootstrap, Material UI, CSS grid, а также самодельные кастомные сетки. Предпочитаю Bootrstrap.
3+
Использовал сетку Bootstrap, Material UI, CSS grid, Tailwind, а также самодельные кастомные сетки. Предпочитаю Tailwind.
4+
5+
---
6+
7+
<div align="right">
8+
<a href="9.md">Предыдущий вопрос</a> | <a href="11.md">Следующий вопрос</a>
9+
</div>

‎CSS/11.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
### Приходилось ли вам использовать или реализовывать медиазапросы или вёрстку под мобильные устройства?
22

33
Да, приходилось. Доля использования мобильных устройств при выходе в интернет увеличивается с каждым годом. В наше время сайт должен быть адаптивным.
4-
В своей работе для реализации адаптивности я использовал сетку Bootstrap, а также медиа выражения.
4+
В своей работе для реализации адаптивности я использовал сетку Bootstrap, а также медиа выражения.
5+
6+
---
7+
8+
<div align="right">
9+
<a href="10.md">Предыдущий вопрос</a> | <a href="12.md">Следующий вопрос</a>
10+
</div>

‎CSS/12.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
### Вы знакомы со стилизацией SVG?
22

3-
Стилизация SVG отличается от стилизации HTML. SVG основан на XML и стилевые свойства отличаются по названию. Fill вместо background-color, stroke вместо border и т.д.
3+
Стилизация SVG отличается от стилизации HTML. SVG основан на XML и стилевые свойства отличаются по названию. Fill вместо background-color, stroke вместо border и т.д.
44

5-
Изображение в формате SVG можно стилизоввать в SVG-разметке, а также в CSS файлах. Если вы используете SVG-спрайты, то стилизовать svg можно только в разметке. Также не получится динамически изменить свойства SVG js-ом.
5+
Изображение в формате SVG можно стилизоввать в SVG-разметке, а также в CSS файлах. Если вы используете SVG-спрайты, то стилизовать svg можно только в разметке. Также не получится динамически изменить свойства SVG js-ом.
6+
7+
---
8+
9+
<div align="right">
10+
<a href="11.md">Предыдущий вопрос</a> | <a href="13.md">Следующий вопрос</a>
11+
</div>

‎CSS/13.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,19 @@
33
Медиа запросы поволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевые браузеры, устройства Брайля, телевизоры и так далее.
44

55
1. **all** -
6-
Подходит для всех устройств.
6+
Подходит для всех устройств.
77

88
2. **print** -
9-
Для принтеров.
9+
Для принтеров.
1010

1111
3. **screen** -
12-
Предназначен в первую очередь для цветных компьютерных экранов.
12+
Предназначен в первую очередь для цветных компьютерных экранов.
1313

1414
4. **speech** -
15-
Предназначен для синтезаторов речи.
15+
Предназначен для синтезаторов речи.
16+
17+
---
18+
19+
<div align="right">
20+
<a href="12.md">Предыдущий вопрос</a> | <a href="14.md">Следующий вопрос</a>
21+
</div>

‎CSS/14.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
### На что нужно обратить внимание при написании эффективного CSS?
22

33
Для написания эффективного CSS должна быть система. **БЭМ**, **RSCSS**, **OOCSS** - кому что больше подходит. Я использую БЭМ. У каждого элемента уникальный класс, все элементы имеют одинаковую специфичность. Код можно переиспользовать.
4+
5+
---
6+
7+
<div align="right">
8+
<a href="13.md">Предыдущий вопрос</a> | <a href="15.md">Следующий вопрос</a>
9+
</div>

‎CSS/15.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,8 @@
1010

1111
- Можно увлечься и начать "программировать на CSS". Код становится сложно понять и поддерживать другим разработчикам.
1212

13+
---
14+
15+
<div align="right">
16+
<a href="14.md">Предыдущий вопрос</a> | <a href="16.md">Следующий вопрос</a>
17+
</div>

‎CSS/16.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
### Как вы реализуете макет, который использует нестандартные шрифты?
22

3-
Буду подключать шрифты с помощью `@font-face` для каждого `font-weight`.
3+
Буду подключать шрифты с помощью `@font-face` для каждого `font-weight`.
4+
5+
---
6+
7+
<div align="right">
8+
<a href="15.md">Предыдущий вопрос</a> | <a href="17.md">Следующий вопрос</a>
9+
</div>

‎CSS/17.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1-
### Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
1+
### Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
22

3-
Браузер сравнивает селекторы справа налево. Браузер находит все элементы DOM, соответствующие ключевому (самому правому) селектору. Дальше проходит до его родителя и ищет соответствия. Чем короче цепь селекторов, тем быстрее браузер найдет элемент.
3+
Браузер сравнивает селекторы справа налево. Браузер находит все элементы DOM, соответствующие ключевому (самому правому) селектору. Дальше проходит до его родителя и ищет соответствия. Чем короче цепь селекторов, тем быстрее браузер найдет элемент.
4+
5+
---
6+
7+
<div align="right">
8+
<a href="16.md">Предыдущий вопрос</a> | <a href="18.md">Следующий вопрос</a>
9+
</div>

‎CSS/18.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
### Объясните, что такое псевдоэлементы и для чего они нужны.
22

3-
Псевдоэлемент - это ключевое слово, добавляемое к селектору, которое позводяет стилизовать определенную часть выбранного элемента. Они могут использоваться для украшения (`:first-line`, `:first-letter`) или для добавления элементов к разметке (вместе c `content: ...`) без изменения HTML.
3+
Псевдоэлемент - это ключевое слово, добавляемое к селектору, которое позводяет стилизовать определенную часть выбранного элемента. Они могут использоваться для украшения (`:first-line`, `:first-letter`) или для добавления элементов к разметке (вместе c `content: ...`) без изменения HTML.
4+
5+
---
6+
7+
<div align="right">
8+
<a href="17.md">Предыдущий вопрос</a> | <a href="19.md">Следующий вопрос</a>
9+
</div>

‎CSS/19.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,10 @@
88

99
- Если высота (height) блока не задана, то высота блока равна: высота контента этого блока + padding'и.
1010

11-
- Если ширина блока не задана, то блоки, для которых не задано float, будут иметь ширину: ширина родителя - padding'и родителя.
11+
- Если ширина блока не задана, то блоки, для которых не задано float, будут иметь ширину: ширина родителя - padding'и родителя.
12+
13+
---
14+
15+
<div align="right">
16+
<a href="18.md">Предыдущий вопрос</a> | <a href="20.md">Следующий вопрос</a>
17+
</div>

‎CSS/2.md

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,29 @@
11
### В чем разница между «сбросом» и «нормализацией» CSS? Что бы вы выбрали и почему?
22

3-
Сброс (reset) сбрасывает все стили элементов.
3+
**CSS Reset**:
44

5-
Normalize приводит стили к единому виду во всех браузерах.
5+
- Удаляет все встроенные стили браузера
6+
- Более агрессивный подход
7+
- Требует переопределения общих стилей
8+
- Примеры: Eric Meyer's Reset, Universal Reset
69

7-
Я бы выбрал Normalize из-за кроссбраузерности.
10+
**CSS Normalize**:
11+
12+
- Сохраняет полезные стили по умолчанию
13+
- Исправляет баги и несоответствия между браузерами
14+
- Улучшает юзабилити
15+
- Более современный подход
16+
- Проще поддерживать
17+
18+
Я бы выбрал Normalize.css, потому что:
19+
20+
1. Сохраняет полезные стили браузера по умолчанию
21+
2. Обеспечивает лучшую кроссбраузерность
22+
3. Требует меньше переопределений стилей
23+
4. Активно поддерживается сообществом
24+
25+
---
26+
27+
<div align="right">
28+
<a href="1.md">Предыдущий вопрос</a> | <a href="3.md">Следующий вопрос</a>
29+
</div>

‎CSS/20.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22

33
По умолчанию все элементы имеют box-sizing: content-box. Размеры блока рассчитываются из размеров контента.
44

5-
box-sizing: border-box меняет то, как расчитываются width и height. Border и padding включаются в расчёт. Высота будет состоять из: высота контента + вертикальные padding'и + ширина вертикальных border. Ширина будет состоять из: ширина контента + горизонтальные padding'и + ширина горизонтальных border.
5+
box-sizing: border-box меняет то, как расчитываются width и height. Border и padding включаются в расчёт. Высота будет состоять из: высота контента + вертикальные padding'и + ширина вертикальных border. Ширина будет состоять из: ширина контента + горизонтальные padding'и + ширина горизонтальных border.
6+
7+
---
8+
9+
<div align="right">
10+
<a href="19.md">Предыдущий вопрос</a> | <a href="21.md">Следующий вопрос</a>
11+
</div>

‎CSS/21.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@
22

33
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
44

5-
`none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`, `flex`, `grid`.
5+
`none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`, `flex`, `grid`.
6+
7+
---
8+
9+
<div align="right">
10+
<a href="20.md">Предыдущий вопрос</a> | <a href="22.md">Следующий вопрос</a>
11+
</div>

‎CSS/22.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,26 @@
1616
- Можно выровнять с помощью `vertical-align`.
1717
- Margins и paddings работают со всех сторон.
1818

19-
**inline**
19+
**inline**
2020

2121
- Размер зависит от контента.
2222
- Ширину и высоту задавать нельзя.
2323
- Можно выровнять только по горизонтали. Место, которое занимает элемент по вертикали, зависит от line-height.
2424
- Ведёт себя как блочный элемент, если задать вертикальные margins и paddings.
25+
26+
### Какие преимущества в использовании препроцессоров CSS?
27+
28+
Препроцессоры CSS добавляют некоторую дополнительную функциональность, которая улучшает CSS файлы и делает их более поддерживаемыми. Вот несколько преимуществ:
29+
30+
- Переменные
31+
- Вложенность
32+
- Операторы
33+
- Миксины
34+
- Наследование
35+
- Функции
36+
37+
---
38+
39+
<div align="right">
40+
<a href="21.md">Предыдущий вопрос</a> | <a href="23.md">Следующий вопрос</a>
41+
</div>

‎CSS/23.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,9 @@
55
- **absolute** - элемент выдёргивается из потока и выстраивается относительно ближайшего элемента-предка с position: relative. Если его нет, то относительно body. Абсолютно спозиционированные элементы могут иметь margin и padding и не схлопываются с margin и padding других элементов. Никак не влияют на другие элементы.
66
- **fixed** - элемент выдёргивается из потока и остаётся на позиции относительно окна документа и не меняет положение при скроле.
77
- **sticky** - смесь relative и fixed. Элемент ведёт себя как относительно спозиционированный, пока не достигнет заданной позиции, после которой ведёт себя как fixed элемент.
8+
9+
---
10+
11+
<div align="right">
12+
<a href="22.md">Предыдущий вопрос</a> | <a href="24.md">Следующий вопрос</a>
13+
</div>

‎CSS/24.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
### Какими CSS-фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?
22

3-
Использовал Bootstrap. CSS-фреймворки накладывают ограничения и добавляют работы по переопределению дефолтных свойств элементов. Если нет чётких требования использования фреймворков, стараюсь их избегать.
3+
Использовал Bootstrap. CSS-фреймворки накладывают ограничения и добавляют работы по переопределению дефолтных свойств элементов. Если нет чётких требований использования фреймворков, стараюсь их избегать.
4+
5+
---
6+
7+
<div align="right">
8+
<a href="23.md">Предыдущий вопрос</a> | <a href="25.md">Следующий вопрос</a>
9+
</div>

‎CSS/25.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,9 @@
33
Да. Использую flexbox, когда не нужно поддерживать Internet Explorer ниже 11 версии.
44

55
У grid всё ещё не такая широкая поддержка браузеров.
6+
7+
---
8+
9+
<div align="right">
10+
<a href="24.md">Предыдущий вопрос</a> | <a href="26.md">Следующий вопрос</a>
11+
</div>

‎CSS/26.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,10 @@
44

55
**Отзывчивая верстка** начинается с верстки десктопной версии сайта. Затем она адаптируется для меньших экранов.
66

7-
**Mobile-first** начинается с верстки версии сайта для мобильных устройств.
7+
**Mobile-first** начинается с верстки версии сайта для мобильных устройств.
8+
9+
---
10+
11+
<div align="right">
12+
<a href="25.md">Предыдущий вопрос</a> | <a href="27.md">Следующий вопрос</a>
13+
</div>

0 commit comments

Comments
 (0)