Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Конспекты / Лекционный и практический материал по теме "Форматирование текста с помощью CSS"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Лекционный и практический материал по теме "Форматирование текста с помощью CSS"

библиотека
материалов

Практическая работа №2
Форматирование текста

Задание 1

Выравнивание текста


h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

hello_html_m4d57767d.png


Задание 2

Преобразование букв текста, оформление текста.

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

hello_html_7c0c8326.png

Задание 3

Красная строка. Разреженный и уплотненный шрифт.

p {;}

h1 {letter-spacing:2px;}

h2 {letter-spacing:-3px;}

hello_html_49c07d7e.png

Задание 4

Направление текста. Расстояние между словами.

div.ex1 {direction:rtl;}

p

{

word-spacing:30px;

}

hello_html_4c747f4.png

Добавить абзац, где будет запрет на перенос по строкам.


Задание 5

Создать документ, в котором будут вставлены изображения относительно текста, по верху текста и по низу текста. Используя img.top и img.bottom 


hello_html_30f38c9a.png


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Краткое описание документа:

Цвет текста

Свойство color используется для определения цвета текста. Цвет может быть задан с помощью:

·  названия, например, "red"

·  кода RGB, например, "rgb(255,0,0)"

·  шестнадцатиричного кода, например, "#ff0000"

Цвет текста для всей страницы задается в селекторе body.

Пример

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Совет: в соответствии со стандартами W3C если вы указали цвет текста, вы должны указать также цвет фона.

Выравнивание текста

Свойсто text-align отвечает за выравнивание текста по горизонтали.

Текст можно выровнять по центру, по правому/левому краю или по ширине.

Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах), а выравнивание текста достигается изменением пробелов между словами:

Пример

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Оформление текста

Свойство text-decoration используется для настройки оформления текста.

Обычно свойство text-decoration используют для удаления подчеркивания ссылок:

Пример

a {text-decoration:none;}

Кроме того, это свойство может быть использовано для оформления простого текста:

Пример

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Совет: не рекомендуется подчеркивать текст, не являющийся ссылкой, так как это вводит в заблуждение пользователей сайта.

Преобразование текста

Свойство text-transform используется для преобразования текста в строчные или заглавные буквы.

Это свойство можно использовать для того, чтобы преобразовать все буквы текста в заглавные/строчные буквы, или изменить первые буквы каждого слова на заглавные (капитализация):

Пример

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

  Красная строка

В CSS есть свойство, которое может автоматически выводить красную строку в параграфах. Это свойство называется text-indent:

Пример p {text-indent:50px;}
Автор
Дата добавления 10.03.2015
Раздел Информатика
Подраздел Конспекты
Просмотров220
Номер материала 435957
Получить свидетельство о публикации
Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх