Размер текста (шрифта)
В предыдущем уроке мы научились выравнивать текст. В этом уроке мы научимся устанавливать тексту нужный размер.
Для этого можно использовать, например, заголовки <hi></hi>:
<h1> текст </h1>
<h2> текст </h2>
<h3> текст </h3>
<h4> текст </h4>
<h5> текст </h5>
<h6> текст </h6>
У нас должно получиться следующее:
текст
текст
текст
текст
текст
текст
Для заголовков, как и для абзацев, можно использовать атрибут <align> из предыдущего урока.
Для изменения размера шрифта также можно использовать тег <p> с атрибутом<style>:
<p style="font-size:20px">
Где 20px – это высота шрифта в пикселях. Вместо числового обозначения 20px можно использовать названия размеров: xx-small, x-small, small, medium, large, x-large, xx-large. Все это способы установления абсолютного размера шрифта. Абсолютными на 100% они конечно тоже не являются, т.к. зависят от настроек браузера пользователя и операционной системы этого пользователя. Но в любом случае предпочтительнее использовать именно такой способ задания размера, т.к. в этом случае больше шансов на то, что Ваша страничка будет отображаться так, как Вам бы этого хотелось. Также есть относительные размеры шрифтов, они задаются при помощи em (высота шрифта), pt (пункты), % (проценты).
Есть очень полезная табличка соответствия размеров шрифтов:
|
Pt |
Px |
Em |
% |
|
6 |
8 |
0.5 |
50 |
|
7 |
9 |
0.55 |
55 |
|
7.5 |
10 |
0.625 |
62.5 |
|
8 |
11 |
0.7 |
70 |
|
9 |
12 |
0.75 |
75 |
|
10 |
13 |
0.8 |
80 |
|
10.5 |
14 |
0.875 |
87.5 |
|
11 |
15 |
0.95 |
95 |
|
12 |
16 |
1 |
100 |
|
13 |
17 |
1.05 |
105 |
|
13.5 |
18 |
1.125 |
112.5 |
|
14 |
19 |
1.2 |
120 |
|
14.5 |
20 |
1.25 |
125 |
|
15 |
21 |
1.3 |
130 |
|
16 |
22 |
1.4 |
140 |
|
17 |
23 |
1.45 |
145 |
|
18 |
24 |
1.5 |
150 |
|
20 |
26 |
1.6 |
160 |
|
22 |
29 |
1.8 |
180 |
|
24 |
32 |
2 |
200 |
|
26 |
35 |
2.2 |
220 |
|
27 |
36 |
2.25 |
225 |
|
28 |
37 |
2.3 |
230 |
|
29 |
38 |
2.35 |
235 |
|
30 |
40 |
2.45 |
245 |
|
32 |
42 |
2.55 |
255 |
|
34 |
45 |
2.75 |
275 |
|
36 |
48 |
3 |
300 |
Верхний и нижний индексы.
Для установления верхнего и нижнего регистра в HTML есть теги <sub> и <sup>.
<p>основной текст <sub style="color:red">текст нижнего регистра</sub> продолжение основного текста</p>
<p>основной текст <sup style="color:green">текст верхнего регистра</sup> продолжение основного текста</p>
У нас получилось следующее:
основной текст текст нижнего регистра продолжение основного текста
основной текст текст верхнего регистра продолжение основного текста
Есть вопросы? Задайте их через форму комментариев.
Добавить комментарий