- Главная
- Разное
- Образование
- Спорт
- Естествознание
- Природоведение
- Религиоведение
- Французский язык
- Черчение
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, фоны, картинки для презентаций
- Экология
- Экономика
Презентация, доклад на тему Форматирование текста в CSS
Содержание
- 1. Форматирование текста в CSS
- 2. Уметь применять основные свойства форматирования текста в css.Цель урока:
- 3. text-indenttext-aligntext-decorationletter-spacingtext-transform
- 4. СитуацияПотребовалась помощь магазину.на web странице требуется выполнить
- 5. Отступы [text-indent]Свойство text-indent позволяет выделить параграф с помощью установки
- 6. Выравнивание текста [text-align]CSS-свойство text-align соответствует атрибуту, используемому в старых
- 7. Декоративный вариант [text-decoration] подчёркнуты, - имеют черту над текстом,
- 8. Интервал между буквами [letter-spacing]Например, если вам необходимо 3px между
- 9. Трансформация текста [text-transform]capitalizeКапитализирует каждое слово. Например: "john
- 10. h1 { text-transform: uppercase; } li { text-transform: capitalize; } Пример
- 11. Итоги урока:text-indenttext-aligntext-decorationletter-spacingtext-transform
- 12. Дом.заданиеhttp://ru.html.net/tutorials/css/lesson6.php
- 13. Создать web страницу и выполнить след.заданияВ основном
Уметь применять основные свойства форматирования текста в css.Цель урока:
Слайд 4Ситуация
Потребовалась помощь магазину.
на web странице требуется выполнить несколько операций на текстом:
В
основном тексте выполнить отступы;
Заголовок переместить по середине;
Сделать интервал между буквами;
Также из строчных букв сделать ПРОПИСНЫЕ;
Заголовок переместить по середине;
Сделать интервал между буквами;
Также из строчных букв сделать ПРОПИСНЫЕ;
Слайд 5Отступы [text-indent]
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой
строки. В примере 30pxприменяется ко всем параграфам
:
p{
text-indent:40px;
}
Пример
![Отступы [text-indent]Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30pxприменяется ко всем параграфам :](/img/thumbs/9abc861210f1b7389c59836b97fd52ff-800x.jpg "Форматирование текста в CSS Отступы [text-indent]Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой")
Слайд 6Выравнивание текста [text-align]
CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может
быть выровнен left,right, centred или justify.
th{ text-align: right; }
td{ text-align: center; }
p{ text-align: justify; }
Пример
![Выравнивание текста [text-align]CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left,right, centred или justify. th{ text-align: right; }](/img/thumbs/a451e0b38a5592bf89df2729e7d4e824-800x.jpg "Форматирование текста в CSS Выравнивание текста [text-align]CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может")
Слайд 7Декоративный вариант [text-decoration]
подчёркнуты, - имеют черту над текстом, а
- перечёркнуты.
Пример
h1 {
text-decoration: underline; } h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h3 { text-decoration: line-through; }
![Декоративный вариант [text-decoration] подчёркнуты, - имеют черту над текстом, а - перечёркнуты. Пример h1 { text-decoration: underline; } h2 {](/img/thumbs/692453570d04a1e42562ea4e032ff59f-800x.jpg "Форматирование текста в CSS Декоративный вариант [text-decoration] подчёркнуты, - имеют черту над текстом, а - перечёркнуты. Пример h1")
Слайд 8Интервал между буквами [letter-spacing]
Например, если вам необходимо 3px между буквами в параграфах и 6px - в
заголовках , то используется такой код:
, то используется такой код:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Пример
![Интервал между буквами [letter-spacing]Например, если вам необходимо 3px между буквами в параграфах и 6px - в заголовках , то используется такой код: h1](/img/thumbs/3659bcf70eec62901443613bf3765aec-800x.jpg "Форматирование текста в CSS Интервал между буквами [letter-spacing]Например, если вам необходимо 3px между буквами в параграфах и 6px - в")
Слайд 9Трансформация текста [text-transform]
capitalize
Капитализирует каждое слово. Например: "john doe" станет "John Doe".
uppercase
Конвертирует
все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
lowercase
Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
none
Трансформации нет - текст отображается так же, как в HTML-коде.
lowercase
Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
none
Трансформации нет - текст отображается так же, как в HTML-коде.
![Трансформация текста [text-transform]capitalizeКапитализирует каждое слово. Например:](/img/thumbs/d78dd744fe74f3d325cbbdde332fdd3d-800x.jpg "Форматирование текста в CSS Трансформация текста [text-transform]capitalizeКапитализирует каждое слово. Например:")
Слайд 13Создать web страницу и выполнить след.задания
В основном тексте выполнить отступы;
Заголовок переместить
по середине;
Сделать интервал между буквами;
Также из строчных букв сделать ПРОПИСНЫЕ
Сделать интервал между буквами;
Также из строчных букв сделать ПРОПИСНЫЕ
