Сайт по Электронике и Web-разработке
Как сделать свой сайтКак сделать свой сайт
На странице размещена информация по форматированию текста в css и созданию общего дизайна страницы, при помощи тегов CSS

Форматирование текста в CSS

Форматирование текста в CSS

Форматирование шрифта в CSS

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

Имя шрифта

Имя шрифта позволяет задать атрибут font-family:

p { font-family: "Arial" }

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

p { font-family: "Verdana", "Tahoma" }

Указать можно типовые семейства шрифтов, такие как: - serif, sans-serif, cursive, fantasy или monospace:

p { font-family: "Verdana", "Tahoma", sans-serif }

Стиль шрифта

Атрибут - font-stily позволяет задавать стиль любого шрифта. Стиль может принимать некоторые значения например:

  • normal - нормальный шрифт:

    p { font-family: "Arial" ; font-style: normal }

  • italic - курсивный шрифт:

    p { font-family: "Arial" ; font-style: italic }

  • oblique - наклонный шрифт:

    p { font-family: "Arial" ; font-style: oblique }

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

Размер шрифта позволяет задать Атрибут font-size:

.text1 { font-size: 12pt; font-family: "Arial" }

Можно указать абсолютную величину или одну из типовых констант - xx-small, x-small, small, medium, large, x-large или xx-large :

.text1 { font-size: large; font-family: "Arial" }

Кроме того, можно указать относительную величину (например, значение в процентах) или одну из двух констант - larger или smaller:

.text1 { font-size: 150%; font-family: "Arial" }

.text2 { font-size: smaller; font-family: "Arial" }

Цвет шрифта

Атрибут color позволяет задать цвет шрифта:

.text1 { font-size: 150%; font-family: "Arial"; color: red }

.text2 { font-size: smaller; font-family: "Arial"; color: #00FF00 }

.text3 { font-size: smaller; font-family: "Arial"; color: rgb(255, 0, 0) }

Жирность шрифта

Атрибут font-weight позволяет управлять жирностью шрифта. Может принимать следующие значения:

  • 100, 200, 300, 400, 500, 600, 700, 800, 900 - значение 100 соответствует самому бледному шрифту, а значение 900 соответствует самому жирному:

    p { font-family: "Arial" ; font-style: normal; font-weight: 700 }

  • normal - нормальный шрифт. Соответствует значению 400:

    p { font-family: "Arial" ; font-style: italic; font-weight: normal }

  • bold - полужирный шрифт:

    p { font-family: "Arial" ; font-style: italic; font-weight: bold }

Форматирование текста в CSS

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

Расстояние между символами в словах

Атрибут letter-spasing задает расстояние между символами в тексте. Он может принимать следующие значения:

  • normal - значение по умолчанию:

    p { letter-spacing: normal; font-style: italic; font-weight: normal }

  • абсолютная величина в поддерживаемых CSS единицах:

    p { font-size: 12pt; color: red; letter-spacing: 5mm }

Расстояние между словами

Атрибут word-spasing задает расстояние между словами в тексте. Он может принимать следующие значения:

  • normal - значение по умолчанию:

    p { word-spacing: normal; font-style: italic; font-weight: normal }

  • абсолютная величина в поддерживаемых CSS единицах:

    p { font-size: 12pt; color: red; word-spacing: 5mm }

Отступ первой строки

Атрибут text-indent задает отступ для "Красной строки". Может задаваться абсолютная и относительная величина отступа:

p { text-indent: 12mm; font-style: italic; font-weight: normal }

Вертикальное расстояние между строками

Атрибут line-height задает вертикальное расстояние между базовыми линиями двух строк. Он может принимать следующие значения:

  • normal - значение по умолчанию:

    p { line-height: normal; font-style: italic; font-weight: normal }

  • абсолютная или относительная величина в поддерживаемых CSS единицах:

    p { font-size: 12pt; color: red; font-family: "Arial"; line-height: 5mm }

Горизонтальное выравнивание текста

Атрибут text-align задает горизонтальное выравнивание текста. Он может принимать следующие значения:

  • center - выравнивание по центру:

    <p style: "text-align: center">Абзац с выравниванием по центру</p>

  • left - выравнивание по левому краю:

    <p style: "text-align: left">Абзац с выравниванием по левому краю</p>

  • right - выравнивание по правому краю:

    <p style: "text-align: right">Абзац с выравниванием по правому краю</p>

Вертикальное выравнивание текста

Атрибут vertical-align задает вертикальное выравнивание текста относительно элемента ячейки таблицы. Он может принимать следующие значения:

  • baseline - по базовой линии:

    td { font-size: 12pt; color: red; vertical-align: baseline }

  • middle - по центру:

    td { font-size: 12pt; color: red; vertical-align: middle }

  • top - по верху:

    td { font-size: 12pt; color: red; vertical-align: top }

  • bottom - по низу:

    td { font-size: 12pt; color: red; vertical-align: bottom }

Подчеркивание, надчеркивание и зачеркивание текста

Атрибут text-decoretion позволяет подчеркнуть, зачеркнуть и над черкнуть текст. Он может принимать следующие значения:

  • none - обычный текст(по умолчанию):

    <p style="text-decoration: none">Текст</p>

  • underline - подчеркивает текст:

    <p style="text-decoration: underline">Подчеркивает текст</p>

  • overline - проводит линию над текстом:

    <p style="text-decoration: overline">Проводит линию над текстом</p>

  • blink - мигающий текст:

    <p style="text-decoration: blink">Мигающий текст</p>

  • line-through - зачеркивает текст:

    <p style="text-decoration: line-through">Зачеркивает текст</p>

Назад в рубрику