diff options
Diffstat (limited to 'files/ru/learn/css/first_steps')
| -rw-r--r-- | files/ru/learn/css/first_steps/how_css_is_structured/index.html | 56 | ||||
| -rw-r--r-- | files/ru/learn/css/first_steps/how_css_works/index.html | 16 |
2 files changed, 36 insertions, 36 deletions
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 <p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code><link></code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -61,7 +61,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <p>Файл CSS может выглядеть следующим образом:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; background-color: yellow; border: 1px solid black; @@ -75,7 +75,7 @@ p { <p>В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p> -<pre class="brush: html notranslate"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> +<pre class="brush: html"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> <link rel="stylesheet" href="styles/style.css"> <!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --> @@ -90,7 +90,7 @@ p { <p>Таким образом, HTML будет выглядеть вот так:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -119,7 +119,7 @@ p { <p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -141,7 +141,7 @@ p { <p>index.html:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> @@ -157,7 +157,7 @@ p { <p>styles.css:</p> -<pre class="brush: css notranslate">/* Пишите сюда свой код */ +<pre class="brush: css">/* Пишите сюда свой код */ p { color: red; @@ -177,7 +177,7 @@ p { <p>Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:</p> -<pre class="brush: css notranslate">h1 /* это селектор тегов */ +<pre class="brush: css">h1 /* это селектор тегов */ a:link /* это селектор ссылок */ .manythings /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */ #onething /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */ @@ -195,7 +195,7 @@ h1, h2, .intro /* перечисление селекторов */ <p>Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента <code>p</code> — он будет синим; также я задал класс, который сделает элемент красным:</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: red; } @@ -205,11 +205,11 @@ p { <p>А теперь допустим, что в нашем HTML-коде у нас есть абзац <code>p</code> с классом <code>special</code>. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?</p> -<pre class="brush: html notranslate"><p class="special">Какого же я цвета?</p></pre> +<pre class="brush: html"><p class="special">Какого же я цвета?</p></pre> <p>В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются <strong>каскадами</strong>, или <strong>спецификациями</strong>. В примере ниже мы задали два правила для селектора <code>p</code>, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; } @@ -274,9 +274,9 @@ p { <p>Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию <code>calc()</code>. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:</p> <div id="calc_example"> -<pre class="brush: html notranslate"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> +<pre class="brush: html"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> -<pre class="brush: css notranslate">.outer { +<pre class="brush: css">.outer { border: 5px solid black; } @@ -297,9 +297,9 @@ p { <p>В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} <code>rotate()</code>.</p> <div id="transform_example"> -<pre class="brush: html notranslate"><div class="box"></div></pre> +<pre class="brush: html"><div class="box"></div></pre> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { margin: 30px; width: 100px; height: 100px; @@ -324,13 +324,13 @@ p { <p>До сих пор не сталкивались мы с правилами <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (произносится как <em>эт-рулс</em>, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил <code>@rules</code> простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать <code>@import</code>:</p> -<pre class="brush: css notranslate">@import 'styles2.css';</pre> +<pre class="brush: css">@import 'styles2.css';</pre> <p>Чаще других встречается <code>@rules</code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> под названием </span></font><code>@media</code>: оно позволяет вам использовать <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиавыражения</a>, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).</p> <p>Ниже у нас CSS-файл, в котором значение заднего фона элемента <code><body></code> равно <code>pink</code>. Однако после мы добавили правило <code>@media</code>, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background-color: pink; } @@ -350,7 +350,7 @@ p { <p>К примеру, это строка (комментарий не в счёт):</p> -<pre class="brush: css notranslate">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются +<pre class="brush: css">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах значения добавляются в порядке верх(низ)–право–лево. В двузначных стенограммах значения добавляются @@ -359,7 +359,7 @@ padding: 10px 15px 15px 5px;</pre> <p>делает то же самое, что и эти четыре, вместе взятые:</p> -<pre class="brush: css notranslate">padding-top: 10px; +<pre class="brush: css">padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; @@ -367,18 +367,18 @@ padding-left: 5px; <p>или эти:</p> -<pre class="brush: cpp notranslate">padding-block-start: 10px +<pre class="brush: cpp">padding-block-start: 10px padding-inline-end: 15px; padding-block-end: 15px; padding-inline-start: 5px;</pre> <p>в то время как строка:</p> -<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> +<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> <p>делает то же, что и эти строки:</p> -<pre class="brush: css notranslate">background-color: red; +<pre class="brush: css">background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; @@ -398,7 +398,7 @@ background-scroll: fixed;</pre> <p>Комментарии в CSS начинаются с <code>/*</code> и окачиваются с <code>*/</code>. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.</p> -<pre class="brush: css notranslate">/* Работаю над основными элементами */ +<pre class="brush: css">/* Работаю над основными элементами */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; @@ -435,7 +435,7 @@ div p + p { <p>Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора <code>.special</code>.</p> -<pre class="brush: css notranslate">/*.special { +<pre class="brush: css">/*.special { color: red; }*/ @@ -451,7 +451,7 @@ p { <p>В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; @@ -486,7 +486,7 @@ div p + p { <p id="Very_compact">То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:</p> -<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +<pre class="brush: css">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;} <p>Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:</p> -<pre class="brush: css notranslate">margin: 0 auto; +<pre class="brush: css">margin: 0 auto; padding-left: 10px;</pre> <p>А такие объявления не действительны:</p> -<pre class="brush: css notranslate">margin: <strong>0auto</strong>; +<pre class="brush: css">margin: <strong>0auto</strong>; <strong>padding- left</strong>: 10px;</pre> <p>Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.</p> 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> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -69,7 +69,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>В DOM-дереве узел, соответствующий элементу <code><p></code>, — это родительский элемент. Его дочерние элементы — текст и три элемента <code><span></code>. Узлы <code>SPAN</code> также будут родителями — с текстом в качестве дочерних элементов:</p> -<pre class="notranslate">P +<pre>P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" @@ -84,14 +84,14 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> <div class="hidden"> -<pre class="brush: css notranslate">p {margin:0;}</pre> +<pre class="brush: css">p {margin:0;}</pre> </div> <h2 id="Добавление_CSS_в_DOM">Добавление CSS в DOM</h2> <p>Допустим, мы добавили таблицу стилей к нашему примеру:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -100,7 +100,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>А вот CSS-код:</p> -<pre class="brush: css notranslate">span { +<pre class="brush: css">span { border: 1px solid black; background-color: lime; }</pre> @@ -126,9 +126,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Ниже я использовал британское написание слова <em>color</em>, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.</p> <div id="Skipping_example"> -<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> +<pre class="brush: html"><p> I want this text to be large, bold and blue.</p></pre> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-weight: bold; colour: blue; /* некорректное написание свойства цвета */ font-size: 200%; @@ -141,7 +141,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 500px; width: calc(100% - 50px); }</pre> |