fix(guide): simplify directory structure

2026-10-24 23:49:06 +08:00 · 2018-10-16 21:32:40 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
@@ -0,0 +1,11 @@
+---
+title: A Complete Guide to Flexbox
+localeTitle: Полное руководство по Flexbox
+---
+## Полное руководство по Flexbox
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/a-complete-guide-to-flexbox/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:
@@ -0,0 +1,105 @@
+---
+title: A Guide to Class and Id Selectors
+localeTitle: Руководство по выбору классов и идентификаторов
+---
+## Руководство по выбору классов и идентификаторов
+
+Это статья, основанная на CSS-селекторах. CSS используется для стилизации HTML-элементов и веб-страницы в целом. Чтобы CSS мог стилизовать элемент на странице, необходимо сначала выбрать этот элемент.
+
+Как и то, как вам нужно выбрать файл на вашем компьютере, прежде чем удалять его. Вы должны указать своей машине точно, какой файл вы хотите изменить или удалить. Точно так же вам нужно указать CSS, какой элемент должен быть нацелен при применении на нем разных стилей и цветов.
+
+Хотя CSS может очень хорошо выбирать элементы, вы можете поручить ему выбрать очень конкретные элементы. В конце этой статьи вы уйдете со знанием, чтобы выбрать и подстроить определенные элементы.
+
+### Что такое класс и идентификатор?
+
+Допустим, у вас есть 5 элементов абзаца в вашем коде HTML.
+
+```html
+
+<p> First paragraph </p> 
+ <p> Second paragraph </p> 
+ <p> Third paragraph </p> 
+ <p> Fourth paragraph </p> 
+ <p> Fifth paragraph </p> 
+```
+
+Вы можете дать каждому из них цвет шрифта красного цвета с помощью CSS.
+
+```css
+p { 
+    color: red; 
+ } 
+```
+
+Это очень легко! Но что, если вы только хотите дать второму абзацу цвет шрифта? Сейчас это немного сложно. Поскольку мы не можем идентифицировать каждый элемент абзаца индивидуально, мы не можем выбирать их отдельно.
+
+_Класс и идентификатор для спасения_
+
+Класс и идентификатор действуют как удостоверения личности для элементов HTML. Оба помогают отделить один элемент от другого, но немного отличаются.
+
+* * *
+
+Допустим, вы встречаете парня из какого-то клуба. Когда вы спрашиваете этого человека для удостоверения личности своего клуба, они показывают его своим именем клуба. Теперь все члены одного клуба будут иметь тот же удостоверение личности?
+
+Если есть 3 клуба - A, B и C. Тогда все члены клуба A будут иметь одинаковые удостоверения личности. Все члены клуба B также будут иметь те же самые, хотя они будут отличаться от удостоверений личности клуба A и клуба C. Вот как вы знаете, кто из какого клуба.
+
+Вот как работает `class` . Вы можете дать кучу элементов класса, и они будут в одном клубе. Точно так же, как новое правило в клубе должно сопровождаться всеми членами клуба, аналогичным образом, все новые правила стиля применяются к элементам в одном клубе.
+
+```html
+
+<p class="bike"> Hayabusa </p> 
+ <p class="car"> Chevrolet </p> 
+ <p class="bike"> Hayley-Davidson </p> 
+ <p class="car"> Lamborghini </p> 
+```
+
+Здесь у нас есть 4 параграфа. Если вы посмотрите на имена классов, есть 2 «клуба». Теперь мы можем выбрать клуб (или группу), который мы хотим, и применить стили, которые мы хотим на них.
+
+```css
+.bike { 
+    color: blue; 
+ } 
+```
+
+Вы можете выбрать группу вместо определенного элемента, добавив имя группы с периодом `.` и примените стили, которые вы хотите к этой группе. В этом примере цвет шрифта синего применяется только к параграфам, которые имеют класс `bike` .
+
+* * *
+
+Если вы понимаете, какой `class` , то идентификатор будет легко понять.
+
+Из предыдущего примера, удостоверение личности клуба представляет клуб, и все его члены имеют его. Однако, если вы попросите их предоставить удостоверение личности, у человека появится другое удостоверение личности, которое у них есть. У каждого есть другое и может использоваться для идентификации их по отдельности.
+
+Это идентификатор. Как и личные удостоверения личности, только один элемент HTML может иметь определенный `id` . Ни один из двух элементов не имеет одинакового `id` .
+
+```html
+
+<p id="car"> Ferrari </p> 
+ <p id="car"> Ford </p> 
+ <!-- This is incorrect--> 
+ 
+ <p id="harley"> Harley-Davidson </p> 
+ <p id="hayabusa"> Hayabusa </p> 
+ <!--This is correct since an id is only used once.--> 
+```
+
+`id` также может быть похож на закрытый ключ для вашего шкафчика в клубе. У всех в клубе есть один и тот же карточный идентификационный номер клуба, но все ключи для шкафчиков различны и уникальны.
+
+Как и в примере с `class` , вы можете выбрать конкретный элемент и применить к нему стили, добавив имя id с `#` .
+
+```css
+#hayabusa { 
+    font-style: bold; 
+ } 
+```
+
+* * *
+
+Легко запомнить - использовать `.` перед именем для _класса_ и `#` перед именем для _id_ .
+
+Оба имеют свои собственные цели.
+
+> class используется, когда стили должны применяться к нескольким элементам, а id используется, когда стили должны применяться к определенному элементу.
+
+Помните об этом, когда вы используете класс и идентификатор для выбора и стиля отдельных элементов.
+
+При этом вы добавили больше инструментов в панель инструментов для стилизации элементов на веб-странице.
@@ -0,0 +1,11 @@
+---
+title: Centering in CSS a Complete Guide
+localeTitle: Центрирование в CSS Полное руководство
+---
+## Центрирование в CSS Полное руководство
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/centering-in-css-a-complete-guide/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:
@@ -0,0 +1,130 @@
+---
+title: CSS Flexbox Tips and Tricks
+localeTitle: Советы и хитрости CSS Flexbox
+---
+# CSS Flexbox
+
+[CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) позволяет нам легко форматировать наш HTML-код, как вы никогда не знали, что это возможно. С flexbox можно легко выровнять по вертикали и по горизонтали. Как звук этого? Да, я тоже.
+
+Это также фантастично для общей компоновки вашего веб-сайта или приложения, его легко узнать, хорошо поддерживается (во всех современных браузерах) и отлично подходит для работы, не говоря уже о том, что не требуется много времени, чтобы справиться с ним вообще !
+
+## Flexbox
+
+Ниже приведен список свойств flexbox, которые можно использовать для размещения элементов в css:
+
+### CSS, который может быть применен к контейнеру
+```
+display: flexbox | inline-flex; 
+ flex-direction: row | row-reverse | column | column-reverse; 
+ flex-wrap: nowrap | wrap | wrap-reverse; 
+ flex-flow: <'flex-direction'> || <'flex-wrap'> 
+ justify-content: flex-start | flex-end | center | space-between | space-around; 
+ align-items: flex-start | flex-end | center | baseline | stretch; 
+ align-content: flex-start | flex-end | center | space-between | space-around | stretch; 
+```
+
+### CSS, который может быть применен к элементам / элементам в контейнере
+```
+order: <integer>; 
+ flex-grow: <number>; /* default 0 */ 
+ flex-shrink: <number>; /* default 1 */ 
+ flex-basis: <length> | auto; /* default auto */ 
+ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
+ align-self: auto | flex-start | flex-end | center | baseline | stretch; 
+```
+
+Итак, теперь у вас есть свой инструментарий, но вы спрашиваете: «Что мне делать с моими инструментами, как я могу их использовать?», Позвольте мне показать вам.
+
+### Дисплей Flex
+
+`display: flex;` это просто сказать вашему браузеру, эй, я бы хотел использовать flexbox с этим контейнером, пожалуйста. Это будет инициализировать это поле как контейнер гибких дисков и применить некоторые свойства flex по умолчанию.
+
+Вот что выглядит контейнер без `display: flex;`
+
+![CSS-площадка без гибких свойств](//discourse-user-assets.s3.amazonaws.com/original/2X/8/8f20f30d24cba9a7f56bf950a3f23d37d356ca51.png)
+
+После добавления `display: flex;` мы получаем ниже, применяются свойства flex по умолчанию, заставляющие его показывать как таковые
+
+![Отображение стиля игровой площадки CSS flex по умолчанию](//discourse-user-assets.s3.amazonaws.com/original/2X/6/66404664f9177ae748be00f769faf67d5956034d.png)
+
+### Направление Flex
+
+`flex-direction:` позволяет нам контролировать, как отображаются элементы в контейнере, вы хотите, чтобы они оставались вправо, справа налево, сверху вниз или снизу вверх? вы можете сделать все это легко, установив направление гибкости контейнера.
+
+Flexbox применяет строку по умолчанию для направления. Вот как они выглядят так:
+
+`flex-direction: row;`
+
+![flex-direction: row; пример](//discourse-user-assets.s3.amazonaws.com/original/2X/9/951cc993820547efa28e70dca905f5531a4488d5.png)
+
+`flex-direction: row-reverse;`
+
+![гибкое направление: пример с обратным кругом](//discourse-user-assets.s3.amazonaws.com/original/2X/c/cf738aaf83f29eccdb461e91b775b10e41b92389.png)
+
+`flex-direction: column;`
+
+![flex-direction: пример столбца](//discourse-user-assets.s3.amazonaws.com/original/2X/7/7ef77565bc07ee86fd3033a531dd76b49709cf7e.png)
+
+`flex-direction: column-reverse;`
+
+![flex-direction: столбец-обратный пример](//discourse-user-assets.s3.amazonaws.com/original/2X/e/ec9a1ec064bf0027fa61016ca620df14d9bd47a9.png)
+
+### Flex Wrap
+
+Flexbox по умолчанию будет пытаться поместить все элементы в одну строку, но вы можете изменить это с помощью свойства flex-wrap, это позволяет вам установить, будут ли элементы перетекать или нет, есть три свойства для `flex-wrap:`
+
+`flex-wrap: nowrap` это значение по умолчанию и будет выглядеть как угодно в одной строке слева направо.
+
+`flex-wrap: wrap` это позволит элементам продолжать создавать несколько строк и слева направо.
+
+`flex-wrap: wrap-reverse` позволяет элементам находиться на нескольких строках, но на этот раз отображается справа налево.
+
+### Flex Flow
+
+Flex-поток сочетает использование `flex-wrap` и `flex-direction` в одном свойстве, он используется, сначала устанавливая направление, а затем обертывание.
+
+`flex-flow: column wrap;` является примером, как использовать это.
+
+### Обосновать контент
+
+`justify-content` - свойство aa для выравнивания элементов в контейнере вдоль основной оси (это изменяется в зависимости от того, как отображается содержимое). Для этого есть несколько вариантов, и это позволяет нам заполнять любое пустое пространство в строках, но определять, как мы хотим «оправдать» его.
+
+Вот наши варианты, когда мы оправдываем наш контент `flex-start | flex-end | center | space-between | space-around;` ,
+
+### Выровнять элементы
+
+Выравнивание элементов позволяет выравнивать элементы вдоль поперечной оси. Это позволяет размещать контент по-разному, используя выравнивание содержимого и выравнивание элементов вместе.
+
+`align-items: flex-start | flex-end | center | baseline | stretch;`
+
+### Выровнять содержимое
+
+Это для выравнивания элементов с несколькими строками, для выравнивания на поперечной оси и не будет влиять на контент, который является одной строкой.
+
+`align-content: flex-start | flex-end | center | space-between | space-around | stretch;`
+
+## Игры и приложения
+
+[Flexbox Defense](http://www.flexboxdefense.com/) - это веб-игра, которая учит Flexbox интересным способом.
+
+[Flexbox Froggy](http://flexboxfroggy.com/) также является веб-игрой, которая учит Flexbox интересным способом.
+
+[Flexbox в 5](http://flexboxin5.com/) - это веб-приложение, которое позволяет вам видеть, как Flexbox работает с несколькими простыми элементами управления.
+
+[Flexyboxes](http://the-echoplex.net/flexyboxes/) - это приложение, которое позволяет вам также просматривать образцы кода и изменять параметры, чтобы увидеть, как работает flexbox.
+
+[Flexbox Patters](http://www.flexboxpatterns.com) - это веб-сайт, на котором показаны грузы примеров flexbox
+
+## Документация
+
+[Сеть разработчиков Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
+
+[Трюки CSS](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+
+## Видео
+
+[Flexbox Essentials](https://www.youtube.com/watch?v=G7EIAgfkhmg)
+
+[Практические примеры Flexbox](https://www.youtube.com/watch?v=H1lREysgdgc)
+
+[Что такое Flexbox ?!](https://www.youtube.com/watch?v=Vj7NZ6FiQvo&list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid)
@@ -0,0 +1,62 @@
+---
+title: CSS Selectors Cheat Sheet
+localeTitle: Селекторы CSS
+---
+# Селекторы CSS
+
+В CSS селекторами являются шаблоны, используемые для выбора элементов DOM.
+
+Вот пример использования селекторов. В следующем коде `a` и `h1` являются селекторами:
+
+```css
+a { 
+  color: black; 
+ } 
+ 
+ h1 { 
+  font-size 24px; 
+ } 
+```
+
+## Чит-лист селекторов
+
+| Селектор | Выбор |  
+| --- | --- | | `head` | выбирает элемент с `head` тегом |  
+| `.red` | выбирает все элементы с «красным» классом |  
+| `#nav` | выбирает элементы с идентификатором «nav» |  
+| `div.row` | выбирает все элементы с тегом `div` и классом 'row' | | `[aria-hidden="true"]` | выбирает все элементы с атрибутом `aria-hidden` со значением «true» | | `*` | Селектор подстановочных знаков. Выбирает все элементы DOM. См. Ниже для использования с другими селекторами |
+
+Мы можем комбинировать селекторы интересными способами. Некоторые примеры:
+
+| Селекторы | Выбор |  
+| --- | --- | | `li a` | DOM потолочный комбинатор. Все `a` теги, которые ребенок `li` теги |  
+| `div.row *` | выбирает все элементы, которые являются потомками (или дочерними) элементов с тегом `div` и классом 'row' |  
+| `li > a` | Разностный комбинатор. Выберите прямых потомков, а не всех потомков, таких как селектор потомков |  
+| `li + a` | Смежный комбинатор. Он выбирает элемент, которому предшествует предыдущий элемент. В этом случае только первый `a` после каждого `li` . |  
+| `li, a` | Выбирает все элементы и все `a` `li` элементы. |  
+| `li ~ a` | Комбинированный брат. Выбор `a` элемент следующего в `li` элемента. |
+
+Псевдо-селекторы или псевдоструктурные классы также полезны для выбора структурных элементов из DOM. Вот некоторые из них:
+
+| Селекторы | Выбор | | --- | --- |  
+| `:first-child` | Задайте первый элемент сразу внутри (или дочернего элемента) другого элемента |  
+| `:last-child` | Задайте последний элемент сразу внутри (или дочернего элемента) другого элемента |  
+| `:nth-child()` | Задайте n-й элемент сразу внутри (или дочернего элемента) другого элемента. Принимает целые числа, `even` , `odd` или формулы |  
+| `a:not(.name)` | Выбирает все элементы, которые не из `a` `.name` класса |  
+| `::after` | Позволяет вставлять содержимое на страницу из CSS вместо HTML. Хотя конечный результат на самом деле отсутствует в DOM, он появляется на странице так, как если бы он был. Этот контент загружается после элементов HTML. |  
+| `::before` | Позволяет вставлять содержимое на страницу из CSS вместо HTML. Хотя конечный результат на самом деле отсутствует в DOM, он появляется на странице так, как если бы он был. Это содержимое загружается перед элементами HTML. |
+
+Мы можем использовать псевдоклассы для определения специального состояния элемента DOM, но не будем указывать на элемент самостоятельно. Некоторые примеры:
+
+| Псевдокласс | Выбор | | --- | --- | | `:hover` | выбирает элемент, который наводится указателем мыши |  
+| `:focus` | выбирает элемент, получающий фокус с клавиатуры или программы | | `:active` | выбирает элемент, щелкнув указателем мыши |  
+| `:link` | выбирает все ссылки, которые еще не были нажаты |  
+| `:visited` | выбирает ссылку, которая уже нажата |
+
+## Игры
+
+[CSS Diner](http://flukeout.github.io) - это веб-игра, которая учит почти всему, что нужно знать о объединении селекторов.
+
+## Дополнительная ссылка
+
+Есть еще много селекторов CSS! Узнайте о них в [CodeTuts](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) , [CSS-tricks.com](https://css-tricks.com/almanac/selectors/) , [w3schools.com](http://www.w3schools.com/cssref/css_selectors.asp) или в [Mozilla Developer Network](https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors) .
@@ -0,0 +1,11 @@
+---
+title: How to Absolute Center an Image Both Vertical and Horizontal
+localeTitle: Как Абсолютный центр изображения как по вертикали, так и по горизонтали
+---
+## Как Абсолютный центр изображения как по вертикали, так и по горизонтали
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/how-to-absolute-center-an-image-both-vertical-and-horizontal/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:
@@ -0,0 +1,11 @@
+---
+title: How to Add Stroke to Web Text
+localeTitle: Как добавить штрих в веб-текст
+---
+## Как добавить штрих в веб-текст
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/how-to-add-stroke-to-web-text/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:
@@ -0,0 +1,11 @@
+---
+title: Tutorials
+localeTitle: Учебники
+---
+## Учебники
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:
@@ -0,0 +1,55 @@
+---
+title: Introduction to CSS
+localeTitle: Введение в CSS
+---
+## Введение в CSS
+
+### Что такое CSS?
+
+Каскадные таблицы стилей (CSS) описывают, как должен отображаться html на странице.
+
+Прежде чем разработчики CSS будут применять стили с использованием атрибутов или специальных тегов на каждом узле страницы. Это сделало разметку повторяющейся и подверженной ошибкам.
+
+CSS позволяет селекторам описывать, как должна выглядеть каждая часть соответствующего содержимого.
+
+```CSS
+body { 
+    font-size: 15px; 
+ } 
+ 
+ a { 
+    color: rebeccapurple; 
+    text-decoration: underline; 
+ } 
+```
+
+### Использование CSS
+
+**Внешние таблицы стилей** позволяют многим страницам использовать одни и те же стили.
+
+```HTML
+<link href="styles.css" rel="stylesheet" type="text/css"> 
+```
+
+**Внутренние таблицы стилей** применяют CSS ко всем соответствующим тегам на странице.
+
+```HTML
+<style> 
+    h1 { 
+        font-family: sans-serif; 
+        margin-bottom: 1.5em; 
+    } 
+ </style> 
+```
+
+**Встроенные CSS** применяют стили к одному тегу.
+
+```HTML
+<img src="..." style="border: 1px solid red;" /> 
+```
+
+#### Дополнительная информация:
+
+*   [W3Schools](https://www.w3schools.com/css/css_intro.asp)
+*   [CSS-Tricks Альманах](https://css-tricks.com/almanac/)
+*   [Sitepoint](https://www.sitepoint.com/html-css/?ref_source=github)
@@ -0,0 +1,11 @@
+---
+title: Perfect Full Page Background Image
+localeTitle: Идеальное изображение полной страницы
+---
+## Идеальное изображение полной страницы
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/perfect-full-page-background-image/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:
@@ -0,0 +1,11 @@
+---
+title: Scaling Background Images
+localeTitle: Масштабирование фоновых изображений
+---
+## Масштабирование фоновых изображений
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/scaling-background-images/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация:
@@ -0,0 +1,11 @@
+---
+title: Transparent Background Images
+localeTitle: Прозрачные фоновые изображения
+---
+## Прозрачные фоновые изображения
+
+Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/tutorials/transparent-background-images/index.md) .
+
+[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Дополнительная информация: