Курс "WEB-master" модуль WEB-1 - занятие 9

Выбор занятия

Выберите текущее занятие

Все материалы предоставлены в образовательных целях. Для пополнения базы материалов или цитат присылайте свои тексты на эл. почту (внизу страницы).

CSS

Свойства шрифтов

Возможность управлять шрифтом - меняете ли вы его семейство, кегель или толщину - позволяет увеличить блеск и неповторимость WEB-страниц.
Для начала немного информации о понятиях шрифтов:

Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.
Family-name - Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma". Generic family - Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".
Разницу можно также проиллюстрировать так:
При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.

Свойство стиля Описание свойства Значения Значение по умолчанию
font-family Гарнитура шрифта список имен шрифтов, перечисленных через запятую в порядке убывания предпочтения; список может заканчиваться одним из родовых имен:
serif (с засечками, "антиква"),
sans-serif
(без засечек, "рубленый"),
cursive (курсив),
fantasy
(аллегорический),
monospace (моноширинный)
 
font-size Размер шрифта

размер,
процент,

xx-small,x-small, small, medium, large, x-large, xx-large,
larger, smaller

medium
font-style Начертание шрифта normal, italic (курсив), oblique (наклонный) normal
font-weight Насыщенность шрифта число от 100 до 900 (кратное 100),
normal, bold, bolder, lighter
normal
font-variant Может задать вывод капителью (символами, похожими на прописные, но малого размера); капитель есть не во всяком шрифте normal, small-caps (капитель) normal
font-stretch Задание нормального, разреженных (expanded) или сжатых (condensed) начертаний из текущей гарнитуры шрифта normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded normal
font Стенографическое свойство для одновременного задания нескольких свойств шрифта

список свойств шрифта, разделенных пробелами, в следующем порядке:
font-style,
font-variant,
font-weight,
font-size,
line-height,
font-family

 

Стенографические свойства (shorthand properties ) позволяют одновременно задать несколько свойств; значения свойств в списке разделяются пробелами. Например:

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit
p { font: 12pt/10pt sans-serif; }
	

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

Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.
  • caption - Шрифт для текста элементов форм вроде кнопок.
  • icon - Шрифт для текста под иконками.
  • menu - Шрифт применяемый в меню.
  • message-box - Шрифт для диалоговых окон.
  • small-caption - Шрифт для подписей к небольшим элементам управления.
  • status-bar - Шрифт для строки состояния окон.




Свойства текста

Свойство стиля Описание свойства Значения Значение по умолчанию
text-indent Отступ первой строки текста в блоке

размер,
процент
(относительно ширины блока)

0
text-align Выравнивание текста left, right, center, justify  
text-decoration Декорирование текста none (нет),
underline
(подчеркнутый),
overline
(надчеркнутый),
line-through
(перечеркнутый),
blink
(мерцающий)
none
text-shadow Эффекты затенения текста

none ,
список эффектов затенения, перечисляемых через запятую;
каждый эффект представлет собой набор из максимум четырех разделенных пробелами элементов, любой из которых можно опустить:
цвет размер1 размер2 размер3
цвет
- цвет тени;
размер1 - смещение тени по горизонтали;
размер2 - смещение тени по вертикали;
размер3 - радиус размытия тени

none
letter-spacing Межсимвольное расстояние размер,
normal
normal
word-spacing Расстояние между словами размер,
normal
normal
text-transform Преобразование текста none,
capitalize
(первая буква каждого слова заглавная),
uppercase (все буквы заглавные),
lowercase
(все буквы строчные)
none
line-height
Межстрочный интервал normal ,
число,
размер,
процент
(относительно размера текущего шрифта)
normal
white-space Способ обработки символов пустого пространства внутри блока normal,
pre
(не изменять символы пустого пространства ),
nowrap
(не разрывать строку)
normal




Свойства ссылок

<!doctype html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Ссылки</title>
	<style type="text/css">
		A:link { 
			text-decoration: none; /* Убирает подчеркивание для ссылок */
		} 
		A:visited { text-decoration: none; } 
		A:active { text-decoration: none; }
		A:hover {
			text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
			color: red; /* Цвет ссылки */
		} 
	</style>
</head> 
<body>
	<p><a href="1.html">Пример ссылки</a></p>
</body> 
</html>	

Свойства display, visibility и clip в сочетании с скриптами, а так же псевдоэлементами позволяют достичь весьма интересных результатов.