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.


 

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

30676. Тема греха и покаяния в русской литературе 13.81 KB
  Особенно остро ставил проблему греха и покаяния в своем творчестве Ф.Проблему нравственного греха и покаяния ставил не только Ф.Таким образом тема греха и покаяния проходит через творчество многих русских писателей.
30677. Философские вопросы бытия в лирике С.А. Есенина (на примере 3 -4 стихотворений по выбору экзаменуемого). Тема жизни и смерти в стихотворении «Мы теперь уходим понемногу…» 14.68 KB
  Тема жизни и смерти в стихотворении Мы теперь уходим понемногу В своей философской лирике Есенин ставит множество вопросов обращенных в первую очередь к самому себе: чем я жил что я успел для чего пришел в этот миЕсенин всегда ощущал себя частью этого мира. Часто он находил отклик своим мыслям в мире природы поэтому его философская лирика темно переплетается с пейзажной и наполнена аналогиями между законами человеческой жизни и законами природы. Жизненный путь пройден природа завершила свой кругСоотношение весны человека и...
30679. Тема подвига и самопожертвования в русской литературе 14.15 KB
  Подвиг самопожертвование могут восприниматься писателями поразному. Человек совершает подвиг не только в исключительные моменты своей жизни но и в семейнобытовом социальном философском плане. Если бы не слова князя Андрея никто бы не узнал о его подвиге.
30680. Тема России в лирике Блока. Чтение наизусть «Река раскинулась. Течет, грустит лениво…» 14.97 KB
  Течет грустит лениво Тема Родины России занимала в творчестве Блока особое место и была для него поистине всеобъемлющей. В стихотворении Осенняя воля 1905 отчетливо прослеживаются лермонтовские традиции творчества Блока:Выхожу я в путь открытый взорамВетер гнет упругие кустыБитый камень лег по косогорамЖелтой глины скудные пластыЛирический герой Блока не случайный прохожий а один из сыновей России идущий знакомым путем и сопричастный горькой судьбе тех кто умирает не любя но кто стремится к слиянию с родиной: Приюти ты в...
30682. Тема чести в произведениях отечественной классики XIX века 18.92 KB
  Проблема чести была актуальна во все времена но особенно ярко это проявилось в литературе 19го века.Тема чести одна из основных в романе А. Кодекс дворянской чести требовал чтобы герой отдал за императрицу свою жизнь и Гринев был готов на это.
30683. Тематика и художественные особенности «Сказок» М. Е. Салтыкова-Щедрина 15.75 KB
  Известно что Салтыков-Щедрин начал писать свои политические сказки еще в шестидесятые годы и что именно эти небольшие по объему произведения стали вершиной его творчества итоговым произведением. Одной из самых известных сказок Салтыкова-Щедрина является Повесть о том как один мужик двух генералов прокормил. Спасенные и разбогатевшие генералы проявляют свою благодарность высылают ему пятак серебром да рюмку водки веселись мужчина Во многих других сказках Салтыкова можно встретить применение...
30684. Тип «гордого человека» и его воплощение в произведениях отечественной литературы 14.8 KB
  Гордость один из семи смертных грехов. Все эти герои несмотря на разнообразие их характеров обладают одной ведущей чертой гордостью. Своей гордостью и эгоизмом он приносит несчастья многим героям даже совершает убийство друга на дуэли. Любовь и гордость находятся на разных полюсах.