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.


 

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

73927. ВНУТРІШНЬОФІРМОВЕ ФІНАНСОВЕ ПРОГНОЗУВАННЯ ТА ПЛАНУВАННЯ 442.5 KB
  Фінансова стратегія підприємства. Прогнозування показників фінансової звітності підприємства. Головна мета фінансового плану підприємства полягала у виявленні невикористаних ресурсів і визначенні суми платежів у бюджет величина якої відповідала перевищенню доходів підприємства над його витратами. За ринкової економіки значно підвищується матеріальна відповідальність керівника підприємства за його фінансовий стан.
73928. Антикризове фінансове управління підприємством 138.5 KB
  Необхідність оволодіння основами антикризового фінансового управління зумовлена тим що в умовах ринкової економіки підприємства здійснюють свою фінансовогосподарську діяльність знаходячись під постійним впливом несприятливих внутрішніх та зовнішніх чинників які можуть призвести до фінансової кризи та банкрутства.
73930. Система забезпечення фінансового менеджменту 84.5 KB
  Фінансовий менеджмент є невід\'ємною складовою частиною загальної системи управління підприємством. Тому його організаційне забезпечення має бути інтегроване з загальною структурою управління підприємством.
73931. Визначення вартості грошей у часі та її використання у фінансових розрахунках 103.5 KB
  Визначення вартості грошей у часі та її використання у фінансових розрахунках. Необхідніть і сутність визначення вартості грошей у часі. Оцінка майбутньої та теперішньої вартості грошей з врахуванням фактору інфляції. Необхідніть і сутність визначення вартості грошей у часі.
73932. Управління активами 123.5 KB
  Активи являють собою ресурси, контрольовані підприємтвом, використання яких призводять до збільшення економічних вигод у майбутньому. До них відносяться всі наявні матеріальні цінності, нематеріальні активи та кошти, що належать підприємству на певну
73933. АНАЛİЗ ФİНАНСОВИХ ЗВİТİВ 271 KB
  Головна мета аналізу фінансових звітів – своєчасно виявляти й усувати недоліки у фінансовій діяльності та знаходити резерви поліпшення фінансового стану підприємства і його платоспроможності. На підставі вивчення взаємозв’язку між різними показниками виробничої комерційної і фінансової діяльності дати оцінку виконання плану з надходження фінансових ресурсів та їх використання з позиції поліпшення фінансового стану підприємства. Розроблення конкретних заходів які спрямовані на ефективніше використання фінансових ресурсів і зміцнення...
73934. Антикризове фінансове управління підприємством. Сутність та основні елементи антикризового фінансового управління 291 KB
  Сутність та основні елементи антикризового фінансового управління Необхідність оволодіння основами антикризового фінансового управління зумовлена тим що в умовах ринкової економіки підприємства здійснюють свою фінансовогосподарську діяльність перебуваючи під постійним впливом несприятливих внутрішніх та зовнішніх чинників які можуть призвести до фінансової кризи та банкрутства. Для нейтралізації кризових явищ підприємства переводяться на спеціальний режим антикризового управління із застосуванням специфічних методів та прийомів управління...
73935. ТЕОРЕТИЧНİ ТА ОРГАНİЗАЦİЙНİ ОСНОВИ ФİНАНСОВОГО МЕНЕДЖМЕНТУ 128 KB
  Фінансовий менеджмент ґрунтується на системі принципів засобів та форм організації грошових відносин підприємства спрямованих на управління його фінансовогосподарською діяльністю. Складовими фінансового менеджменту є...