Skip to content

CSS text

Jump to bottom
garevna edited this page Apr 20, 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 Размер шрифта и высота строки

font-size / line-height

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

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

ico20 Шрифты

link-20 Google Fonts

Show fonts
Select fonts

ico20 Google Fonts

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Cute+Font|Montserrat|Roboto" rel="stylesheet">
    <style>
        body {
            font-family: Roboto;
            font-size:16px;
        }
        h1 {
            font-family: "Cute Font";
            font-size: 3em;
        }
        h2 {
            font-family: Montserrat;
            font-size: 1.5em;
        }
    </style>
  </head>
  <body>
    <h1>Google Fonts</h1>
    <h2>Google Fonts</h2>
    <p>Google Fonts Google Fonts Google Fonts 
       Google Fonts Google Fonts Google Fonts 
       Google Fonts Google Fonts Google Fonts
    </p>
  </body>
</html>

ico20 Font Awesome

Подлинкуем Font Awesome к странице:

cap-25 Теперь разметка страницы будет такой:

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
          crossorigin="anonymous">

    <style>
        html {
            font-family: Arial;
            font-size:16px;
            line-height: 32px;
            color: #555;
        }
        body {
            padding: 20px;
        }
        h1 {
            font-size: 2em;
            color: #079;
        }
        h2 {
            font-size: 1.5em;
            color: #d70;
        }
        .ico { font-size: 1.5rem; color: #fa0; }
    </style>
  </head>
  <body>
    <h1> Font Awesome</h1>
    
    <h2> Icons</h2>
    
    <p> Font Awesome's CDN is the quickest and easiest way to get Font Awesome on your website</p>
    <p> Start placing icons in your HTML's &lt;body&gt;</p>
    <p> Find the right icon and learn how to add it onto your page</p>
  </body>
</html>

Осталось только вставить иконки:
Единицы измерения

© Irina H.Fylyppova 2019

© Irina H.Fylyppova 2019

Занятие 1

Занятие 2

Занятие 3

Занятие 4

Занятие 5

Занятие 6

Занятие 7

Занятие 8

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

Clone this wiki locally