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.


 

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

2599. Психологическая характеристика подросткового возраста 210.9 KB
  Психологическая характеристика подросткового возраста. Особенности межличностных отношений в подростковом возрасте Подростковый возраст 10-16 лет. Четких границ нет (13-16 мальчики и 12-15 девочки). Относится к числу переходных и критических периодо...
2600. Моя професія - бухгалтер. Професійна орієнтація 190 KB
  Професійна орієнтація — система організації та проведення навчально-виховної роботи, спрямованої на засвоєння студентами необхідних знань про соціально-економічні і психофізіологічні умови правильного вибору професії, формування у них уміння аналізувати вимоги професії до психологічної структури особистості
2601. День Соборності України – день єднання народу 42.08 KB
  Психолого-педагогічне обґрунтування обрання теми та форми виховного заходу. Було обрано тему День Соборності України – день єднання народу у формі класної години. Необхідність проведення заходу виникла  у зв’язку зі святом 22 січня...
2602. Внеклассное мероприятие по теме Весна пришла 88.61 KB
  Форма проведения: соревнование двух команд Цели: развитие памяти, внимания, наблюдательности, смекалки, активизация мыслительной деятельности, формирование у учащихся навыков самостоятельной работы; воспитание духа соревнования, честности, целе...
2603. Защитники Родины 28.24 KB
  Тема: Защитники Родины. Форма проведения: игра-соревнование; Цель: расширить представление детей об общенародном празднике, посвященном вооруженным Силам России, воспитывать у них любовь к защитникам Отечества и к своей Родине, создать атмосферу п...
2604. Масленица. Воспитательное мероприятие 29.91 KB
  Цели: Познакомить учащихся с русскими традициями масленичной недели. Задачи: -  Воспитывать уважение и интерес к культурному наследию нашей страны.- Формировать у учащихся чувства коллективизма и взаимопомощи, дисциплинированности. Материалы и ...
2605. Основы денежно-кредитного регулирования экономики 280 KB
  ТЕМА 1. Основы денежно-кредитного регулирования экономики Введение в курс Денежно-кредитное регулирование экономики. Денежный оборот и его структура Основные потоки денег в экономике Инфляция как социально-экономический процесс: понятие, причины...
2606. Изучение маятника максвелла 52.11 KB
  Изучение маятника максвелла Цель работы: определение основных характеристик маятника Максвелла. Приборы и принадлежности: установка FPM-03, набор колец, штангенциркуль. Краткие теоретические сведения Движение твёрдого тела можно рассматривать как дв...
2607. Изучение движения маятника максвелла 119.5 KB
  Цель работы: ознакомление со сложным движением твердого тела на примере маятника Максвелла: экспериментальное определение момента инерции тел вращения. МЕТОДИКА ЭКСПЕРИМЕНТА Маятник Максвелла представляет собой однородный металлический диск, в серед...