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.


 

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

8518. Соціальна структура суспільства 28.38 KB
  Соціальна структура суспільстваМЕТА: створити умови для: розуміння учнями всіх особливостей розвитку соціальної структури розвитку аналітичного та логічного мислення учнів на основі опрацювання історичного матеріалу вміння об...
8519. Суспільно-політичний розвиток західноукраїнських земель у 60 - першій половині 70-х рр. XIX ст 26.6 KB
  Тема уроку. Суспільно-політичний розвиток західноукраїнських земель у 60 - першій половині 70-х рр. XIX ст. Мета уроку: показати причини й особливості пожвавлення суспільно-політичного руху після революції 1848-1848 рр. довести реакційну...
8520. Психологические трудности детей-дошкольников из неполных семей 2.31 MB
  Семья для маленького ребенка – это целый мир. Мир, в котором он живёт, действует, делает открытия, учится любить, ненавидеть, радоваться, сочувствовать. В семье ребенок приобретает первоначальный опыт общения, умения жить среди людей, первый опыт жить в социальном мире.
8521. Основи Цивільного права. Урок 189 KB
  Тема 5. Основи Цивільного права Мета заняття.Ознайомити студентів із цивільним правом, його джерелами та відносинами, що ним регулюються, субєктами та обєктами цивільно-правових відносин, суттю права власності та формами його захис...
8522. Разработка маркетинговой программы 300.5 KB
  Целью курсовой работы является разработка маркетинговой программы по развитию фирмы. При разработке маркетинговой программы рассмотрены проблемы связанные с выбором товара и изучением его основных характеристик с точки зрения маркетинга...
8523. Оценка уровня качества сложного технического объекта. «Видеокамера Sony hdr-cx250e» 261.5 KB
  Качество – это совокупность характеристик объекта, относящихся к его способности удовлетворить установленные и предполагаемые потребности. Оценка уровня качества продукции представляет собой совокупность операций, включающих выбор номенклатуры показателей качества оцениваемой продукции
8524. Основи сімейного та житлового права України 143 KB
  Тема 8. Основи сімейного та житлового права України Мета заняття.Ознайомити студентів із основами сімейного законодавства, порядком укладання та розірвання шлюбу, особистими та майновими правами подружжя, взаємними правами та обов’язками ...
8525. Політичний режим. Політичний устрій 34.5 KB
  Тема уроку. Політичний режим. Політичний устрій. Мета уроку. Мета: Навчити ліцеїстів основних поняттям теорії держави та влади розвивати вміння висловлювати власне ставлення до проблеми виховувати почуття правової свідомості. Обладнання: Дошка, пі...
8526. Україна у складі Росії та Австро-Угорщини. Економічне становище 28.54 KB
  Україна у складі Росії та Австро-Угорщини. Економічне становище. Мета уроку: Визначити особливості розвитку промисловості в Наддніпрянській та Західній Україні порівняти, як відбувався розвиток сільського господарства на українських землях у складі...