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.


 

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

46705. Корпус ПСМ (Переключателя скважин многоходового) 1.84 MB
  Переключатель скважин многоходовой, содержит корпус с несколькими входными патрубками и одним общим выходным патрубком, крышку с патрубком для подключения к измерительному устройству, полый вал между полостями корпуса и крышки, отличающийся тем, что в корпусе выполнены каналы от каждого входного патрубка до внутренней поверхности плоского участка
46706. Objects and tasks of grammar 26.5 KB
  ech form is product of the grmmrins nlysis nd process grmmr is lso key vrint in the procces of lnguge. We think of mny wys tht grmmr is deployed in communiction. how we use it Grmmr consists of 2 fundmentl ingredients syntx rrgenments of elements nd morphology. study of grmmr revels structure nd regulrity which enble us to tlk bout the lnguge system.
46708. Оценка эффективности менеджмента 26.51 KB
  Проведенные исследования показали что привлекательность сфер российской инфраструктуры для иностранных инвесторов значительно выше чем отраслей материального производства. Проведенные исследования показали что привлекательность сфер российской инфраструктуры для иностранных инвесторов значительно выше чем отраслей материального производства. Маркетинговые исследования их содержание и методы проведения. Маркетинговые исследования их содержание и методы проведения Маркетинговые исследования комплексная систем изучения организации...
46709. Финансы и финансовая система государства. Публичные (общественные) финансы 29.07 KB
  Расходы на производство и реализацию продукции определяющие себестоимость состоят из стоимости используемых в производстве продукции природных ресурсов сырья основных и вспомогательных материалов топлива энергии основных фондов трудовых ресурсов и прочих расходов по эксплуатации а также внепроизводственных затрат. Расходы на производство и реализацию объединяются в 4 гр: Материальные расходы включают покупные сырье и материалы входящие в состав производимой продукции: основные и вспомогательные материалы комплектующие изделия и...
46710. Классификация ЧС 26.88 KB
  Антропогенные ЧС это аварии и катастрофы на химических биологически и радиационноопасных объектах соответственно ХОО БОО и РОО крушения поездов и аварии на транспорте интенсивные загрязнения воды почв и воздуха. К I категории относят: СБ охватывающие территории превышающие административные границы района города и причинившие народнохозяйственный ущерб; аварии приводящие к полной или частичной остановка производства с большим материальным ущербом и гибелью производственного персонала; аварии с возможным выбросом в ОС РВ и...
46712. Загальновживані слова. Свідоме й критичне використання жаргонізмів і діалектизмів у різних комунікативних сферах 27 KB
  Загальновживані слова. За сферою вживання слова в українській мові поділяють на загальновживані й незагальновживані. Загальновживані слова це слова уживання яких не обмежене ні діалектними ні професійними межами; вони вживаються всіма носіями мови. Незагальновживані слова це слова уживання яких обмежене сферою спілкування та поширенням.
46713. Розробка проекту модернізації локальної комп’ютерної мережі для Васловіського Навчально-Виховного Комплексу 1.31 MB
  Метою даної дипломної роботи є розробка проекту модернізації локальної комп’ютерної мережі для Васловіського Навчально-Виховного Комплексу, що дозволить покращити роботу таких ланок як «приймальня директора...