diff options
Diffstat (limited to 'files/ru/learn/css/styling_text/fundamentals/index.html')
| -rw-r--r-- | files/ru/learn/css/styling_text/fundamentals/index.html | 54 |
1 files changed, 27 insertions, 27 deletions
diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html index 270aec1251..cc24a192c5 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.html +++ b/files/ru/learn/css/styling_text/fundamentals/index.html @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <p>Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -64,14 +64,14 @@ occasion such as this that he did.</p></pre> <p><code>color</code> can accept any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>, for example:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; }</pre> <p>This will cause the paragraphs to become red, rather than the standard browser default black, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -89,7 +89,7 @@ occasion such as this that he did.</p></pre> <p>To set a different font on your text, you use the {{cssxref("font-family")}} property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser {{anch("Default fonts", "default font")}}. A simple example looks like so:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: arial; }</pre> @@ -200,7 +200,7 @@ occasion such as this that he did.</p></pre> <p>Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font <em>could</em> fail for some reason), you can supply a <strong>font stack</strong> so that the browser has multiple fonts it can choose from. This simply involves a <code>font-family</code> value consisting of multiple font names separated by commas, e.g.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: "Trebuchet MS", Verdana, sans-serif; }</pre> @@ -216,7 +216,7 @@ occasion such as this that he did.</p></pre> <p>Let's add to our previous example, giving the paragraphs a sans-serif font:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> @@ -224,7 +224,7 @@ occasion such as this that he did.</p></pre> <p>This gives us the following result:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -252,7 +252,7 @@ occasion such as this that he did.</p></pre> <p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its <code>font-size</code> to 1.5 <code>em</code> (which would compute to 24 <code>px</code> final size), and then wanted the paragraphs inside the <code><article></code> elements to have a computed font size of 20 <code>px</code>, what <code>em</code> value would you use?</p> -<pre class="brush: html notranslate"><!-- document base font-size is 16px --> +<pre class="brush: html"><!-- document base font-size is 16px --> <article> <!-- If my font-size is 1.5em --> <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> </article></pre> @@ -266,7 +266,7 @@ occasion such as this that he did.</p></pre> <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -279,7 +279,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -338,7 +338,7 @@ p { <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -351,7 +351,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -376,7 +376,7 @@ p { <p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p> -<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> +<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> <p>The four properties are as follows:</p> @@ -391,7 +391,7 @@ p { <p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p> -<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red, +<pre class="brush: css">text-shadow: 1px 1px 1px red, 2px 2px 1px red;</pre> <p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p> @@ -399,7 +399,7 @@ p { <div class="hidden"> <h5 id="Hidden_example1">Hidden example1</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -411,7 +411,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -457,7 +457,7 @@ p { <p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -469,7 +469,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -498,14 +498,14 @@ p { <p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this:</p> -<pre class="brush: css notranslate">line-height: 1.6;</pre> +<pre class="brush: css">line-height: 1.6;</pre> <p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p> <div class="hidden"> <h5 id="Hidden_example2">Hidden example2</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -517,7 +517,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -549,7 +549,7 @@ p { <p>So as an example, we could apply some word- and letter-spacing to the first line of each {{htmlelement("p")}} element in our example:</p> -<pre class="brush: css notranslate">p::first-line { +<pre class="brush: css">p::first-line { letter-spacing: 4px; word-spacing: 4px; }</pre> @@ -557,7 +557,7 @@ p { <p>Let's add some to our example, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -569,7 +569,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -650,7 +650,7 @@ p { <p>A full example would look like this:</p> -<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> +<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> <h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2> @@ -661,7 +661,7 @@ p { <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>HTML Input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>Some sample text for your delight</p> @@ -682,7 +682,7 @@ p { </div> </pre> -<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input"); +<pre class="brush: js">const htmlInput = document.querySelector(".html-input"); const cssInput = document.querySelector(".css-input"); const reset = document.getElementById("reset"); let htmlCode = htmlInput.value; |