Html style font padding

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. Возможные значения:

Использование собственного изображения

Вместо нескольких символов, которые предлагают вам браузеры, вы можете использовать собственное изображение для маркировки списка элементов. Это делается следующим образом:

На месте kartinka.gif поставить название файла, который вы будете использовать.

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

li background-repeat:no-repeat;
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.

Источник

CSS Padding

Padding is used to create space around an element’s content, inside of any defined borders.

CSS Padding

The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding — Individual Sides

CSS has properties for specifying the padding for each side of an element:

All the padding properties can have the following values:

• length — specifies a padding in px, pt, cm, etc.
• % — specifies a padding in % of the width of the containing element
• inherit — specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Example

Set different padding for all four sides of a element:

Padding — Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

  Example

  Use the padding shorthand property with four values:

  If the padding property has three values:

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

    Example

    Use the padding shorthand property with three values:

    If the padding property has two values:

    • padding: 25px 50px;
      • top and bottom paddings are 25px
      • right and left paddings are 50px

      Example

      Use the padding shorthand property with two values:

      If the padding property has one value:

      Example

      Use the padding shorthand property with one value:

      Padding and Element Width

      The CSS width property specifies the width of the element’s content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

      So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

      Example

      Here, the element is given a width of 300px. However, the actual width of the element will be 350px (300px + 25px of left padding + 25px of right padding):

      To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.

      Example

      Use the box-sizing property to keep the width at 300px, no matter the amount of padding:

      More Examples

      Set the left padding
      This example demonstrates how to set the left padding of a

      element.

      Set the right padding
      This example demonstrates how to set the right padding of a

      element.

      Set the top padding
      This example demonstrates how to set the top padding of a

      element.

      Set the bottom padding
      This example demonstrates how to set the bottom padding of a

      element.

      All CSS Padding Properties

      Property	Description
      padding	A shorthand property for setting all the padding properties in one declaration
      padding-bottom	Sets the bottom padding of an element
      padding-left	Sets the left padding of an element
      padding-right	Sets the right padding of an element
      padding-top	Sets the top padding of an element

      Источник