Как задать стиль в html
Перейти к содержимому

Как задать стиль в html

  • автор:

Тег в html

В третьем уроке HTML мы рассмотрели все самые распространенные html теги. К каждому из них можно было также подставить параметр style и мы постоянно ссылались на это. Настало время поговорить о том, что именно можно прописать в этом параметре, но для начала расскажу о теге . Вообще для чего он нужен и почему так важен.

Синтаксис тега

head> . style type value">text/css"> . описание стилей . style> . head>

Между

прописываются стили, а точнее свойства CSS (размер шрифта, цвет, фон, отступы, шрифт и т.п.). Это написание равносильно таблице стилей CSS . Кстати описывать стиль можно в любом месте на странице, т.е. необязательно это делать в заголовочных тегах head, но по хорошему тону, стили располагаются именно там.

Новый стиль любого класса описываются в формате точка, далее название класса, а в фигурных скобках описывается стиль. Синтаксис следующий:

.NAME_STYLE 

В таком формате мы создаем глобальный стиль, который можно использовать в любом теге.

div class value">NAME_STYLE">/div> b class value">NAME_STYLE">/b> u class value">NAME_STYLE">/u>

Чтобы сделать стиль только для какого тега нужно указать его перед точкой:

b.style1 

Это означает, что мы можем применять его только для тега

Кстати, чтобы не прописывать всегда класс ( class=»» ) часто употребляемым тегам, мы можем задать стиль по умолчанию любому тегу. Например, чаще всего для популярного тега

задается стиль по умолчанию следующим образом:

.p< font-size: 12px; color: #CCC; font-family: Arial; . >

Чаще всего по умолчанию прописывают стили тегам , , спискам , тегам — .

Рассмотрим практичный пример с

Например . Html код:

html> head> style type value">text/css"> .styletest < color: blue; font-size: 12px; font-family: Arial; > style> head> body> font class css">styletest">Этот текст будет синим, шрифт Arial и размером 12 пикселейfont> body> html>

Преобразуется на странице в следующее:

Этот текст будет синим, шрифт Arial и размером 12 пикселей

Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов , но и для других. Например, для , и т.д. — для всех тегов, которые поддерживают параметр class.

Выше разобранный пример можно сделать по-другому (не используя class):

font style value2">color: blue; font-size: 12px; font-family: Arial"> Этот текст будет синимfont>

Результат будет таким же как и предыдущий пример.

В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style vhtml»>color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class vhtml»>какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.

Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:

head> style type value">text/css"> .cen a < /*стиль по умолчанию для тега в блоке cen*/ стиль для link1; > .cen a.class2 < стиль для link2; > .cen .inblock a < стиль для link3; > .cen .inblock a.class4 < стиль для link4; > style> head> body> div class css">cen"> . a href="">LINK_1 a class css">class_2" href="">LINK_2a> div class css">inblock"> a href="">LINK_3a> a class css">class_4" href="">LINK_4a> div> . div> body>

Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом . Чаще всего такие конструкции встречаются именно для дивов.

Таблица стилей CSS

Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

head> . link rel value">stylesheet" type value">text/css" href value">style.css"/> . head>

В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:

.styletest < color: blue; font-size: 12px; font-family: Arial; >

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

html> head> link rel value">stylesheet" type value">text/css href value">style.css"/> head> body> font class css">styletest">Этот текст будет синим, шрифт Arial и размером 12 пикселейfont> body> html>

Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css , а там где нужно его применить писать class=»имя стиля» .

Плюсы при использовании таблицы стилей

  • Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
  • Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
  • Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.

Использование стилей html через ID

Теперь рассмотрим как можно использовать стили через ID . Для начала, необходимо в таблице стилей (назовем её primerid.css ) написать следующее:

font#yellowcolor:yellow> font#orangecolor:orange> b#nizfont-size:12px;> b#verhfont-size:11px;> .cen b#slashcolor:blue> /*Для вложенных в блок cen*/ p#centertext-align:center> b#mapfont-size:18px; color:navy>

Обратите внимание, что сначала пишется название тега, далее # , далее название ID и потом аргументы стиля.

Для использования ID, код html страницы должен содержать примерно следующее:

html> head> link rel value">stylesheet" type value">text/css href value">primerid.css"/> head> body> font id value">yellow">Желтый текст через IDfont> b id value">verh">Этот текст имеет размер 11 пикселейb> body> html>

Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.

Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.

Аргументы и свойства в style

1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.

Аналогом является: background-color: цвет .

Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.

2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.

3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:

  • repeat-x — повторять фоновое изображение только по горизонтали
  • repeat-y — повторять фоновое изображение только по вертикали
  • no-repeat — не повторять фоновое изображение

4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:

  • dotted — рамка будет покрыта не сплошной линией, а точками
  • dashed — рамка будет покрыта тире, пробел, тире и т.д.
  • double — двойная рамка
  • groove — рифлёная 3D граница

Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов

Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:

  • border-bottom: 1px solid red; — линия будет только снизу
  • border-top: 1px solid red; — линия будет только сверху
  • border-right: 1px solid red; — линия будет только справа
  • border-left: 1px solid red; — линия будет слева

Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border

5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.

6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:

  • Verdana (я пользуюсь этим шрифтом)
  • Times New Roman
  • Arial
  • Courier New
  • Comic Sans MS
  • Georgia
  • Impact

Более подробно про шрифты и их выбор читайте в статьях:

  • Какой выбрать шрифт для сайта
  • Свойство font

7. Свойство font-size: 15px; — задает размер текса, в данном случае 15px. Можете вместо px так же писать другие единицы размерности: em и om .

8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:

  • bold — полужирное
  • bolder — жирное
  • lighter — светлое
  • normal — обычный

Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight

9. Свойство height: 100%; — задает высоту. Можно задавать в %, а можно в пикселях (px). Например: height: 100px .

10. Свойство padding-top: 5px; — отступ сверху. Возможно задать значение auto . Аналогичный тег: margin-top с разницей, что padding — отступ внутри элемента, а margin — от других элементов.

11. Свойство padding-right: 4px; — отступ справа. Возможно задать значение auto . Аналогичный тег: margin-right.

12. Свойство padding-bottom: 5px; — отступ снизу. Возможно задать значение auto . Аналогичный тег: margin-bottom.

13. Свойство padding-left: 4px; — отступ слева. Возможно задать значение auto . Аналогичный тег: margin-left.

14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).

15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:

  • visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины
  • hidden — отображается только область внутри элемента, остальное будет обрезано
  • scroll — всегда добавляются полосы прокрутки
  • auto — полосы прокрутки добавляются только при необходимости

Более подробно читайте в статье: свойство CSS overflow

16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:

  • left — по левому краю
  • right — по правому краю
  • center — по центру
  • justify — выравнивание по левому и правому краю
  • auto — автоматически
  • inherit — наследование значения предка

Более подобно читайте в статье свойство CSS text-align

17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:

  • left — по левому краю
  • right — по правому краю
  • none — отсутствует
  • inherit — наследование значения предка

18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height

19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:

  • normal — обычное значение
  • nowrap — пробелы не учитываются, переносы строк в коде HTML игнорируются
  • pre — текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
  • pre-line — пробелы не учитываются, текст автоматически переносится на следующую строку
  • pre-wrap — сохраняются все пробелы и переносы, автопереход на следующую строку
  • inherit — наследование значения предка

Более подробно читайте в статье: свойство CSS white-space

20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:

  • block — элемент показывается как блочный
  • inline — элемент отображается как встроенный
  • inline-block — создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
  • inline-table — элемент является таблицей
  • list-item — элемент выводится как блочный и добавляется маркер списка
  • none — временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
  • run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста
  • table — элемент является блочной таблицей
  • table-caption — задает заголовок таблицы подробно
  • table-cell — элемент представляет собой ячейку таблицы
  • table-column — назначает элемент колонкой таблицы
  • table-column-group — элемент является группой одной или более колонок таблицы
  • table-footer-group — используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
  • table-header-group — элемент предназначен для хранения одной или нескольких строк ячеек
  • table-row — элемент отображается как строка таблицы
  • table-row-group — создает структурный блок, состоящий из нескольких строк таблицы

Более подробно читайте в статье: свойство CSS display

21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:

  • blink — мигающий текст
  • line-through — перечеркнутый текст
  • overline — верхнее подчеркивание текста
  • underline — нижние подчеркивание текста
  • none — выводит обычный текст
  • inherit — наследуется у предка

Более подробно читайте в статье: свойство CSS text-decoration

22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.

  • capitalize — первый символ каждого слова в предложении будет заглавным
  • lowercase — перевод всего текста в нижний регистр
  • uppercase — перевод всего текста в верхний регистр
  • none — не менять ничего
  • inherit — наследование предка

Более подробно читайте в статье: свойство CSS text-transform

23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing

Так же стоит обратить внимание на возможности стилей для тега , но они будут рассмотрены отдельно здесь: HTML тег а.

Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.

html теґ

HTML тег застосовується для визначення стилю елементів веб-сторінки.

Всередині тега ви пишете CSS, яким вказуєте як HTML елементи повинні відображатися в браузері.

39afc2f8a9cec5c8a1203afb36392c37.png

Дозволено використовувати декілька елементів на сторінці.

Якщо ви не вказали атрибут «scoped» — кожен тег повинен знаходитися в контейнері .

Щоб додати посилання на зовнішню таблицю стилів, використовуйте тег .

Синтаксис

Атрибут Опис атрибута
media Визначає, які стилі застосовувати для конкретного пристрою.
scoped Вказує, що стилі застосовуються тільки до батьківського елементу в якому розміщується елемент « і елементів дочірніх батьківському.
type Атрибут `type` вказує, який синтаксис використовується. Цей атрибут потрібен, щоб вказати браузеру, як правильно інтерпретувати стилі.

Вказує додаткову текстову підказку

Повідомляє браузеру переводити вказаний текст в елементі чи ні.

Контекстне меню для елемента

Дозволяє активувати або сфокусуватись на елементі за допомогою заданого сполучення клавіш.

Визначає один або кілька класів, щоб зв’язати елемент з таблицею стилів (CSS).

Визначає чи можна перетягувати елемент.

Дозволяє редагувати текст в середні тегу.

Вказує напрямок тексту.

Приховує вміст елемента від перегляду.

Задає унікальний ідентифікатор для елемента.

Визначає основну мову вмісту елемента

Вказує браузеру перевіряти чи ні правопис і граматику в тексті елемента.

Задає вбудований (inline) CSS стиль для елемента.

Встановлює порядок отримання фокусу при переході між елементами за допомогою клавіші `Tab`.

Вказує, що робити з перетягувати елементи.

Більше інформації про загальні атрибути за посиланням Загальні атрибути в html.

Подія Опис події
onplay Скрипт викликається коли медіа дані готові почати відтворення.
onafterprint Скрипт виконується тільки після як документ надрукований.
onbeforeprint Скрипт виконується перед тим, як документ надрукований.
onbeforeunload Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload Викликається після того як завантаження елемента завершене.
onmessage Скрипт виконується коли викликане повідомлення.
onoffline Спрацьовує коли браузер починає працювати в автономному режимі
ononline Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow Скрипт виконується коли користувач заходить на сторінку.
onpopstate Скрипт виконується коли змінено історію одного вікна.
onresize Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage Скрипт виконується, коли вміст Web Storage оновлюється.
onunload Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur Скрипт виконується, коли елемент втрачає фокус.
onchange Викликається в той момент, коли значення елемента змінюється.
oncontextmenu Скрипт виконується коли викликається контекстне меню.
onfocus Викликається в той момент, коли елемент отримує фокус.
oninput Скрипт викликається коли користувач вводить дані поле.
oninvalid Скрипт виконується, коли елемент недійсний.
onreset Викликається, коли натискається у формі кнопка типу Reset.
onsearch Викликається, коли користувач щось пише в поле пошуку (для <input type="search">)
onselect Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit Викликається при відправленні форми.
onkeydown Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress Викликається коли корисрувач натиснув на клавішу.
onkeyup Викликається коли користувач відпускає клавішу.
ondblclick Виникає при подвійному клацанні ЛКМ на елементі.
ondrag Періодично викликається при операції перетягування.
ondragend Викликається коли користувач відпускає перелягуваний елемент.
ondragenter Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove Викликається, коли курсор миші переміщається над елементом.
onmouseout Викликається, коли курсор виходить за межі елемента.
onmouseover Виконується, коли курсор наводиться на елемент.
onmouseup Викликається, коли користувач відпускає кнопку миші.
onscroll Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel Викликається, коли користувач прокручує коліщатко миші.
oncopy Викликається, коли користувач копіює вміст елемента.
oncut Викликається, коли користувач вирізає вміст елемента.
onpaste Викликається, коли користувач вставляє вміст в елемент.
onabort Виконується при перериванні якоїсь події.
oncanplay Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange Скрипт виконується коли змінюється кий в <track> елемента
ondurationchange Викликається коли змінюється довжина медіа файлу.
onemptied Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended Викликається коли медіа елемент повністю відтворив свій зміст.
onshow Викликається, коли елемент <menu> буде відображено як контекстне меню.
onloadedmetadata Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata Викликається коли медіа данні завантажено.
onloadstart Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause Викликається коли відтворення медіа даних призупинено.
onplaying Викликається коли розпочато відтворення медіа даних.
onprogress Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange Викликається коли змінюється швидкість відтворення медіа даних.
onseeked Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate Викликається коли змінилася позиція відтворення елемента <audio> або <video>.
onvolumechange Викликається коли змінюється гучність звуку.
onwaiting Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle Викликається, коли користувач відкриває або закриває елемент <details>.
onerror Викликається якщо при завантаженні елемента сталася помилка.
onclick Подія викликається коли користувач клацає ЛКМ по елементу.

Більше інформації про html події за посиланням Атрибути подій в html.

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі

Html размер шрифта код – Как задать шрифт в html – начертание, стиль, размер и многое другое

Свойство font-size позволяет указывать размер текста CSS. Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и ex.

font-size может принимать в качестве значений ключевые слова, единицы измерения или процентное соотношение. Важно отметить, что в рамках применения сокращенного свойства font, font-size является обязательным значением. Если его не указать, то вся строка кода будет игнорироваться.

Значения длины (px, em, rem, ex и т. д.), используемые в свойстве font-size, не могут быть отрицательными.

.element < font-size: small; >>

Свойство, которое устанавливает в CSS размер текста, принимает следующие ключевые слова:

  • xx-small;
  • x-small;
  • small;
  • medium;
  • large;
  • x-large;
  • xx-large.

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

Среди других абсолютных значений можно выделить mm (миллиметры), cm (сантиметры), in (дюймы), pt (пункты) и pc (пики). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.

.element

Например, если свойство font-size у родительского элемента имеет значение small, то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.

.element

Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо.

.element

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

 

Заголовок

Какой-нибудь текст

.container < font-size: 16px; >p < font-size: 1em; >h3

В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

Что касается единиц измерения rem, то здесь font-size всегда зависит от значения корневого элемента (или элемента html).

html < font-size: 16px; >p

В приведенном выше примере rem равен 16px (так как это значение наследуется у html-элемента) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

Эта единица измерения поддерживается следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
Работает Работает Работает Работает 10+ Работает Работает

.element

1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px, а все остальные размеры определяются высотой x определенного шрифта.

Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS.

.element-one < font-size: 100vh; >.element-two < font-size: 100vw; >.

Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

  • 1vw = 1% от ширины окна просмотра;
  • 1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

.element < font-size: 100vh; >>

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh — 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

vw-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:

Эти единицы измерения поддерживаются следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
31+ 7+ 31+ 27+ 9+ 4.4+ 7.1+

В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw, и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.

Единица измерения ch чем-то похожа на ex, и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:

Эта единица измерения поддерживается следующими браузерами:

Chrome Safari Firefox Opera IE Android iOS
27+ Работает 10+ Работает 9+ Работает Работает

Данная публикация представляет собой перевод статьи «Font-size» , подготовленной дружной командой проекта Интернет-технологии.ру

Как изменить шрифт в HTML

Раздел: Сайтостроение / HTML /

Шрифт (нем. Schrift от schreiben «писать») — это (согласно Википедии) графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определённого размера и рисунка.

Понятно, что если бы тексты всех сайтов использовали шрифты по умолчанию, то это было бы очень скучно. Поэтому веб-мастера стараются как-то выделить свой сайт из множества других, и применяют различные шрифты. В современном сайтостроении это обычно делается с помощью CSS, однако во многих случаях можно использовать старый добрый HTML.

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

С помощью тега можно изменять стиль, цвет и размер текста. Основные атрибуты тега :

  • color — устанавливает цвет текста.
  • face — изменяет шрифт в HTML (это как раз то, что нам нужно).
  • size — устанавливает размер букв.

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

Теперь о том, как изменить шрифт текста в HTML. Для этого используется атрибут face . Если хотите, чтобы текст выводился одним определённым шрифтом, то сделать это можно так:

face=»Arial»> Для этого текста установлен шрифт Arial

В этом примере текст будет выводиться шрифтом Arial. То есть в качестве параметра атрибут принимает название шрифта. Если браузер знает такой шрифт и может его отобразить, то текст будет выведен указанным шрифтом.

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

 

Для этого текста установлен шрифт MyFont

Здесь первым в списке указан шрифт MyFont, которого, конечно же, браузер не знает. В таких случаях, если браузеру шрифт неизвестен, он будет выводить текст шрифтом, указанным следующим в списке. В нашем примере текст будет выведен шрифтом Verdana . Если бы и этого шрифта в закромах браузера не оказалось, то он бы вывел текст шрифтом Arial .

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

На рисунке пример отображения текста несколькими шрифтами:

Примеры отображения разных шрифтов в браузере.

Как изменить размер шрифта в HTML

В теге это можно сделать с помощью атрибута

size . Размер может быть абсолютным и относительным.

Абсолютный размер устанавливается путём передачи в атрибут непосредственного значения от 1 до 7. Например, ниже мы устанавливаем для шрифта размер 3:

size=»3″> Размер шрифта 3

Если установить атрибут size менее 1 или более 7, то браузер автоматически ограничит размер шрифта. Пример вы можете увидеть на рисунке ниже — несмотря на то, что мы попытались установить размер 8, браузер отобразил шрифт таким же размером, как и размер 7.

Примеры отображения шрифтов разных размеров в браузере.

Относительный размер устанавливается путём передачи в атрибут числа со знаком + (плюс). Например, вот такой HTML-код:

 

Размер шрифта 3

size="+2"> Размер шрифта 5 (3 + 2)

Размер шрифта 5

Здесь мы сначала установили шрифт размером 3. Затем увеличили этот шрифт на 2 (то есть сделали размер шрифта равным 5). Ну а далее, чтобы убедиться, что это всё правильно работает, снова установили абсолютный размер шрифта. На рисунке ниже видно, что это действительно работает так, как и задумывалось:

Относительный размер удобно использовать тогда, когда вы почему-то не уверены, какой размер был установлен ранее, и хотите выделить какой-то участок текста шрифтом большего размера. Используя относительный размер в таких случаях вы можете быть уверены, что выделенный шрифт будет больше окружающего текста (разумеется, надо помнить, что размеры шрифта могут быть от 1 до 7).

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

Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.

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

Как задать шрифт в html – начертание, стиль, размер и многое другое

Как задать шрифт в html

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

Как задавали шрифт раньше

Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.

Задание шрифта в html правильным образом

Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:

Font-style. Определяет начертание текста. Принимает такие значения:

Как задать шрифт в html

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Oblique – наклонный текст. Он немного отличается от курсива, буквы склоняются немного вправо.

Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:

Normal – обычное поведение.

Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.

Как задать шрифт в html

Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:

Normal – обычный текст

Bold – текст с жирным начертанием

Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.

Lighter – буквы получат меньше жирности, по сравнению с родителем.

Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.

К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.

Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту статью, где все описано более подробно.

Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:

Serif – с засечками

Sans-serif – без засечек, рекомендуется применять для основного текста.

Monospace – моноширинные, ширина каждой буквы одинакова, соответственно.

Как задать шрифт в html

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Fantasy – необычные, декоративные.

Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.

Сокращенная запись

Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:

Font: font-style | font-variant | font-weight | font-size | font-family;

Font: font-style | font-variant | font-weight | font-size | font-family;

Как задать шрифт в html

Как задать шрифт в html

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

Как задать шрифт в html разным элементам

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

font-family: Verdana, sans-serif;

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

font: normal small-caps bold 12px Arial;

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

Элемент с идентификатором logo, находящийся в блоке с классом header, получает шрифт по умолчанию из семейства декоративных.

Таким образом, вам достаточно знать различные css-селекторы и вы сможете дотянуться до любого элемента на веб-странице и оформить для него свои стили. Не переусердствуйте, правила хорошего дизайна не допускают, чтобы на одном сайте использовалось не больше трех шрифтов. Лучше придерживаться этого принципа.

Итак, нам удалось рассмотреть все свойства для шрифтов, какие есть в css. Конечно, это не все эффекты, которые можно применить именно к тексту. Его можно повернуть, добавить ему тень или даже несколько теней, подчеркнуть, изменить цвет и т.д. Но все эти замечательные возможности реализуются другими свойствами, без приставки font.

Например, цвет можно определить с помощью свойства color. Об этом написана отдельная статья. Если вы до сегодняшнего дня думали, что в css можно выбрать только один из сотни цветов, то вы сильно заблуждались. Предлагаю вам прочитать статью и убедиться в том, что можно выбирать из миллионов оттенков.

Еще информация по работе с текстом вы можете найти в нашем премиум-разделе, где освещаются еще некоторые моменты.

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

Как задать шрифт в html

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как задать шрифт в html

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

font-size | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
Краткая информация
Версии CSS
Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

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

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML

CSS xx-small x-small small medium large x-large xx-large
HTML 1 2 3 4 5 6 7

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit Наследует значение родителя.

    font-size   

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель
Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

| Справочник HTML

Элемент (от англ. «font» ‒ «шрифт») используется для задания цвета, типа, размера шрифта текста.

Внимание: Данный элемент устарел, взамен используйте стили CSS.

Синтаксис

Закрывающий тег

Атрибуты

colorУстарел в HTML5 Устанавливает цвет текста с использованием либо названия цвета, либо цвета, указанного в шестнадцатеричном формате #RRGGBB. faceУстарел в HTML5 Этот атрибут содержит список разделенных запятыми одного или нескольких имен шрифтов. Текст документа по умолчанию отображается для первого типа шрифта, поддерживаемого браузером клиента. Если в локальной системе не указан шрифт, браузер обычно по умолчанию использует шрифт пропорциональной или фиксированной ширины для этой системы. sizeУстарел в HTML5 Задаёт размер шрифта в условных единицах.

Для этого элемента доступны глобальные атрибуты и события.

Различия между HTML 4.01 и HTML5

Тег не поддерживается в HTML5.

Пример использования:

Элемент

Определяем цвет, шрифт и гарнитуру текста:

Пример HTML:

Попробуй сам

Кое какой текст! Кое какой текст! Кое какой текст!

Спецификации

Спецификация Статус
HTML 4.01 (W3C) Рекомендация
Поддержка браузерами
Элемент
3+ 1+ 4+ 1+ 1+ 1+
Элемент
1+ 1+ 6+ 1+

Определение размеров шрифтов в CSS

В этой статье мы рассмотрим различные способы, с помощью которых вы можете установить размер шрифта HTML.

Единицы измерения можно разделить на две категории: абсолютные и относительные.

Абсолютные единицы являются фиксированными и относятся к каким-либо физическим единицам измерения. После того, как они были заданы, размер не меняется.

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

Вот краткий обзор некоторых единиц измерения:

Я подробнее рассмотрю те единицы измерения, которые являются наиболее значимыми — px, pt, %, em, rem и vw.

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

В HTML-документе, где вы еще не устанавливали никаких размеров шрифтов, существуют настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для разделов html и body — 100%. Что соответствует следующему:

100% = 1em = 1rem = 16px = 12pt

Это означает, что, если вы установите размер шрифта для одного блока в 100%, а для другого — 16px, на экране они будут выводиться с одним и тем же размером шрифта:

Разницу между абсолютными и относительными единицами измерения проще понять на примере, когда мы хотим размер шрифта в HTML задать для конкретного элемента. Если мы зададим html < font-size: 200% >, это повлияет только на блоки с размером шрифта, заданным в относительных единицах:

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

Единицы измерения em (и %) работают путем вычисления текущего размера шрифта в зависимости от размера шрифта родительского элемента.

html < font-size: 100% /* =16px */ >body < font-size: 2em; /* =32px */ >p < font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */ >

Поскольку р является дочерним элементом body, который в свою очередь является дочерним html — параграфы, font-size которых задан с помощью em и процентов, будут иметь два разных размера шрифта HTML:

При использовании Em вы должны принимать во внимание размер шрифта всех родительских элементов. В противном случае это может привести к полной неразберихе.

Решением данной проблемы является rem. Он рассчитывается только на основе размера шрифта элемента html, а не родительского элемента.

html < font-size: 100% /* =16px */ >body < font-size: 2rem; /* =32px */ >p < font-size: 1rem; /* =16px */ >

Использование rem позволяет сохранить масштабируемость em без влияния иерархии элементов.

vw — это новая единица измерения CSS3, которая использует для изменения размера шрифта в HTML ширину окна просмотра. Это позволяет задавать размеры шрифтов в плавающих адаптивных макетах.

Это отличная единица измерения для адаптивного дизайна, но я не являюсь ее поклонником. Она не дает мне достаточного контроля над размером шрифта, который всегда оказывается слишком большим или слишком маленьким.

До этого исследования я использовала для установки размеров шрифта пиксели. Потому что в настоящее время большинство браузеров позволяют пользователю увеличить масштаб, если текст кажется ему слишком маленьким.

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

Поэтому мое решение заключается в использовании в html коде размера шрифта rem (и пикселей в качестве запасного варианта):

html < font-size: 62.5%; /* для простоты вычислений в качестве базового размера шрифта задается 10 пикселей */ >body < font-size: 16px; font-size: 1.6rem; /* устанавливаем размеры шрифтов по умолчанию, чтобы быть уверенными, что размера в 10 пикселей у нас нигде не будет */ >h2

Это позволяет мне изменять размеры шрифтов с помощью следующего кода:

@media screen and (min-width: 1280px) < html < font-size: 100%; >>

Этот метод использует пиксели в качестве запасного варианта, поскольку rem не поддерживается в IE8 и ниже. Из-за этого, когда я изменяю размер шрифта HTML для обеспечения масштабируемости, это не затрагивает резервный вариант. Но это не проблема, потому что возможность масштабирования для сверх больших экранов, является необязательной.

Данная публикация представляет собой перевод статьи «CSS Font Sizing» , подготовленной дружной командой проекта Интернет-технологии.ру

CSS: Стиль и размер шрифта

Стиль шрифта

Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

  • normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
  • italic — курсивное начертание
  • oblique — наклонное начертание
    Название документа p.exnormal < font-style: normal; >p.exitalic < font-style: italic; >p.exoblique 

Абзац со значением normal.

Абзац со значением italic.

Абзац со значением oblique.

Попробовать »

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

Размер шрифта

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

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body

EM

Единица измерения em позволяет изменить размер шрифта относительно размера шрифта в родительском элементе. Посколько по умолчанию размер шрифта в браузерах составляет 16px, то можно использовать правила, аналогичные тем, которые используются для значений в процентах.

body < font-size: 14px; >h3

В примере мы задали элементу размер шрифта 14px, а для всех элементов — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков будет составлять 1,2 размера шрифта элемента , что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

    Название документа p.class1 < font-size: 120%; >p.class2 < font-size: 18px; >p.class3 

Изменение размера с помощью процентов.

Изменение размера с помощью пикселей.

Изменение размера с помощью ключевого слова x-small.

Как задать шрифт в html

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

Как задавали шрифт раньше

Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.

Задание шрифта в html правильным образом

Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:

Font-style. Определяет начертание текста. Принимает такие значения:

Oblique – наклонный текст. Он немного отличается от курсива, буквы склоняются немного вправо.

Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:

Normal – обычное поведение.

Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.

Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:

Normal – обычный текст

Bold – текст с жирным начертанием

Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.

Lighter – буквы получат меньше жирности, по сравнению с родителем.

Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.

К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.

Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту статью, где все описано более подробно.

Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:

Serif – с засечками

Sans-serif – без засечек, рекомендуется применять для основного текста.

Monospace – моноширинные, ширина каждой буквы одинакова, соответственно.

Fantasy – необычные, декоративные.

Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.

Сокращенная запись

Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *