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.


 

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

76908. Тройничный нерв. V пара черепных нервов, ее ветви, топография и области иннервации 185.93 KB
  V пара тройничные нервы правый и левый смешанные: чувствительные двигательные вегетативные. Нервы развиваются вместе с производными первой висцеральной дуги челюстями и жевательными мышцами кожей лица слизистой полости носа и рта. Ствол тройничного нерва возникает при объединении чувствительного и двигательного корешков на выходе из мозга.
76909. Лицевой нерв, его топография, ветви и области иннервации 181.44 KB
  VII пара включает два нерва лицевой и промежуточный смешанные нервы двигательные парасимпатические и чувствительные. Промежуточный нерв нередко обозначают как XIII пару и тогда в VII паре остается только лицевой двигательный нерв. Нерв выходит из мозга в поперечной борозде между мостом и продолговатым мозгом латерально от оливы направляясь по задней черепной яме к внутреннему слуховому проходу куда вступает вместе с VIII парой.
76910. Преддверно-улитковый нерв. VIII пара черепных нервов и топография ее ядер. Проводящие пути органов слуха и равновесия 183.89 KB
  Преддверная и улитковая части VIII пары объединяются во внутреннем слуховом проходе и направляются через заднюю черепную яму к мозговому стволу к его поперечной борозде между мостом и продолговатым мозгом где латеральнее лицевого и промежуточного нервов входят во внутрь моста и заканчиваются синапсами на ядрах вестибулярного поля моста. Вестибулярное поле находится в латеральных углах ромбовидной ямки на него проецируются два улитковых и четыре вестибулярных ядра залегающих в вентролатеральных отделах моста. Улитковые ядра: переднее и...
76911. Языкоглоточный нерв. IX пара черепных нервов, их ядра, топография и области иннервации 180.17 KB
  IX пара языкоглоточные нервы смешанные развиваются из заднего мозгового пузыря. Корешки нерва 45 выходят позади оливы продолговатого мозга и сливаются в короткий ствол. Чувствительные узлы нерва: верхний в яремном отверстии нижний в области каменистой ямки височной кости содержат псевдоуниполярные нейроны центральные отростки которых формируют чувствительный корешок нерва.
76912. Блуждающий нерв, его ядра, их топография; ветви и области иннервации 181.14 KB
  Краниальная часть нерва отдает ветви: менингиальную веточку для твердой мозговой оболочки в задней черепной яме; ушную ветвь которая через сосцевидный каналец и барабаннососцевидную щель подходит к коже наружного слухового прохода и ушной раковине. Ветви шейной части: глоточные к глоточному сплетению и через него к слизистой мышцамконстрикторам глотки мышцам мягкого неба кроме напряжителя из тройничного нерва шейные верхние сердечные ветви к сердечным сплетениям гортанные верхние нервы к перстнещитовидной мышце наружная...
76913. Прибавочный и подъязычный нервы 181.56 KB
  Обе пары XI XII по выходе из черепа идут между внутренней яремной веной и внутренней сонной артерией и ложатся под заднее брюшко двубрюшной мышцы. Из черепа ствол нерва выходит через яремное отверстие вместе с IX X парами и внутренней яремной веной занимая при этом латеральное положение. Внутренняя веточка для соединения с блуждающим нервом; наружная ветвь для трапециевидной и грудиноключичнососцевидной мышц; Наружная ветвь проходит между внутренней яремной веной и внутренней сонной артерией а затем уходит под заднее брюшко...
76914. Вегетативная, автономная нервная система. Вегетативная часть нервной системы, ее деление и характеристика отделов 185.72 KB
  В надсегментарных вегетативных центрах которые располагаются в коре полушарий базальных ядрах мозжечке различают: центры чувствительные по восприятию внутренней рецепции; центры двигательные по координации гладкомышечных и сердечных сокращений в органах и сосудах. Подкорковые вегетативные центры Полосатое тело центры терморегуляции слюно и слезоотделения образования слизи. Ретикулярная формация ствола мозга зрачковый рефлекс центры дыхания сердечный сосудистый глотания и рвоты и другие регуляции обмена веществ и...
76915. Парасимпатическая часть ВНС 187.66 KB
  Краниальная часть парасимпатических ядер включает мезэнцефалические добавочное и срединное ядра глазодвигательного нерва которые лежат в сером веществе дна водопровода на уровне верхних холмиков. Центральные нейроны ядер направляют свои преганглионарные отростки в составе глазодвигательного нерва к ресничному узлу где они переключаются на периферические 2ые нейроны. Дорсальное ядро блуждающего нерва направляет преганглионарные волокна в интрамуральные органные парасимпатические узлы органов иннервируемых Х парой где они прерываются....
76916. Шейный симпатикус. Шейный отдел симпатического ствола: топография, узлы, ветви, области, иннервируемые ими 183.18 KB
  Серые соединительные ветви выходят из шейных узлов в шейные спинномозговые нервы а с ними в нервы шейного и плечевого сплетений. Шейный верхний узел имеет веретенообразную форму в длину достигает 2 см в толщину 05 см лежит на длинной мышце головы впереди поперечных отростков IIго и IIIго шейных позвонков но позади внутренней сонной артерии и блуждающего нерва. Из него начинаются следующие симпатические нервы.