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.


 

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

43974. Проблеми функціонування промислового підприємства в умовах ринкових відносин 121.5 KB
  Собівартість продукції. Рентабельність продукції. Конкурентоспроможність продукції в ринкових умовах. В умовах ринкової економіки виживає лише той хто найбільше грамотно визначить вимоги ринку і організує виробництво продукції яка користується попитом і забезпечить високий рівень заробітної плати працівників підприємства.
43975. Зелена музика твоїх думок 30.51 MB
  Приступаючи до вибору моєї дипломної роботи я думала над тим яку роль будуть відігравати мої вироби в інтер’єрі, як вони будуть використовуватись. Мені захотілось, щоб ці керамічні твори мали як декоративне так і утилітарне призначення. Тому я вирішила обрати темою своєї дипломної роботи декоративні кашпо на тему: «Зелена музика твоїх думок».
43976. ДРАМАТУРГІЯ ЄВГЕНА ПЛУЖНИКА У КОНТЕКСТІ ЙОГО ДОБИ 345 KB
  У вирі такої провокативної і суперечливої дійсності зявилися драматичні шедеври Євгена Павловича Плужника. Таємницю творчого феномену Євгена Плужника розгадувало чимало науковців. Жулинського дружини найближчого друга Євгена Плужника Григорія Косинки Т.
43977. Телекомунікації. Методичні вказівки 286 KB
  Дипломна робота на здобуття ступеня бакалавра по напряму 6.0924 «Телекомунікації» ставить за мету систематизацію, закріплення і розширення отриманих в процесі навчання теоретичних і практичних знань, а також оцінку підготовленості студентів до самостійної і ефективної роботи в умовах науково-технічного прогресу, економічного і культурного розвитку суспільства.
43978. Способи обробки субпродуктів. Особливості зберігання продуктів 1.35 MB
  Загальна характеристика субпродуктів 3. Способи обробки субпродуктів 5. Удосконалено технологічні процеси приготування напівфабрикатів з субпродуктів у процесі правильної технології їх виробництва первинної і теплової обробки відповідних субпродуктів. Розробляються і використовуються нові електрофізичні біотехнічні і ферментативні методи обробки субпродуктів.
43979. ОДЕРЖАННЯ ГАЛОГЕНІЗОТІОЦІАНАТІВ ТА ДОСЛІДЖЕННЯ ЇХ ВЗАЄМОДІЇ З ГІДРОКСИБЕНЗАЛЬДЕГІДАМИ 2.41 MB
  Дотримання правил техніки безпеки є обовязковим для кожного працівника під час роботи в хімічній лабораторії. Більш досвідчені працівники мають створювати такі умови праці в лабораторії при яких було б неможливе недбале ставлення до вимог техніки безпеки. До роботи в хімічній лабораторії допускаються особи які пройшли медичне обстеження та інструктаж з техніки безпеки.
43980. Исследование вопросов оформления и учета операций в иностранной валюте банками Республики Беларусь и разработка путей их развития 403 KB
  Понятие и сущность операций в иностранной валюте. Внебиржевой порядок Основные направления развития операций в иностранной валюте в Республике Беларусь. Целью работы является исследование вопросов оформления и учета операций в иностранной валюте банками Республики Беларусь и разработка путей их развития. Исходя из поставленной цели предметом работы является порядок оформления и учета операций в иностранной валюте банками Республики Беларусь.
43981. Правила складання і оформлення актів 240.5 KB
  Сукупність взаємоповязаних документів, які застосовуються у певній сфері діяльності, становить систему документації. Нині діють уніфіковані системи. Однією з найпоширеніших є організаційно - розпорядча документація (ОРД), використовувана в оформленні управлінських рішень.
43982. Цифровая система видеонаблюдения 2.38 MB
  С развитием цифровых технологий эта задача может быть решена внедрением системы видеонаблюдения английская аббревиатура CCTV Closed Circuit TeleVision Системы замкнутого телевидения. В зависимости от типа используемого оборудования системы видеонаблюдения делят на аналоговые и цифровые. Аналоговые системы видеонаблюдения используют там где необходимо организовать видеонаблюдение в небольшом числе помещений и информацию с видеокамер записывать на видеомагнитофон. Для обеспечения безопасности особо ответственных или...