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.


 

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

19896. Поняття і система інвестиційного права 78 KB
  Лекція № 1. Тема : Поняття і система інвестиційного права. Мета: Ознайомлення студентів з поняттям функціями та системою інвестиційного права місцем інвестиційного права в системі права України. План 1. Місце інвестиційного права в системі права України. 2. По...
19897. Поняття інвестиційної діяльності 104.5 KB
  Лекція № 2. Тема 2: Поняття інвестиційної діяльності Мета: ознайомлення студентів з основами інвестиційної діяльності структурою інвестиційної діяльності поняттям інвестиційного клімату держави План 1. Поняття та класифікація інвестицій. Поняття інвестицій
19898. Правове регулювання фінансових інвестицій 97 KB
  Лекція № 3. Тема : Правове регулювання фінансових інвестицій. Мета: ознайомлення студентів з поняттям фінансові інвестиції основними цінними паперами основами управління інвестиційним портфелем План 1. Загальна характеристика фондового ринку в Україні. 2. Пра
19899. Субєкти інвестиційної діяльності 99 KB
  Лекція № 4. Тема 4: Суб'єкти інвестиційної діяльності. Мета: вивчення кола субєктів інвестиційної діяльності форми діяльності суб'єктів інвестиційної діяльності. План 1. Держава як суб'єкт інвестиційної діяльності. 2. Інвестиційний фонд компанія та довірчі то
19900. Інноваційна форма інвестицій 73 KB
  Лекція № 5. Тема 5: Інноваційна форма інвестицій. Мета: ознайомлення з поняттям інноваційної діяльності венчурного підприємства стадіями інноваційної діяльності. План 1. Поняття й зміст інновацій. Інноваційна діяльність. 2. Венчурне підприємство. Стадії іннов...
19901. Організаційно-правові форми регулювання взаємодії суб'єктів інвестиційної діяльності 61 KB
  Лекція № 6. Тема 6 : Організаційноправові форми регулювання взаємодії суб'єктів інвестиційної діяльності. Мета: ознайомлення студентів з поняттям та формами регулювання взаємодії субєктів інвестиційної діяльності визначити поняття фінансового лізингу та інвести...
19902. Іноземні інвестиції 92 KB
  Лекція № 7. Тема 7: Іноземні інвестиції. Мета: вивчення поняття іноземних інвестицій та правового статусу підприємства з іноземними інвестиціями ознайомлення з державною політикою в області іноземних інвестицій. План 1. Правовий режим іноземних інвестицій....
19903. Державне управління інвестиційною діяльністю в Україні 86.5 KB
  Лекція № 8. Тема 8: Державне управління інвестиційною діяльністю в Україні Мета: вивчення основ державного управління в галузі інвестиційної діяльності. визначення поняття зміст принципи і функції державного управління інвестиційною діяльністю План 1. Держав...
19904. Определение удельной и объемной активности в твердых и жидких пробах 32.25 KB
  Лабораторная работа № 41. Определение удельной и объемной активности в твердых и жидких пробах. Цель работы: изучить характеристики стационарного радиометра КРВП3Б и научиться с его помощью измерять удельную и объемную активность в твердых и жидки...