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.


 

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

30835. Ионно-мембранная теория происхождения биоэлектрических явлений (Ходжкин, Хаксли, Катц). Электрические явления в возбудимых тканях (потенциал покоя, потенциал действия, токи градиента основного обмена, токи повреждения) 25 KB
  Электрические явления в возбудимых тканях потенциал покоя потенциал действия токи градиента основного обмена токи повреждения. Происхождение электрических явлений в тканях На уровне клетки регистрируется потенциал мембраны ПД разность потенциалов между наружной и внутренней поверхности мембраны в каждый данный момент времени. Стационарно как показатели электрического состояния клетки регистрируют 2 вида потенциала мембраны ПМ: потенциал покоя ПП и потенциал действия ПД. Потенциал покояПП это разность потенциалов между...
30836. Понятие о потенциале покоя. Роль ионов К+, Na+, Ca+2, Cl- в происхождении мембранного потенциала. Калий-натриевый насос, его значение. Уравнения Нернста и Гольдмана, расчет величины мембранного потенциала 23.5 KB
  в покое мембрана поляризована. Избирательная проницаемость клеточной мембраны в покое для натрия и калия. В покое высокая проницаемость для калия а для натрия в покое она практически отсутствует небольшая. В покое за счет процесса облегченной диффузии через неуправляемые медленные калиевые каналы за счет градиента концентрации калий постоянно выходит из клетки во внеклеточное пространство это формирует постоянный выходящий калиевый ток.
30837. Потенциал действия и его фазы. Изменение проницаемости калиевых, натриевых и кальциевых каналов в процессе формирования потенциала действия 30 KB
  При нанесении раздражения увеличивается проницаемость мембраны для натрия. За счет этого процесса происходит уменьшение полярности мембраны по сравнению с исходным с 70 мВ до 4050 мВ. Критический уровень деполяризации КУД это такая величина разности потенциалов 4050 мВ при которой активируется большое количество потенциалзависимых быстрых натриевых каналов проницаемость мембраны для натрия становится максимальной и перестает быть зависимой от силы раздражителя. Возникает лавинообразный входящий натриевый ток который быстро доли...
30838. Раздражимость и возбудимость 44 KB
  По биологической значимости: адекватные присущи для восприятия данному виду рецептора неадекватные не являются естественными с точки зрения природы или силы раздражения. Законы раздражения Действие раздражителя описывается несколькими законами: 1. Закон силы раздражения: Чем больше сила раздражения тем до известных пределов сильнее ответная реакция. Но есть сила раздражения для любого биологического раздражителя которая способна вызывать mx эффект оптимальная сила оптимум частоты и силы раздражения.
30839. Действие постоянного тока 29.5 KB
  Под катодом замыкая цепь мы по существу вносим мощный отрицательный заряд на наружную поверхность мембраны. Это приводит к развитию процесса деполяризации мембраны под катодом. При замыкании цепи происходит внесение мощного положительного заряда на поверхность мембраны что приводит к гиперполяризации мембраны. КУД смещается вслед за потенциалом мембраны но в меньшей степени.
30840. Строение биомембран 52 KB
  Основу мембраны составляет липидный бислой двойной слой амфифильных липидов которые имеют гидрофильную головку и два гидрофобных хвоста . В липидном слое липидные молекулы пространственно ориентированы обращены друг к другу гидрофобными хвостами головки молекул обращены на наружную и внутреннюю поверхности мембраны. Липиды мембраны: фосфолипиды сфинголипиды гликолипиды холестерин. К ним относятся рецепторные белки белки адгезии; трансмембранные пронизывают всю толщу мембраны причем некоторые белки проходят через...
30841. Трансмембранный обмен 28.5 KB
  Осмос когда через мембрану движется растворитель из зоны с меньшей концентрацией в зону с большей концентрацией.Переносчики белки которые тем или иным способом переносят вещества через мембрану за счет конформации пространственного преобразования молекул переносчика сальтообразно. Активный транспорт транспорт веществ через мембрану который осуществляется против градиента концентрации и требует значительных затрат энергии. Он вмонтирован в мембрану.
30842. Ионные каналы 85.5 KB
  Ионные каналы Ионный канал состоит из нескольких субъединиц их количество в отдельном ионном канале составляет от 3 до 12 субъединиц. Ионные каналы работают по механизму облегченной диффузии. каналам пропускающим только один вид ионов натриевые каналы калиевые каналы кальциевые каналы анионные каналы. Некоторые из ионных каналов неселективные например каналы утечки .
30843. . Воспринимать информацию переводить информацию раздражителя на биологический язык клетки. 21.5 KB
  Воспринимать информацию переводить информацию раздражителя на биологический язык клетки. Обрабатывать информацию т. Кодировать информацию превращать информацию в форму удобную для хранения в мозге.