"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка сайта
Примеры PHP
Графика
Оптимизация сайта
Полезное
Реклама на сайте:






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


папка digest

Урок №7

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

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

В данном уроке мы рассмотрим CSS свойства, которые позволят работать непосредственно с web-документом и с его элементами - создавать, изменять, убирать определённые свойства, придающие внешний вид.

В качестве примера работы CSS свойств используем текст и попробуем его изменить: цвет, размер, положение, шрифт и тд. Практически на каждом сайте текст определённым образом декорируется для того, чтобы он был читабельным и не вызывал у пользователя раздражения.
Например, сделать заголовки другим цветом, ключевые фразу выделять жирным шрифтом и так далее, и тому подобное.

Итак, приступим!

font-size

font-size - это свойство, которое определяет размер текста, относительной указанной единицы измерения. Самое используемое свойство для работы с текстом.

Существует несколько принятых видов измерения шрифта: px, pt, em, % и прочее.

Стандарт W3 (WorldWideWeb) рекомендует к использованию для вывода на экран лишь указывать px, em, % .

Пример кода CSS:

#fs1em {
  font-size: 1em;
}

text-decoration

text-decoration - это свойство предназначено для декорации текста и имеет пять значений.

Список установленных значений:

1. none - декорация отсутствует.

2. blink - делает мигающий текст.

3. line-through - перечёркивает текст.

4. overline - создаёт линию над текстом.

5. underline - подчёркивает текст. Как правило, используется для обозначения ссылок.

Значение underline используется чаще всего для обозначения ссылок - элементов <a>.

В примере ниже у всех ссылок в документе убирается заданное им по умолчанию нижнее подчёркивание, но при наведении на них курсором оно заново появляется.

Пример кода CSS:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

font-weight

font-weight - это свойство, которое отвечает за насыщенность текста то есть, жирность его начертания. В качестве значений имеются величины от 100 до 900 с интервалом в 100, то есть 100, 200, 300 ... 900. Где 900 — жирное начертание, 100 — соответственно светлое начертание.

Список установленных значений:

1. normal - стандартное, обычное начертание.

2. bolder - жирное начертание.

3. bold - полужирное начертание.

4. lighter - светлое начертание.

Пример кода CSS:

#bold {
  font-weight: bold;
}

Как уже упомяналось ранее, помимо установленных значений можно использовать числовые единицы.

Пример кода CSS:

#bold {
  font-weight: 900;
}

font-style

font-style - это свойство, определяющее тип написания текста: стандартное, наклонное или курсивное.

Список установленных значений:

1. normal - обычное начертание текста. (Стандартное).

2. italic - курсивное начертание.

3. oblique - наклонное начертание.

Пример кода CSS:

#italic{
  font-style: italic;
}

Если разница между наклонным текстом и курсивными символами для вас не очень велика, просто выберите один из этих вариантов. Если же она имеет для вас значение, придется протестировать различные сочетания шрифтов и браузеров для достижения лучшего результата.

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



font-color

font-color - это свойство служит для изменения цвета текста.

Для изменения фона вокруг текста используют значение background-color. Значения в обоих свойствах задается тремя способами: название цвета (white, blue, black, yellow и др.), шестнадцатеричное значение (белый - #FFFFFF, черный - #000000, красный - FF0000), либо с помощью RGB;

Пример кода CSS:

h1{color:#001B99;}
span{background-color:#2200CC; color:white;
}



 Следующий урок будет посвящён отступам и полям в CSS.

 



Создано: 31.05.2020.|Обновлено: 15.12.2022.