Skip to content

CSS text

Jump to bottom
garevna edited this page May 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>

Осталось только вставить иконки:

ico20 @font-face

Файлы шрифтов имеют несколько форматов:

  • ttf
  • otf
  • woff
  • eot
  • svg ...

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

Медиа-правило @font-face описывает загружаемый шрифт

cap-25

Предположим, что на сервере есть папка /css/fonts/, в которой хранятся файлы шрифтов, и там есть файлы Comic Sans MS.ttf, Comic Sans MS.eot, Comic Sans MS.otf, Comic Sans MS.woff и Comic Sans MS.svg

Тогда можно подключить шрифт Comic Sans MS следующим образом:

@font-face {
    font-family: 'Comic Sans MS';
    src: url("/css/fonts/Comic Sans MS.ttf");
    src: local('Comic Sans MS'), local('Comic Sans-MS'),
         url("/css/fonts/Comic Sans MS.eot") format("embedded-opentype"),
         url("/css/fonts/Comic Sans MS.otf") format("opentype"),
         url("/css/fonts/Comic Sans MS.woff") format("woff"),
         url("/css/fonts/Comic Sans MS.svg");
}
src

Определяет ресурс, где хранится шрифт

Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя

local() | url()
  • Если в правиле была объявлена функция local() с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт
  • В противном случае будет скачан и использован шрифт, указанный в функции url()

Одновременное использование url() и local() в правиле @font-face позволяет использовать локальный шрифт, если он доступен, или скачать копию шрифта, если на компьютере пользователя его не окажется

format()

Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format()

Доступными являются следующие форматы: woff, woff2, truetype, opentype, embedded-opentype и svg

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

© Irina H.Fylyppova 2019

© Irina H.Fylyppova 2019

Занятие 1

Занятие 2

Занятие 3

Занятие 4

Занятие 5

Занятие 6

Занятие 7

Занятие 8

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

Clone this wiki locally