vertical-align¶
Свойство vertical-align выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис¶
Значения¶
В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height , при этом 0% аналогично значению baseline .
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения:
baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по её верхнему краю.
Как дать тексту верхнее положение в html
CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице
Основным свойством, которые управляют позиционированием в CSS, является свойство position . Это свойство может принимать одно из следующих значений:
static : стандартное позиционирование элемента, значение по умолчанию
absolute : элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static
relative : элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов
fixed : элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке
Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).
Абсолютное позиционирование
Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее свойство CSS: left (отступ от края слева), right (отступ от края справа), top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения — отступ от верхнего края top и отступ от левого края left.
Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на 50 снизу.
При этом не столь важно, что после этого элемента div идут какие-то другие элементы. Данный блок div в любом случае будет позиционироваться относительно границ области просмотра браузера.
Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение свойства position не равно static , то элемент позиционируется относительно границ контейнера:
Относительное позиционирование
Относительное позиционирование также задается с помощью значения relative . Для указания конкретной позиции, на которую сдвигается элемент, применяются те же свойства top, left, right, bottom:
Свойство z-index
По умолчанию при совпадении у двух элементов границ, поверх другого отображается тот элемент, который определен в разметке html последним. Однако свойство z-index позволяет изменить порядок следования элементов при их наложении. В качестве значения свойство принимает число. Элементы с большим значением этого свойства будут отображаться поверх элементов с меньшим значением z-index.
Теперь добавим к стилю блока redBlock новое правило:
Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически равен нулю, то для redBlock мы можем установить у свойства z-index любое значение больше нуля.
И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале:
Свойства текста.
В этой главе пойдет речь о том, что можно сделать с текстом, применяя к элементам HTML содержащие в себе некий текст те или иные свойства CSS.
Выравнивание текста.
Если Вы помните, из курса HTML, для того что бы выровнять текст, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align (выравнивание) и одно из его возможных значений center (по центру)
Запись имела такой вид:
<p align=»center»>текст по центру</p>
В CSS данную задачу берет на себя свойство text-align , которое выравнивает текстовое содержание относительно элемента родителя (например, блока div ) или же окна браузера.
- left — Выровнять текст по левому краю элемента (по умолчанию).
- right — Выровнять текст по правому краю.
- center — Выровнять текст по центру.
- justify — Выровнять текст по обоим краям.
Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:
<p style=»text-align: center»>текст по центру </p>
— это в этом случае если мы, с помощью атрибута style , внедряем CSS непосредственно в HTML тег.
А вот в примере ниже используется тег <style> в заголовке документа:
Оформление текста.
Свойство text-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста.
- blink — Текст будет мигать.
- line-through — Делает текст перечеркнутым.
- overline — Надчёркивание текста.
- underline — Подчеркивание текста.
- none — Текст без оформления.
<a href=»index.html» style=»text-decoration:none»>Ссылка без подчёркивания</a>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Оформление текста</title>
<link rel=»stylesheet» href=»mystyle.css» type=»text/css»>
</head>
<body>
<h3>Меню:</h3>
<a href=»index.html»>Всё о слонах.</a><br>
<a href=»elephant.html»>Купить слона.</a>
<hr>
<h1>Всё о слонах</h1>
<p> Слон — самое крупное … … …</p>
<p>Слоны являются … … …</p>
</body>
</html>
Обратите внимание на внешний файл CSS в нем мы «декорировали» ссылку элемент <a> , причем делали это два раза первый раз a сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover
Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться «живым».
Впрочем, мы немного забежали вперёд.. о псевдоклассах речь пойдёт в отдельной главе.
Отступ первой строки.
Свойство text-indent — задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает «красную строку».
Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.
В примере ниже расстояние отступа от левого края задаётся в пикселях (px) :
Трансформация текста
Своийство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.
- none — Текст отображается без каких-либо изменений.(по умолчанию)
- capitalize — Каждое слово в тексте отображается с заглавного символа.
- lowercase — Все символы преобразуются в нижний регистр.
- uppercase — Все символы преобразуются в верхний регистр.
Вертикальное выравнивание
Вертикальное выравнивание текста в строке устанавливает свойство vertical-align
Возможные значения свойства vertical-align:
- baseline — Выравнивает базовую линию элемента по базовой линии родителя.
- bottom — Выравнивает элемент по нижней части строки.
- middle — Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
- sub — Нижний индекс (размер шрифта не меняется).
- super — Верхний индекс (размер шрифта не меняется).
- text-bottom — Нижняя граница элемента выравнивается по нижнему краю строки.
- text-top — Верхняя граница элемента выравнивается по верхнему краю строки.
- top — Выравнивает элемент по верхней части строки.
Базовая линия — это линия, на которой располагаются «сидят» символы в текстовой строке, Например буква «А» сидит прямо на этой линии, а вот строчная буква «у» сидит на ней же, но свесив ноги..
Взгляните на рисунок с разметкой строки:
Так же вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения.
Пробелы и перенос строки.
Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами.
Свойство white-space имитирует работу тега <pre> , определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.
Может иметь следующие значения:
- normal — текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
- nowrap — запрещает автоматический перенос строки.
- pre — показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<p style >
Слон.
Дали туфельки слону.
Взял он туфельку одну
И сказал: — Нужны пошире,
И не две, а все четыре!
С. Я. Маршак.
</p>
<hr>
<p style >
Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали?
</p>
</body>
</html>
При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>
Расстояние между словами.
Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.
- normal — Нормальное расстояние. (по умолчанию)
- px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Межсимвольное расстояние.
А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:
- normal — Нормальное расстояние. (по умолчанию)
- px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Интерлиньяж
Интерлиньяж — это расстояние между строками текста.
Расстояние между строками текста можно задать используя свойство line-height , сделать это можно следующими способами:
- normal — Норма (по умолчанию).
- % — Проценты. за сто процентов берется высота шрифта
- 0.5 — Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 — двойному.
- px — Пиксели и любые другие единицы измерения, принятые в CSS.
Полезные советы:
При декорировании текста, свойство — text-decoration , будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.
А Вам точно нужно использовать значение nowrap свойства white-space , запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..
Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.
CSS уроки, 3 часть: CSS шрифт, текст, списки
С помощью команд CSS вы можете контролировать различные аспекты текстового представления. Давайте сначала посмотрим, как можно указать тип, размер и стиль шрифта (что представляют собой шрифты, объясняется в статье «Шрифты на сайт – руководство»).
Тип шрифта
Тип шрифта устанавливается с помощью font-family: value, с конкретным названием шрифта (например, Verdana) или одним из следующих слов – категориями шрифта:
- serif – шрифты с засечками, например Times New Roman.
- sans-serif – шрифты без засечек, например Arial.
- monospace – шрифты, в которых все символы занимают одинаковую ширину, например Courier New.
Когда вы выбираете serif, sans-serif или monospace, браузер автоматически выбирает определенный тип шрифта из указанной категории.
У разных пользователей установлены разные шрифты. По этой причине вы не можете быть уверены, что указанный вами шрифт будет использоваться всегда. Часто вместо указания одного шрифта указывается несколько опций, например,
Если у пользователя не установлен первый указанный шрифт, браузер использует второй шрифт, если он не установлен, третий и т. д. Если ни один из указанных типов шрифтов не установлен, браузер будет использовать любой из шрифтов по умолчанию, которые являются универсальными и установлены почти на всех компьютерах (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana).
Размер шрифта
Размер шрифта (размер текста) устанавливается с помощью font-size, например:
В качестве значения для размера шрифта можно использовать как цифры, так и слова или ставки, отражающиеся относительно элемента-родителя. В порядке увеличения размера шрифта слова, которые могут быть использованы, являются:
xx-small, x-small, small, medium, large, x-large, xx-large
В качестве основы берется размер родительского элемента, приравненный к среднему. Относительный размер шрифта также может быть указан с словами larger (больше) или smaller (меньше).
Толщина шрифта
Толщина шрифта указывается с помощью font-weight, а для значений можно использовать:
- числа от 100 до 900, кратные 100 (100, 200, 300 и т.д.). 100 соответствует самой маленькой толщине шрифта, а 900 – самой большой;
- слова bold (соответствует числу 700), normal (эквивалентно 400) – значение по умолчанию, bolder и lighter – соответственно большей и меньшей толщины шрифта относительно элемента-родителя.
Стиль шрифта
С CSS можно задать определенный стиль шрифта – например, шрифт может быть курсивный. Этот стиль шрифта указывается с помощью font-style: italic:
На месте italic можно использовать normal (обычный текст) или oblique – шрифты, которые поддерживают наклонные символы. На практике, italic и oblique выглядят одинаково.
Описанные здесь свойства шрифта можно задать сокращенно с помощью свойства font и списка желаемых параметров, разделенных пробелами друг с другом. Вот и пример:
Перечисление параметров идет в следующем порядке: стиль, толщина, размер, вид шрифта.
CSS – текст
Помимо шрифта, CSS-команды могут настраивать многие другие свойства текста.
Межстрочный интервал
Вы можете отрегулировать межстрочный интервал, установив высоту строки и размер шрифта. Разница между этими двумя значениями будет междустрочным интервалом. Вот пример:
Это увеличит размер строки на 50%, и, поскольку размер текста не изменится, межстрочный интервал будет увеличен. Числа, относительные единицы (такие как em) и проценты могут использоваться в качестве значения высоты строки.
Межбуквенный и межстрочный интервал
Межбуквенный интервал задается letter-spacing, а межсловный интервал – word-spacing:
В приведенном выше примере указывается расстояние между буквами заголовков h1 – 10 пикселей и расстояние между словами для заголовков h2 – 2ex.
Дополнительные текстовые эффекты
Текст может быть изменен с помощью text-decoration и одного из следующих значений:
- underline: обыкновенное подчеркивание текста;
- overline: подчеркивание над текстом;
- line-through: линия проходит через середину текста;
- none: убирает подчеркивание текста, если указано;
- blink: мигающий текст (поддерживается только Firefox и Opera).
Отступ для первой строки абзаца
Для отступа текста используется text-indent и требуемое значение. Например:
будет отступать одну букву для первой строки каждого абзаца.
Горизонтальное выравнивание
Положение текста может быть скорректировано с помощью text-align, и одним из значений:
- left: левое выравнивание – значение по умолчанию
- right: выровнять текст по правому краю
- center: центрирование
- justify: двустороннее выравнивание
Вертикальное выравнивание
Это свойство используется, в основном, чтобы определить взаимное расположение текста и графики. Используется vertical-align и одно из следующих значений:
- sub: Как и в HTML-элементе sub, буквы записываются в виде нижнего индекса
- sup: текст отображается в виде верхнего индекса
- baseline: нижний край изображения расположен на уровне базовой линии
- middle: середина изображения совпадает с серединой текстовой строки
- text-top: верхний край элемента совпадает с верхним краем строки
- text-bottom: нижний край элемента находится на одном уровне с нижним краем линии
- top: верхний край элемента совпадает с верхним краем строки, размер которого изменяется, чтобы включить элемент
- bottom: аналогично top, но выравнивание по нижней линии.
Цвет текста
С помощью color вы можете указать желаемый Вами цвет текста. Для задания конкретного цвета текста можно использовать допустимые названия цветов, RGB или HEX значений:
Более подробно о цветах вы можете прочитать в статье HTML цвета.
Преобразование в строчные или прописные буквы
Вы можете указать использование строчных или прописных букв с помощью text-transform и одного из следующих слов:
- capitalize: первая буква каждого слова будет заглавной. Часто используемый стиль в заголовках.
- uppercase: все буквы становятся заглавными.
- lowercase: все буквы превращаются в маленькие.
- none: не меняется вид буквы маленькие-большие
Регулировка пустого пространства
С помощью white-space вы можете изменить способ, которым браузер показывает пустые поля:
- normal: по умолчанию, браузер сокращает ряд пробелов и строк до одного пробела / строки
- pre: сохраняет пустые пробелы и строки
- nowrap: серия пробелов будет обрезана до одного пробела, а текст будет продолжаться в одной строке, пока не будет вставлен символ перевода строки.
CSS списки
Списки HTML бывают двух типов – упорядоченные (нумерованные) и неупорядоченные (без нумерации). CSS позволяет изменять символы, цифры или буквы, которые используются для маркировки отдельных элементов списка. Вы даже можете установить свои изображения, в качестве символа списка.
Тип символа списка
Тип символа элемента списка указывается с помощью свойства list-style-type, и возможны следующие значения:
Неупорядоченные списки
- none – без символа
- disc – заполненный круг (стоит по умолчанию)
- circle – круг незаполненный
- square – квадрат
Упорядоченные списки
- none – без символа
- disc – заполненный круг
- circle – круг незаполненный
- square – квадрат
- decimal – числа арабскими цифрами: 1, 2, 3…
- decimal-leading-zero – как decimal, но с дополнительным нулем для цифр от 1 до 9, например. 01, 02, 03
- lower-latin – маленькие буквы латинского алфавита: a, b, c, d, e…
- lower-greek – маленькие греческие буквы: α, β, γ, δ …
- lower-roman – числа римскими цифрами, маленькие: i, ii, iii, iv, v…
- upper-latin – заглавные буквы латинского алфавита: A, B, C, D, E…
- upper-roman – числа латинскими цифрами, заглавные: I, II, III, IV, V…
Позиционирование списка
Положение списка может управляться свойством list-style-position. Возможные значения:
- outside – значение по умолчанию
- inside – будет задан дополнительный отступ для списка
Использование собственного изображения
Вместо нескольких символов, которые предлагают вам браузеры, вы можете использовать собственное изображение для маркировки списка элементов. Это делается следующим образом:
На месте kartinka.gif поставить название файла, который вы будете использовать.
При такой настройке, изображение может отображаться в несколько ином положении, в зависимости от используемого браузера. Чтобы достичь одинаковый стиль, независимый от браузера, которым пользуются посетители на страницах вашего сайта, вы должны указать фоновое изображение для списка в целом, а для отдельных его элементов:
li
background-position:0px 5px;
padding-left:17px;>
Список по умолчанию не указывает изображение (list-style-type:none), а свойства padding и margin со значением 0, чтобы не было никаких различий в результатах между браузерами.
Для отдельных элементов списка (li) указывается изображение, которое, конечно, не должно повторяться (background-repeat: no-repeat). С помощью свойства background-position вы можете точно позиционировать изображение, а padding-left требуется для перемещения текста вправо, в противном случае произойдет наложение текста и изображения.
Укороченный стиль для списков
Стили для списков могут быть заданы и с укороченной форме:
Значения в list-style разделяются только интервалом и задаются в таком порядке: type, position, image.