Презентация по предмету информатика на тему "Форматирование содержимого в CSS"

ТЕМА

Форматирование содержимого в CSS

1

Шрифты в CSS

Font-style

Описание:

стиль элемента. Курсивный или обычный

Возможные значения:

[1] normal - без изменений

[2] italic - курсив

Пример:

h1 {font-style:italic;}

Шрифты в CSS

Font-variant

Описание:

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра.

Пример:

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

Вид в браузере:

Шрифты в CSS

Font-weight

Описание:

выделение (жирность) элемента

Возможные значения:

[1] normal - без изменений

[2] bold - жирный

[3] bolder - очень жирный

[4] lighter - тонкий

[5] любое значение от 100 до 900

Пример:

p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Вид в браузере:

Шрифты в CSS

Font-size

Описание:

размер шрифта. Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em‘ (ширина буквы m) - относительные.

Возможные значения:

[1] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений

[2] smaller, larger - любое из этих значений

Пример:

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

Вид в браузере:

Шрифты в CSS

Font-family

Описание:

Это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя. Заголовки будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

Пример:

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

Вид в браузере:

Шрифты в CSS

Font

Описание:

обобщает вышеперечисленные свойства. Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле.

Возможные значения:

[1] font-family

[2] font-style

[3] font-variant

[4] font-weight

[5] font-size

Пример:

p { font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif; }

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

Используя сокращённую запись, код можно упростить:

p { font: italic bold 30px arial; }

Форматирование текста в CSS

Text-indent

Описание:

позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам

.

Пример:

p {text-indent: 30px;}

Форматирование текста в CSS

Text-decoration

Описание:

Пример:

"украшение" текста.

Возможные значения:

[1] none - нет

[2] underline - подчеркнутый

[3] overline - надчеркнутый

[4] line-through - перечеркнутый

[5] blink - мигающий

h1 {text-decoration: underline;}

h2 {text-decoration: overline;}

h3 {text-decoration: line-through;}

Вид в браузере:

Форматирование текста в CSS

Text-transform

Описание:

изменение текста.

Возможные значения:

[1] none - нет

[2] Capitalize - каждое слово начинается с большой буквы

[3] UPPERCASE - каждая буква текста становится заглавной

[4] lowercase - каждая буква текста становится маленькой

Пример:

h1 {text-transform: uppercase;}

li {text-transform: capitalize;}

Вид в браузере:

Text-align

Описание:

положение текста.

Возможные значения:

[1] left - текст слева

[2] right - текст справа

[3] center - текст по центру

[3] justify - текст по ширине

Пример:

th {text-align: right;}

td {text-align: center;}

p {text-align: justify;}

Вид в браузере:

Vertical-align

Описание:

позиционирование элементов по отношению к другим элементам стоящих в одном ряду.

Возможные значения:

[1] baseline [2] sub

[3] super [4] top-text

[5] top [6] middle

[7] bottom [8] bottom-text [9] процент

Пример:

Tr{vertical-align:top-text;}

Line-height

Описание:

отступ сверху.

Возможные значения:

[1] normal - без изменений

[2] длина (+)

[3] процент

Пример:

Td{line-height:40%;}

p{line-height:30px;}

Word-spacing

Описание:

расстояние между cловами.

Возможные значения:

[1] длина (+)

[2] normal - без изменений

Пример:

P{word-spacing:0.4em;}

h2{word-spacing:3px;}

Letter-spacing

Описание:

расстояние между буквами.

Возможные значения:

[1] длина (+)

[2] normal - без изменений

Пример:

h1 {letter-spacing: 6px;}

p {letter-spacing: 3px;}

Вид в браузере:

Практическое задание

• Создайте в своей папке Стих.html файл со следующим текстом:

Я помню чудное мгновенье…

Александр Сергеевич Пушкин

Я помню чудное мгновенье: Передо мной явилась ты, Как мимолетное виденье, Как гений чистой красоты. В томленьях грусти безнадежной В тревогах шумной суеты, Звучал мне долго голос нежный И снились милые черты.

Шли годы. Бурь порыв мятежный Рассеял прежние мечты, И я забыл твой голос нежный, Твои небесные черты.

Практическое задание

• Создайте в папке файл style.css , подключите его к веб-странице и определите стили оформления, перечисленные в следующих пунктах.
• Задайте свои цвета фона и текста. Текст должен хорошо читаться на выбранном фоне, причем фон должен быть светлый, а буквы – темнее.
• Определите класс и идентификатор и примените к заголовкам H1 и H2. Определите цвет заголовков ( H1 , H2 ), отличающийся от цвета основного текста и расположите заголовки по центру.
• Текст  первого заголовка идет с отступом от верхнего края веб-страницы на 60 px.

Практическое задание

• Создайте класс .new , применимый к первому куплету стихотворения и задайте для него: выравнивание по ширине; размер шрифта – 3em; жирный шрифт; гарнитуру шрифта – Arial ; начертание – курсив; подчеркнутый и чтобы каждое слово начиналось с большой буквы; с заданием «красной строки».
• Создайте класс .new1 , применимый ко второму куплету стихотворения и задайте для него: выравнивание по центру; размер шрифта – 40 px; очень жирный шрифт; гарнитуру шрифта – Verdana ; малые заглавные буквы; надчеркнутый; интервал между словами – 1em.
• Создайте класс .new2 , применимый к третьему куплету стихотворения и задайте для него: выравнивание по правому краю; размер шрифта – 16 pt; жирный шрифт со значением - 700; гарнитуру шрифта – Tahoma ; все строчные буквы; перечеркнутый ; интервал между буквами – 3 px.