Теги и атрибуты при роботе со шрифтами html
Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html
.
Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.
Рассмотрим теги, которые используются для работы со шрифтами в html
и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
- color
– устанавливает цвет текста; - size
– размер шрифта в условных единицах.
Поддерживается положительное значение атрибута от 1 до 7.
face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.
Форматируется только тот текст, который расположен между частями парного тега font.
Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
Также в html
существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
- — задает в html
жирный шрифт. Тег по действию аналогичный предыдущему; - — размер больше установленного по умолчанию;
- — меньший размер шрифта;
- — наклонный текст (курсив
). Аналогичный ему тег ; — зачеркнутый;- — отображение текста только в нижнем регистре;
- — в верхнем регистре.
Обычный текст
Жирный текст
Жирный текст
Больше обычного
Меньше обычного
Курсив
Курсив
Зачеркнутый
Возможности атрибута style
Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html
. Одним из них является применение универсального атрибута style
. С помощью значений его свойств можно задавать стиль отображения шрифтов:
1) font-family
– свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя
.
Синтаксис написания:
font-family: имя шрифта ]
2) font-size
– задается размер от 1 до 7. Это один из основных способов того, как в html
можно увеличить шрифт.
Синтаксис написания:
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Размер шрифта можно также задать:
- В пикселях;
- В абсолютном значении (xx-small, x-small, small, medium, large
); - В процентах;
- В пунктах (pt
).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style
– устанавливает стиль написания шрифта. Синтаксис:
font-style: normal | italic | oblique | inherit
Значения:
- normal
–нормальное написание; - italic
– курсив; - oblique
– шрифт с наклоном вправо; - inherit
– наследует написание родительского элемента.
Пример того, как поменять шрифт в html
с помощью этого свойства:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant
– переводит все прописные буквы в заглавные. Синтаксис:
font-variant: normal | small-caps | inherit
Пример того, как изменить шрифт в html
этим свойством:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight
– позволяет установить толщину написание текста (насыщенность
). Синтаксис:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значения:
- bold
– устанавливает полужирный шрифт html; - bolder
– жирнее относительно normal; - lighter
–менее насыщенное относительно normal; - normal
– нормальное написание; - 100-900
– задается толщина шрифта в числовом эквиваленте.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Свойство font и цвет шрифта html
Font
является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font
:
font: font-size font-family | inherit
Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
- caption
– для кнопок; - icon
– для иконок; - menu
– меню; - message-box
–для диалоговых окон; - small-caption
– для небольших элементов управления; - status-bar
– шрифт строки состояния.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold «Times New Roman», Times, serif
Для того чтобы задать цвет шрифта в html
можно использовать свойство color
. Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb
. А также в виде шестнадцатеричного кода.
Что делает веб-дизайнер?
«Веб-дизайнер» – самый распространенный термин для людей, создающих сайты. Тем не менее, это обычно заменяет очень широкий набор навыков. Итак, чтобы показать разницу между веб-дизайнером и веб-разработчиком, давайте почистим лук и посмотрим, что на самом деле делают веб-дизайнеры.
Работа с графикой и визуалами
Веб-дизайнеры обычно создают визуальный дизайн веб-сайта и создают его общий вид. Результатом являются шаблоны для веб-сайтов, которые впоследствии могут быть применены на практике.
Чтобы выполнить эту работу, веб-дизайнеры обычно сначала должны сесть с клиентами, чтобы понять их потребности, а затем придумать концепцию, которая соответствует им. При этом им также необходимо учитывать существующий брендинг , чтобы сохранить единый опыт по всем каналам маркетинга.
Когда у них есть концепция, веб-дизайнеры начинают создавать визуальные эффекты. Обычно их инструментами выбора являются программы для графического дизайна, такие как Photoshop, Illustrator и InDesign. С их помощью дизайнеры собирают каркасы, а также необходимые ресурсы, такие как графика, кнопки, изображения и тому подобное.
Чтобы сделать это правильно, им нужно понимать такие вещи, как цвета и их совместную работу, контраст, формы, текстуры, типографику и многое другое. Помимо этого, вам также нужно определенное количество творчества и воображения, а также другие вещи, которые обычно считаются деятельностью правого полушария мозга.
Руководство по взаимодействию с пользователем
Однако веб-дизайн – это не просто искусство, а ремесло. Он должен не только хорошо выглядеть, но и быть функциональным и достигать своей цели.
Например, большинство веб-сайтов нацелены на то, чтобы побудить посетителей совершить какое-либо действие, например совершить покупку, подписаться на услугу, перейти к списку адресов электронной почты или сделать что-то подобное. В дополнение к этому, они также должны быть простыми в навигации и интуитивно понятными, чтобы найти дорогу.
По этой причине веб-дизайнеры также должны понимать психологию пользователей и быть в курсе последних разработок в области дизайна интерфейсов. В противном случае конечный результат будет не только сложным в использовании, но и может выглядеть устаревшим и непрофессиональным.
Псевдоэлементы и псевдоклассы
С помощью псевдоэлемента CSS можно легко создать поднятую букву, добавив ::first-letter к элементу абзаца. Используйте :first-letter (с одним двоеточием) для устаревших браузеров:
p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;}
p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}
.initialb {margin-right:-0.1em;}
.initialn {margin-right:-0.15em;}
HTML-код, который содержит классы CSS, учитывающие кернинг букв N и B, будет выглядеть следующим образом…
An inital letter, with the first letter being a capital letter.
With a line break, the next line has no initial cap.
notice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?
But with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph? Well, you could
But, do you want it to look that way, and does it absolutely have to look that way?
В букву преобразовывается первая заглавная буква абзаца.
Первая буква после разрыва строки не будет преобразовываться в заглавную.
оОбратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.6em.
ООднако и после принудительного разрыва строки, ив начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев? Что ж, вы можете
Но необходимо ли это?
Даже с учетом преимуществ, которые предоставляют псевдоэлементы, нам пришлось добавить много кода, чтобы определить отдельные классы для обработки проблем, связанных с кернингом и отступами. Но этот метод преобразует первую букву каждого нового абзаца в CSS заглавную букву. Для кого-то он может не подойти, потому что не нужно преобразовать первую букву каждого абзаца.
HTML буквы и CSS расстояние между ними
Пример форматирования букв:
Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя
Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя
Описание атрибутов и значений:
CSS код style=»letter-spacing:2px» – определяет CSS расстояние между буквами.
Подобные примеры форматирования ищите в меню слева
Спасибо за ваше внимание
Дата публикации: Июль 2011 | Обновление: Ноябрь 2018
HTML и CSS коды Заглавные HTML буквы и CSS расстояние
http://www.internet-technologies.ru/articles/sozdanie-zaglavnyh-bukv-s-pomoschyu-css.html
http://impuls-web.ru/kak-sdelat-v-css-zaglavnye-bukvy/
http://ab-w.net/HTML-guide/HTML-bukvy-zaglavnye-CSS-rasstojanie-mezhdu-nimi.php
Font-family — задаем имя шрифта в CSS
Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:
font-family: <список имен шрифтов разделенных запятыми>
Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:
p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }
В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.
Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:
- serif — шрифты с засечками;
- sans-serif -шрифты без засечек;
- cursive — шрифты, имитирующие рукописный текст;
- fantasy — декоративные шрифты;
- monospace — моноширинные шрифты.
Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-rendering@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-modemask-originmask-positionmask-repeatmask-sizemax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-index
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity
Font-size — задаем размер шрифта с помощью CSS
Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:
font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit
Давайте теперь рассмотрим подробнее способы применения данного свойства.
Размер шрифта можно задавать в абсолютных и относительных величинах. Для этого используются единицы измерения, поддерживаемые CSS. Чтобы задать размер шрифта жестко, используются следующие единицы измерения:
- px — пиксели;
- pt — пункты;
- in — дюймы;
- cm — сантиметры;
- mm — миллиметры;
- pc — пики.
Обозначение единицы измерения указывают после самого значения. Например:
p { font-size: 10px; }
strong { font-size: 12pt; }
При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.
Для задания относительных размеров шрифта используются следующие обозначения:
- em — размер буквы «m» текущего шрифта;
- ex — размер буквы «x» текущего шрифта;
- % — проценты от размера шрифта родительского элемента.
Например:
h1 { font-size: 3em; }
em { font-size: 150%; }
В этом примере заголовок h1 будет нарисован шрифтом в три раза большего размера, чем тот, который использовался бы по умолчанию. А элементы em в полтора раза большего размера.
Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:
Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.
оглавление
- Относительный шрифт: Относительное окно просмотра: Относительный размер родительского элемента:
1. Абсолютная единица длины
Они прикреплены друг к другу и не изменятся из-за изменения размеров других элементов.
| единица измерения | имя | Эквивалентно |
|---|---|---|
| px | Пикселей | Типичная единица измерения, многие другие единицы длины напрямую отображаются на пиксели. |
| cm | Сантиметры | 1cm = 10mm = 96px/2.54 = 37.8px |
| mm | Миллиметры | 1mm = 0.1cm = 3.78px |
| Q | 1/4 мм (четверть миллиметра) | 1q = 1/4mm = 0.945px |
| in | Дюймы (дюймы) | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 12pt = 1/6in = 1/6*96px = 16px |
| pt | Точки | 1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px |
px (пиксель) пиксель
px означает «абсолютный размер» (не совсем абсолютный), который фактически является пикселем, определенным в CSS (этот пиксель отличается от физического пикселя устройства).
Использование px для установки размера шрифта, ширины и высоты элемента относительно стабильно и точно. В IE он не может адаптироваться к изменениям, произведенным при увеличении масштаба браузера (не имеет большого значения, игнорируйте это).
2. Единица относительной длины
Укажите длину относительно другой длины. Есть:
2.1 Относительные единицы длины, относящиеся к шрифтам:
em
- em — относительная единица длины шрифта.
- Если используется для самого атрибута font-size, это размер шрифта относительно родительского элемента.
- Если используется для других атрибутов (ширина, высота), он зависит от размера шрифта самого элемента.
- Больше используется за рубежом;заметка: Размер шрифта по умолчанию любого браузера составляет 16 пикселей; Поэтому => Для удобства преобразования в селекторе тела можно объявить: Таким образом,;Недостатки:Он наследует размер шрифта родительского элемента. Каждый раз, когда размер шрифта родительского элемента изменяется, его необходимо пересчитывать.
rem
Rem — это новая единица относительной длины шрифта в CSS3, которая относится только к корневому элементу, а именно к размеру шрифта HTML-элементов.
- Единицы Rem не поддерживаются в аббревиатурах шрифтов и псевдоэлементах в IE9 / 10.
- IE9 / 10 поддерживается частично, и все основные версии IE11 +, Firefox, Chrome, Safari и Opera поддерживаются. Для обеспечения совместимости с браузерами, которые не поддерживают rem, нам нужно написать соответствующее значение px перед rem, чтобы браузеры, которые не поддерживают, могли быть элегантными. Понижение версии.
ex
- ex относится к высоте строчной буквы x в используемом шрифте. Но высота у разных шрифтов x может быть разной. Фактически, многие браузеры принимают половину значения em как значение ex.
- ex часто используется для точной настройки на практике
ch
- ch похож на ex и определяется как ширина числа 0. Если ширина числа 0 не может быть определена, возьмите половину значения em в качестве значения ch
- ch в основном используется для набора шрифтов Брайля на практике
- Совместимость: IE8 не поддерживает
2.2 Единицы относительной длины, относящиеся к области просмотра:
: Высота области просмотра, по умолчанию — 1% от высоты области просмотра. : Ширина области просмотра, по умолчанию 1% от ширины области просмотра. : 1/100 меньшего значения высоты и ширины области просмотра макета. : 1/100 большего значения высоты и ширины области просмотра макета.
- «Область просмотра» в модуле области просмотра на стороне рабочего стола, несомненно, относится к видимой области браузера;
- Но на мобильном терминале это относится к области просмотра макета (область просмотра макета).
2.3 Относительно ширины и высоты или размера шрифта содержащего блока
Процент — это относительная единица длины относительно высоты и ширины содержащего блока или размера шрифта. Концепцию содержащего блока нельзя просто понимать как родительский элемент. В случае статического и относительного позиционирования содержащий блок обычно является его родительским элементом. Если это абсолютно позиционированный элемент, содержащий блок должен быть ближайшим элементом-предком, положение которого нестатично. Если это элемент с фиксированной позицией, содержащий его блок — это область просмотра.
Как сделать в CSS заглавные буквы?
Чтобы сделать в CSS заглавные буквы можно воспользоваться свойства text-transform, используя одно из его значений uppercase. Например:
Делаем блок с заголовком в html:
Задаём в CSS заглавные буквы
Задаем свойство text-transform: uppercase; для тега h3:
Задаём в CSS заглавные буквы
Кроме uppercase данное CSS свойство может принимать и другие значения: capitalize -каждое новое слово будет идти с заглавной буквы lowercase — все буквы становятся строчными (маленькими) none — значение по умолчанию inherit — значение наследуется
Конечно же, вы можете применить данное свойство и для уже существующих элементов на сайте. Например, вы решили изменить отображение заголовков статей, но перебирать все статьи на сайте и исправлять все вручную займет много времени.
В этом случае намного удобнее будет преобразовать уже существующий текст с помощью свойства CSS в заглавные буквы.
Для этого всего лишь нужно вычислить класс, который отвечает за отображения заголовка статьи, и задать ему нужное свойство.
Выравнивание текста с помощью CSS
Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).
Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:
Доступные значения этого правила определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.
По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.
Примеры использования свойства:
Следующее свойство CSS text-ident задает отступ для красной строки, например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:
Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:
Далее рассмотрим вертикальное выравнивание — свойство vertical-align. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:
Рассмотрим каждое значение подробнее:
- baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
- sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
- super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
- top — выравнивание фрагмента текста по верхнему краю родительского элемента;
- text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
- middle — выравнивание центра фрагмента текста по центру родительского элемента;
- bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
- text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;
На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:
Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.
Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.
Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:
- top — для выравнивания содержимого по верхней границе ячейки;
- bottom — для выравнивания содержимого по нижней границе ячейки;
- middle — для выравнивания по центру ячейки (используется по умолчанию).
Для достижения нужного результата, обычно приходится экспериментировать с различными значениями свойства стиля vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.
