From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../first_steps/how_css_is_structured/index.html | 56 +++++++++++----------- .../learn/css/first_steps/how_css_works/index.html | 16 +++---- 2 files changed, 36 insertions(+), 36 deletions(-) (limited to 'files/ru/learn/css/first_steps') diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html index a358eaf98b..325c5e56ae 100644 --- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -46,7 +46,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS

Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением .css, и ссылка на него из HTML-элемента <link>:

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -61,7 +61,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS
 
 
Файл CSS может выглядеть следующим образом:

 
-
h1 {
+
h1 {
   color: blue;
   background-color: yellow;
   border: 1px solid black;
@@ -75,7 +75,7 @@ p {
 
 
В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:

 
-
<!-- Файл находится внутри под-директории styles, находящейся в текущей директории -->
+
<!-- Файл находится внутри под-директории styles, находящейся в текущей директории -->
 <link rel="stylesheet" href="styles/style.css">
 
 <!-- Файл — внутри под-директории styles внутри под-под-директории general и так далее -->
@@ -90,7 +90,7 @@ p {
 
 
Таким образом, HTML будет выглядеть вот так:

 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -119,7 +119,7 @@ p {
 
 
Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style:

 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -141,7 +141,7 @@ p {
 
 
index.html:

 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html lang="ru">
   <head>
     <meta charset="utf-8">
@@ -157,7 +157,7 @@ p {
 
 
styles.css:

 
-
/* Пишите сюда свой код */
+
/* Пишите сюда свой код */
 
 p {
   color: red;
@@ -177,7 +177,7 @@ p {
 
 
Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:

 
-
h1  /* это селектор тегов */
+
h1  /* это селектор тегов */
 a:link  /* это селектор ссылок */
 .manythings  /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */
 #onething  /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */
@@ -195,7 +195,7 @@ h1, h2, .intro  /* перечисление селекторов */
 
 
Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

 
-
.special {
+
.special {
   color: red;
 }
 
@@ -205,11 +205,11 @@ p {
 
 
А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

 
-
<p class="special">Какого же я цвета?</p>

+
<p class="special">Какого же я цвета?</p>

 
 
В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

 
-
p {
+
p {
   color: red;
 }
 
@@ -274,9 +274,9 @@ p {
 
Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

 
 

-
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

+
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

 
-
.outer {
+
.outer {
   border: 5px solid black;
 }
 
@@ -297,9 +297,9 @@ p {
 
В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} rotate().

 
 

-
<div class="box"></div>

+
<div class="box"></div>

 
-
.box {
+
.box {
   margin: 30px;
   width: 100px;
   height: 100px;
@@ -324,13 +324,13 @@ p {
 
 
До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:

 
-
@import 'styles2.css';

+
@import 'styles2.css';

 
 
Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

 
 
Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

 
-
body {
+
body {
   background-color: pink;
 }
 
@@ -350,7 +350,7 @@ p {
 
 
К примеру, это строка (комментарий не в счёт):

 
-
/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
+
/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
    в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
    значения добавляются в порядке верх(низ)–право–лево.
    В двузначных стенограммах значения добавляются
@@ -359,7 +359,7 @@ padding: 10px 15px 15px 5px;

 
 
делает то же самое, что и эти четыре, вместе взятые:

 
-
padding-top: 10px;
+
padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 5px;
@@ -367,18 +367,18 @@ padding-left: 5px;
 
 
или эти:

 
-
padding-block-start: 10px
+
padding-block-start: 10px
 padding-inline-end: 15px;
 padding-block-end: 15px;
 padding-inline-start: 5px;

 
 
в то время как строка:

 
-
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

+
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

 
 
делает то же, что и эти строки:

 
-
background-color: red;
+
background-color: red;
 background-image: url(bg-graphic.png);
 background-position: 10px 10px;
 background-repeat: repeat-x;
@@ -398,7 +398,7 @@ background-scroll: fixed;

 
 
Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.

 
-
/* Работаю над основными элементами */
+
/* Работаю над основными элементами */
 /* -------------------------------------------------------------------------------------------- */
 body {
   font: 1em/150% Helvetica, Arial, sans-serif;
@@ -435,7 +435,7 @@ div p + p {
 
 
Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.

 
-
/*.special {
+
/*.special {
   color: red;
 }*/
 
@@ -451,7 +451,7 @@ p {
 
 
В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

 
-
body {
+
body {
   font: 1em/150% Helvetica, Arial, sans-serif;
   padding: 1em;
   margin: 0 auto;
@@ -486,7 +486,7 @@ div p + p {
 
 
То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

 
-
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
 @media (min-width: 70em) { body {font-size: 130%;} }
 
 h1 {font-size: 1.5em;}
@@ -500,12 +500,12 @@ div p + p {padding-top: 0;}
 
 
Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

 
-
margin: 0 auto;
+
margin: 0 auto;
 padding-left: 10px;

 
 
А такие объявления не действительны:

 
-
margin: 0auto;
+
margin: 0auto;
 padding- left: 10px;

 
 
Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html
index b5d03c7cea..208a451be4 100644
--- a/files/ru/learn/css/first_steps/how_css_works/index.html
+++ b/files/ru/learn/css/first_steps/how_css_works/index.html
@@ -59,7 +59,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
 
 
Возьмём следующий пример:

 
-
<p>
+
<p>
   Let's use:
   <span>Cascading</span>
   <span>Style</span>
@@ -69,7 +69,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
 
 
В DOM-дереве узел, соответствующий элементу <p>, — это родительский элемент. Его дочерние элементы — текст и три элемента <span>. Узлы SPAN также будут родителями — с текстом в качестве дочерних элементов:

 
-
P
+
P
 ├─ "Let's use:"
 ├─ SPAN
 |  └─ "Cascading"
@@ -84,14 +84,14 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
 
{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}

 
 
 
 
Добавление CSS в DOM

 
 
Допустим, мы добавили таблицу стилей к нашему примеру:

 
-
<p>
+
<p>
   Let's use:
   <span>Cascading</span>
   <span>Style</span>
@@ -100,7 +100,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
 
 
А вот CSS-код:

 
-
span {
+
span {
   border: 1px solid black;
   background-color: lime;
 }

@@ -126,9 +126,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
 
Ниже я использовал британское написание слова color, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.

 
 

-
<p> I want this text to be large, bold and blue.</p>

+
<p> I want this text to be large, bold and blue.</p>

 
-
p {
+
p {
   font-weight: bold;
   colour: blue; /* некорректное написание свойства цвета */
   font-size: 200%;
@@ -141,7 +141,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
 
 
Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают calc() как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции calc(), равной 100% - 50px. Старые браузеры используют пиксельное значение, потому что не распознают calc(). Новые браузеры используют calc() так как эта строка появляется позже в каскаде.

 
-
.box {
+
.box {
   width: 500px;
   width: calc(100% - 50px);
 }

-- 
cgit v1.2.3-54-g00ecf