From 74f1c3c85cf4f0ff1cc631d1320ed90c404c6ed7 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Sun, 11 Jul 2021 13:02:49 -0400 Subject: delete conflicting/orphaned docs in ru (#1426) --- .../learn/css/styling_text/fundamentals/index.html | 153 --------------------- 1 file changed, 153 deletions(-) delete mode 100644 files/ru/conflicting/learn/css/styling_text/fundamentals/index.html (limited to 'files/ru/conflicting/learn/css/styling_text/fundamentals/index.html') diff --git a/files/ru/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ru/conflicting/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index f61ad3b65e..0000000000 --- a/files/ru/conflicting/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Text styles -slug: conflicting/Learn/CSS/Styling_text/Fundamentals -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}This is the 7th section of the CSS Getting Started tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.

- -

Information: Text styles

- -

CSS имеет несколько свойств для стилизации текста.

- -

There is a convenient shorthand property, {{ cssxref("font") }}, which you can use to specify several aspects at once—for example:

- - - -
-
Example
- -
p {
-font: italic 75%/125% "Comic Sans MS", cursive;
-}
-
- -

This rule sets various font properties, making all paragraphs italic.

- -

The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).

- -

The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.

- -

The rule has the side-effect of turning off bold and small-caps (setting them to normal).

-
- -

Font faces

- -

You cannot predict what typefaces the readers of your document will have. When you specify font typefaces, it is a good idea to give a list of alternatives in order of preference.

- -

End the list with one of the built-in default typefaces: serif, sans-serif, cursive, fantasy or monospace.

- -

If the typeface does not support some features in the document, then the browser can substitute a different typeface. For example, the document might contain special characters that the typeface does not support. If the browser can find another typeface that has those characters, then it will use the other typeface.

- -

To specify a typeface on its own, use the {{ cssxref("font-family") }} property.

- -

Font sizes

- -

Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.

- -

You can use some built-in values for font sizes, like small, medium and large. You can also use values relative to the font size of the parent element like: smaller, larger, 150% or 1.5em. An "em" is equivalent to the width of the letter "m" (for the font size of the parent element); thus 1.5em is one-and-a-half times the size of the font of the parent element.

- -

If necessary you can specify an actual size like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer. This is not accessible for visually impaired users because it does not allow them to change the size. A more accessible strategy is to set a built-in value like medium on a top-level element of the document, and then set relative sizes for all its descendent elements.

- -

To specify a font size on its own, use the {{ cssxref("font-size") }} property.

- -

Line height

- -

The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger-than-normal spacing makes it easier to read, especially if the font size is small.

- -

To specify a line height on its own, use the {{ cssxref("line-height") }} property.

- -

Decoration

- -

The separate {{ cssxref("text-decoration") }} property can specify other styles, like underline or line-through. You can set it to none to explicitly remove any decoration.

- -

Other properties

- -

To specify italic on its own, use {{ cssxref("font-style") }}: italic;
- To specify bold on its own, use {{ cssxref("font-weight") }}: bold;
- To specify small capitals on its own, use {{ cssxref("font-variant") }}: small-caps;

- -

To turn any of these off individually, you can specify the value normal or inherit.

- -
-
More details
- -

You can specify text styles in a variety of other ways.

- -

For example, some of the properties mentioned here have other values that you can use.

- -

In a complex stylesheet, avoid using the shorthand font property because of its side-effects (resetting other individual properties).

- -

For full details of the properties that relate to fonts, see Fonts in the CSS Specification. For full details of text decoration, see Text.

- -

If you don't want to depend on the typefaces installed on users' systems, you can use {{ cssxref("@font-face") }} to specify an online font. However, this requires that the users have a browser that supports this rule.

-
- -

Action: Specifying fonts

- -

For a simple document, you can set the font of the {{ HTMLElement("body") }} element and the rest of the document inherits the settings.

- -
    -
  1. Edit your CSS file.
    2. -
  2. Add the following rule to change the font throughout the document. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it: - 
    body {
-font: 16px "Comic Sans MS", cursive;
-}
-
    -
    3. -
  3. Add a comment explaining the rule, and add white space to make it match your preferred layout.
    4. -
  4. Save the file and refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. From your browser's menu bar, choose View > Text Size > Increase (or View > Zoom > Zoom In). Even though you specified 16 pixels in the style, a user reading the document can change the size.
    6. -
- -
-
Challenge
- -

Without changing anything else, make all six initial letters twice the size in the browser's default serif font:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Possible solution
- -

Add the following style declaration to the strong rule:

- -
  font: 200% serif;
-
-If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. - -

 

-Hide solution
-See a solution for the challenge.
- -

What next?

- -

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}Your sample document already uses several named colors. The next section lists the names of standard colors and explains how you can specify others.

-- cgit v1.2.3-54-g00ecf