12784

Текст. Отступы. Выравнивания текста

Практическая работа

Информатика, кибернетика и программирование

Текст Форматирование и установка стиля текста ключевая проблема для любого webдизайнера. На лабораторной вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства: textindent textalign textdecoration letterspacing texttransform ...

Русский

2013-05-03

12.22 KB

3 чел.

Текст

Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. На лабораторной вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:

  •  text-indent
  •  text-align
  •  text-decoration
  •  letter-spacing
  •  text-transform

Отступы [text-indent]

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:

p {

text-indent: 30px;

}

Можно также  использовать процентные значения, относительно элементарного контейнера.

  •  Показать пример

Задание: попробуйте заменить отступ текста, рассмотренного в примере на 30%.

Выравнивание текста [text-align]

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left - по левому краю , right - по правому краю,  center - по центру или justify - по ширине.

p {

text-align: justify;

}

div {

text-align: center;

}

  •  Показать пример

Задание: замените в примере выравнивание текста для абзаца на right.

Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнут, <h2> - перечёркнут, а <h3> - имеет черту над текстом.

h1 {

text-decoration: underline;

}

h2 {

text-decoration: line-through;

}

h3 {

text-decoration: overline;

}

Свойство text-decoration может также принимать одно из следующих значений none - в основном используется для удаления стандартного подчеркивания у ссылок; blink - заставляет текст мигать (поддерживается не всеми браузерами).

  •  Показать пример

Задание: в примере удалите подчеркивание текста, используя значение none.

Интервал между буквами [letter-spacing]

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 6px между буквами в параграфах <p> и 10px - в заголовках <h1>, то используется такой код:

h1 {

letter-spacing: 16px;

}

p {

letter-spacing: 6px;

}

  •  Показать пример

Задание: в примере измените интервал между буквами в заголовке на 1.5em.

Трансформация текста [text-transform]

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

capitalize

Капитализирует каждое слово. Например: "john doe" станет "John Doe".

uppercase

Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".

lowercase

Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".

none

Трансформации нет - текст отображается так же, как в HTML-коде.

Давайте, капитализируем каждое слово в верхний регистр и отобразим все заголовки верхним регистром.

Видите, HTML-код в этом примере в действительности записан в нижнем регистре.

h1 {

text-transform: uppercase;

}

p {

text-transform: capitalize;

}

  •  Показать пример

Задание: отформатируйте “Text” следующим образом. Заголовок необходимо подчеркнуть,  выравнить по центру, установить расстояние между буквами 20px и конвертировать все символы в верхний регистр. Для абзаца: выравнивание по ширине, отступ 15%, интервал между буквами 5px.


 

А также другие работы, которые могут Вас заинтересовать

70314. ПОДАТКОВИЙ МЕНЕДЖМЕНТ: КОНСПЕКТ ЛЕКЦІЙ 1.36 MB
  Конспект лекцій з дисципліни «Податковий менеджмент» охоплює питання ведення обліку платників податків, порядку нарахування податків та облік фактично внесених сум, методики проведення камеральних і документальних перевірок, правильності нарахування й своєчасності сплати...
70321. Средневековая музыка 1.36 MB
  В современном музыковедении термин часто применяется в значении характеристики западно-европейской музыки XIV в.. Гл. черта в этом смысле - рождение внутри средневековой готической культуры новых предренессансных тенденций, которые были полностью реализованы в эпоху Возрождения...