Skip to content

CSS text

Jump to bottom
garevna edited this page Apr 19, 2019 · 12 revisions

ico25 Текст

При работе с текстом нужно знать о строчных и блочных элементах, о чем подробнее речь пойдет далее

В качестве контейнеров для текста обычно выступают следующие элементы:

  • p - параграф ( абзац текста )
  • h1 | h2 | h3 | h4 | h5 | h6 - заголовки

Эти элементы по умолчанию занимают всю ширину страницы

<body>
   <h1>Header</h1>
   <h2>Sub-header</h2>
   <p>The word-break property in CSS can be used to change when line breaks ought to occur. 
      Normally, line breaks in text can only occur in certain spaces, 
      like when there is a space or a hyphen</p>
</body>

Однако мы можем установить ширину этих элементов с помощью CSS:

<head>
    <style>
        h1, h2 { width: 200px; }
        p { width: 300px; }
    </style>
</head>
<body>
   <h1>Header</h1>
   <h2>Sub-header</h2>
   <p>The word-break property in CSS can be used to change when line breaks ought to occur. 
      Normally, line breaks in text can only occur in certain spaces, 
      like when there is a space or a hyphen</p>
</body>

Эти элементы называют блочными, поскольку по умолчанию они не позволяют другим элементам располагаться справа или слева - только сверху или снизу

Как видите, даже когда размер блочного элемента значительно меньше ширины страницы, он все равно находится в гордом одиночестве, и пространство слева от него остается пустым

ico20 Горизонтальное выравнивание

text-align

Свойство выравнивает строки текста внутри блока по ширине относительно его границ.

<head>
    <style>
        h1 { text-align: center; }
        h2 { text-align: right; }
        h3 { text-align: left; }
        p { text-align: justify; }
    </style>
</head>
<body>
    <h1>Заголовок первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <h3>Заголовок третьего уровня</h3>
   <p>The word-break property in CSS can be used to change when line breaks ought to occur.
      Normally, line breaks in text can only occur in certain spaces, 
      like when there is a space or a hyphen</p>
</body>
Вертикальное выравнивание мы будем подробнее изучать далее

ico20 white-space

Если вы вставите в текст несколько пробелов подряд, браузер по умолчанию будет выводить их как один единственный пробел

Это не всегда удобно

Для вывода текста "как есть" можно воспользоваться элементом pre

Сравним вывод текста в элементе pre с выводом такого же текста, но с помощью обычного элемента p

warn-25Для чистоты эксперимента в контейнер head нужно вставить meta-тег, управляющий отображением страницы на различных девайсах:

<meta name="viewport" 
      content="width=device-width, 
      initial-scale=1.0, 
      maximum-scale=1.0, 
      user-scalable=no">

Итак, вставим на страницу следующую разметку:

<pre>
    _____________________________________________________

    The word-break property in CSS
        can be used to change
            when line breaks ought to occur
                Normally, line breaks in text
            can only occur in certain spaces,
        like when there is a space or a hyphen


    ______________________________________________________
</pre>

<p>
    _____________________________________________________

    The word-break property in CSS
        can be used to change
            when line breaks ought to occur
                Normally, line breaks in text
            can only occur in certain spaces,
        like when there is a space or a hyphen


    ______________________________________________________
</p>

и посмотрим, что у нас получилось:

Теперь внесем небольшие изменения в нашу разметку с помощью CSS

добавим стилевой атрибут white-space со значением pre элементу p:

<head>
   <style>
       p {
           white-space: pre;
       }
   </style>
</head>
<body>
   <pre>
    _____________________________________________________

    The word-break property in CSS
        can be used to change
            when line breaks ought to occur
                Normally, line breaks in text
            can only occur in certain spaces,
        like when there is a space or a hyphen


    ______________________________________________________
   </pre>

   <p>
    _____________________________________________________

    The word-break property in CSS
        can be used to change
            when line breaks ought to occur
                Normally, line breaks in text
            can only occur in certain spaces,
        like when there is a space or a hyphen


    ______________________________________________________
   </p>
</body>

Теперь элемент p ведет себя так же, как элемент pre:
white-space
Возможные значения
normal Значение по умолчанию
Повторяющиеся пробелы и разрывы строк игнорируются, текст переносится по обычным правилам
nowrap Повторяющиеся пробелы и разрывы строк игнорируются, причем разрывы строк подавляются даже тогда, когда текст выходит за границы контейнера
pre Текст выводится "как есть", т.е. выводятся повторяющиеся пробелы и переводы строк, а перевод строки при переполнении ширины контейнера не работает
pre-line Повторяющиеся пробелы игнорируются, текст переносится по обычным правилам, но перевод строки учитывается
В старых версиях браузеров поддержка не полная
pre-wrap Аналогично значению pre за исключением того, что строка переносится при переполнении ширины контейнера

ico20 overflow

Мы уже убедились, что контенер для текста может переполняться

Давайте посмотрим еще раз

Создадим два конейнера для текста ( элементы p )

Ограничим их размер шириной 400 и высотой 200 пикселей

p {
    width: 400px;
    height: 200px;
}

На картинке контейнеры p обозначены красной рамкой

Во втором контейнере есть текст, и, как мы видим, этот текст выходит за границы контейнера ( переполнение )

Произошло переполнение ( overflow )

Если теперь вставить текст в первый контейнер, и этот текст также будет превышать размер контейнера p, то произойдет крайне неприятная вещь - текст из первого контейнера наложится на текст второго элемента p

Для разрешения таких ситуаций есть CSS-атрибут overflow

overflow
Возможные значения
visible Значение по умолчанию
Текст может отображаться снаружи контейнера
hidden Текст обрезается, прокрутки нет
scroll Текст обрезается
Полосы прокрутки появляются в любом случае, даже если нет необходимости ( текст не переполняет контейнер )
auto Прокрутка появляется только при необходимости, т.е. если текст переполняет контейнер

ico20 text-overflow

Теперь рассмотрим ситуацию, когда

ico20 Размер шрифта и высота строки

font-size / line-height

Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента.

h1 {
    font-size: 16px;
    line-height: 20px;
}

ico20 text-overflow

ico20 Шрифты и единицы измерения

  Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение.

🎓 Единицы измерения

  • px – абсолютные, чёткие, понятные;

  • em – относительно размера шрифта;

  • rem - задаёт размер относительно размера шрифта элемента <html>;

  • % – относительно такого же свойства родителя;

  • vw – 1% ширины окна;

  • vh – 1% высоты окна.

© Irina H.Fylyppova 2019

© Irina H.Fylyppova 2019

Занятие 1

Занятие 2

Занятие 3

Занятие 4

Занятие 5

Занятие 6

Занятие 7

Занятие 8

Дополнительно

Clone this wiki locally