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.


 

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

28681. Развитие законодательства и его кодификация в 1922 г. Кодексы законов о труде, земле, гражданский и уголовный кодексы 1922 г. 14.06 KB
  ГК РСФСР состоял из 4 разделов: общ. ЗК РСФСР состоял из Оснх положений и 3 частей: о трудовом землепользи о городских землях и госных земельных имвах о землеустройстве и переселении. Кодекс закрепил отмену частной собствти на землю недра воды и леса в пределах РСФСР. КЗоТ РСФСР сост.
28682. Национально-государственное размежевание в Средней Азии и образование новых советских социалистических республик 12.23 KB
  Первыми субъектами СССР были четыре союзные республики: РСФСР УССР БССР и ЗСФСР. В дальнейшем СССР пополнялся новыми субъектами. На первом этапе развития Союза ССР происходило национальногосударственное размежевание в Средней Азии на территории Туркестанской АССР входившей в состав РСФСР и двух самостоятельных государств Хорезмской и Бухарской народных советских республик. были приняты декларации об образовании Узбекской ССР и Туркменской ССР.
28683. Образование СССР. Договор и Декларация об образовании СССР, их правовые основы 13.48 KB
  Образование СССР. Договор и Декларация об образовании СССР их правовые основы. Образование СССР определяется след. предпосылкой образования СССР было существование в республиках аналогичного режима диктатуры пролетариата.
28684. Разработка и принятие Конституции СССР 1924 г. Ее основные положения 12.45 KB
  Разработка и принятие Конституции СССР 1924 г. Конституция СССР 1924г. Она была принята ЦИК СССР 6 июля 1923 г. II Всесоюзным съездом Советов СССР.
28685. Военная реформа 1924 - 1925 гг. Создание территориально-милиционной системы и укрепление кадрового состава Красной Армии 12.76 KB
  Вместо единого Штаба Рабочекрестьянской красной Армии создано 3 самостх управления: Штаб РККА Главное Управление РККА и Инспекторат РККА. Штаб РККА становится основным органом управления в системе военного ведомства на котй возлагались задачи разработки общих вопросов обороны на случай войны. управление ГУ РККА возлагались задачи управления текущей жизнью армии и обеспечения ее повседневных нужд. Инспекторат РККА ведал боевой подготовкой войск и командного состава а также инспектированием Вооруженных сил.
28686. Реконструкция сельского хозяйства. Совершенствование форм управления промышленностью, и сельским хозяйством в конце 20-х - начале 30-х гг. 13.37 KB
  Совершенствование форм управления промышленностью и сельским хозяйством в конце 20х начале 30х гг. С этого времени косвенное регулирование вытесняется элементами непосредственного управления. На место функциональной системы управления экономикой пришел отраслевой и производственнотерриториальный принцип.
28687. Мероприятия партии и правительства по проведению коллективизации: плюсы и минусы 12.53 KB
  началась массовая коллективизация заготовительная компания приняла насильственный характер рыночные механизмы были сломлены. сплошная коллективизация должна была завершиться на Северном Кавказе Нижнем и Среднем Поволжье. Принудительная коллективизация вызвала забой скота и падение урожаев а выкачивание хлеба из села выросло.
28688. Попытка установления парламентской монархии в 1-ом десятилетии XX в 14.11 KB
  Об учреждении Госой думы и Положение о выборах в нее Манифест 17 окт. Об усовершенствовании госного порядка и Осные законы от 23 апр. Согласно августовским Манифесту и Положению Гос. К компетенции Думы относились: разработка и обсуждение законов обсуждение госго бюджета и др.
28689. Изменение в государственном строе России в результате первой русской буржуазной революции. Новые избирательные законы 13.43 KB
  Изменение в государственном строе России в результате первой русской буржуазной революции. Основным событием явилось создание представительного органа Государственной думы. был подписан Манифест об учреждении Госной думы. В законе указывалось что она формируется для предварительной разработки и обсуждения законопроектов коте в дальнейшем должны поступать в Госный совет.