From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/uk/learn/css/styling_text/index.html | 57 --- .../css/styling_text/styling_lists/index.html | 395 --------------------- 2 files changed, 452 deletions(-) delete mode 100644 files/uk/learn/css/styling_text/index.html delete mode 100644 files/uk/learn/css/styling_text/styling_lists/index.html (limited to 'files/uk/learn/css/styling_text') diff --git a/files/uk/learn/css/styling_text/index.html b/files/uk/learn/css/styling_text/index.html deleted file mode 100644 index 46c343f406..0000000000 --- a/files/uk/learn/css/styling_text/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Стилізація тексту -slug: Learn/CSS/Styling_text -tags: - - Beginner - - CSS - - CodingScripting - - Fonts - - Landing - - Links - - Module - - NeedsTranslation - - Text - - TopicStub - - font - - letter - - line - - lists - - shadow - - web fonts -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

- -

Prerequisites

- -

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Thimble.

-
- -

Guides

- -

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

- -
-
Fundamental text and font styling
-
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
-
Styling lists
-
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
-
Styling links
-
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
-
Web fonts
-
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
-
- -

Assessments

- -

The following assessments will test your understanding of the text styling techniques covered in the guides above.

- -
-
Typesetting a community school homepage
-
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
-
diff --git a/files/uk/learn/css/styling_text/styling_lists/index.html b/files/uk/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index c47c3888c6..0000000000 --- a/files/uk/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: Стилі списків -slug: Learn/CSS/Styling_text/Styling_lists -tags: - - CSS - - Початківець - - Спискі - - Стаття - - Стилі - - Текст -translation_of: Learn/CSS/Styling_text/Styling_lists -original_slug: Learn/CSS/Styling_text/Стилі_списків ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

Здебільшого Списки ведуть себе як будь-який інший текст, але є деякі властивості CSS, специфічні для списків, які вам потрібно знати, а також деякі найкращі способи розгляду. Ця стаття пояснює все.

- - - - - - - - - - - - -
Передумови:Основна комп'ютерна грамотність, основи HTML (вивчення Вступу до HTML), основи CSS (вивчення Вступу до CSS), Основи тексту та шрифтів CSS.
Мета:Познайомитися з найкращими практиками та властивостями, пов'язаними зі списками стилів.
- -

Простий приклад списку

- -

Почнемо з того, давайте подивимося на приклад простого списку. У цій статті ми розглянемо списки неупорядкованих, упорядкованих та опису - у всіх є стилістичні функції, схожі на деякі,  що є характерними для їхнього типу списку. Неперевершений приклад доступний на Github ( також перевірте цей код)

- -

Приклад HTML для нашого списку виглядає так:

- -
<h2>Shopping (unordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ul>
-  <li>Humous</li>
-  <li>Pitta</li>
-  <li>Green salad</li>
-  <li>Halloumi</li>
-</ul>
-
-<h2>Recipe (ordered) list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<ol>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
-
-<h2>Ingredient description list</h2>
-
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
-
-<dl>
-  <dt>Humous</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
-  <dt>Pitta</dt>
-  <dd>A soft, slightly leavened flatbread.</dd>
-  <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
-  <dt>Green salad</dt>
-  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
-</dl>
- -

Якщо ви зараз перейдете до живого прикладу та вивчіть елементи списку, що використовують інструменти розробника браузера, ви помітите пара стилів по замовчуванням:

- - - -

Обробка списку інтервалів

- -

При складанні списків стилів потрібно настроїти свої стилі, щоб вони мали однакові вертикальні відстані як їх оточуючі елементи (такі як абзаци та зображення, іноді їх називають вертикальним ритмом) і однакові між собою горизонтальні відстані (ви можете побачити  закінчений стиль приклад  в Github, і знайти вихідний код також.)

- -

CSS, який використовується для стилізації тексту та інтервалу, виглядає наступним чином:

- -
/* General styles */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Description list styles */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
- - - -

List-specific styles

- -

Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:

- - - -

Bullet styles

- -

As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:

- -
ol {
-  list-style-type: upper-roman;
-}
- -

Це дає нам такий вигляд:

- -

an ordered list with the bullet points set to appear outside the list item text.

- -

You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.

- -

Bullet position

- -

The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is outside, which causes the bullets to sit outside the list items, as seen above.

- -

If you set the value to inside, the bullets will sit inside the lines:

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

an ordered list with the bullet points set to appear inside the list item text.

- -

Using a custom bullet image

- -

The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the Styling boxes module. For now, here's a taster!

- -

In our finished example, we have styled the unordered list like so (on top of what you've already seen above):

- -
ul {
-  padding-left: 2rem;
-  list-style-type: none;
-}
-
-ul li {
-  padding-left: 2rem;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

Here we've done the following:

- - - -

This gives us the following result:

- -

an unordered list with the bullet points set as little star images

- -

list-style shorthand

- -

The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

Could be replaced by this:

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are disc, none, and outside). If both a type and an image are specified, the type is used as a fallback if the image can't be loaded for some reason.

- -

Controlling list counting

- -

Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.

- -

start

- -

The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:

- -
<ol start="4">
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('start', '100%', 150) }}

- -

reversed

- -

The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:

- -
<ol start="4" reversed>
-  <li>Toast pitta, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li>Wash and chop the salad.</li>
-  <li>Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('reversed', '100%', 150) }}

- -

value

- -

The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:

- -
<ol>
-  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
-  <li value="6">Wash and chop the salad.</li>
-  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
-</ol>
- -

Gives you this output:

- -

{{ EmbedLiveSample('value', '100%', 150) }}

- -
-

Note: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the value attribute.

-
- -

Active learning: Styling a nested list

- -

In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:

- -
    -
  1. Give the unordered list square bullets.
    2. -
  2. Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.
    3. -
  3. Give the ordered list lower alphabetical bullets.
    4. -
  4. Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.
    5. -
- -

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

See also

- -

CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:

- - - -

Summary

- -

Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

- -

 

- -

In this module

- - - -

 

-- cgit v1.2.3-54-g00ecf