САМОУЧКА Сайт для тех, кто хочет научиться

Главная

О Нас

Публикации

Связь

Наши публикации

HTML для новичков

XHTML

CSS для новичков

CSS 3

JavaScript

< Предыдущая Следующая >

С помощью CSS Вы можете управлять шрифтом элементов.

Установка шрифта

CSS свойство font-family позволяет устанавливать шрифт для текста HTML элементов.

Обратите внимание: если название шрифта состоит из нескольких слов, то оно обязательно должно заключаться в кавычки.

Пример

p {font-family:Arial;}

Безопасные шрифты

Безопасными шрифтами называют шрифты, вероятность поддержки которых на любом компьютере с любой установленной ОС близка к 100%.

Список безопасных шрифтов:

• Arial
• Arial Black
• Courier New
• Comic Sans MS
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Пример

<p style='font-family:Arial;'>Демонстрация шрифта Arial.</p>
<p style='font-family:"Arial Black";'>Демонстрация шрифта Arial Black.</p>
<p style='font-family:"Comic Sans MS";'>Демонстрация шрифта Comic Sans MS.</p>
<p style='font-family:"Courier New";'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;'>Демонстрация шрифта Verdana.</p>

Обратите внимание: в CSS3 было добавлено новое свойство @font-face, позволяющее использовать на веб-страницах небезопасные шрифты. Узнать о данном свойстве больше можно здесь: CSS3 Учебник - Шрифт.

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

Резервные шрифты

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

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

Пример

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Times New Roman, если
на компьютере нет Times New Roman, то будет использован Arial  */
p {font-family:Verdana,"Times New Roman",Arial;}

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

В CSS шрифты делятся на следующие "семейства":

• Serif шрифты данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.
• Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.
• Monospace все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.
• Fantasy семейство "причудливых" шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact
• Cursive семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.

Пример

/* Если на компьютере пользователя нет шрифта Verdana, то будет использован Arial, если на компьютере нет Arial, то будет использоваться один из шрифтов
семейства Sans-Serif имеющихся на компьютере  */
p {font-family:Verdana,Arial,sans-serif;}

Размер шрифта

CSS свойство font-size устанавливает размер шрифта HTML элементов. Размер шрифта можно задать двумя способами:

Абсолютный способ

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

Данный способ позволяет задавать размер шрифта в абсолютных единицах таких как: пиксели (px) или проценты (%).

Пример

p.fz1 {font-size:20px;}
p.fz2 {font-size:30px;}
p.fz3 {font-size:13px;}

Относительный способ

Данный способ помогает избежать проблем с несоответствием при отображении страницы в разных браузерах, так как все размеры устанавливаются относительно.

Для задания размера шрифта данным способом используются единицы em. 1em эквивалентен размеру шрифта в браузере по умолчанию и равен 16px.

Обратите внимание: W3C рекомендует для задания шрифта использовать именно этот способ.

Пример

p.fz1 {font-size:1.2em;}
p.fz2 {font-size:1.5em;}
p.fz3 {font-size:1.15em;}

Обратите внимание: не используйте свойство font-size для того, чтобы оформлять абзацы как заголовки. Всегда используйте для определения абзацев тэги p, а для заголовков h1-h6.

Стиль шрифта

Свойство font-style позволяет сделать шрифт HTML элемента курсивным.

Свойство font-weight позволяет изменять толщину шрифта.

Пример

p.italic {font-style:italic;}
p.fz1 {font-weight:bold;}

Сделайте сами

Задание 1 оформите элементы согласно их описанию:

Пример

1. Данный абзац написан шрифтом Arial Black и имеет размер 20 пикселей.
2. Данный абзац написан курсивным шрифтом Courier New и имеет размер 24 пикселя.
3. Данный абзац написан жирным шрифтом Verdana и имеет размер 10 пикселей.
4. Данный абзац написан шрифтом Georgia и имеет размер 2.5em.
5. Данный абзац написан курсивным шрифтом Comic Sans MS и имеет размер 1.3em.

С помощью CSS Вы можете оформлять фон элементов.

Оформление фона в CSS

В CSS существует группа свойств для оформления фона HTML элементов:

• background-attachment
• background-color
• background-image
• background-position
• background-repeat

Цвет фона

CSS свойство background-color позволяет установить цвет фона для выбранного элемента.

Пример ниже делает цвет фона страницы зеленым:

Пример

body
{
background-color:green;
}

Цвет может быть задан следующими способами:

1. С помощью имени (например green задаст зеленый цвет);
2. С помощью RGB значения ('rgb(255,0,0)' задаст красный цвет);
3. С помощью шестнадцатеричного значения ("#0000ff" задаст синий цвет).

Изображение в качестве фона

С помощью CSS свойства background-image Вы можете вставить произвольное изображение в качестве фона.

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

Пример

body
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
}

Обратите внимание: всегда тщательно подбирайте цвета. Фоновое изображение не должно сливаться с текстом.

Повторяющееся изображение в качестве фона это не всегда, то что нужно.

CSS свойства background-repeat позволяет определить как должно повторяться фоновое изображение при вставке:

• background-repeat:repeat-x - изображение будет повторяться только по горизонтали;
• background-repeat:repeat-y - изображение будет повторяться только по вертикали;
• background-repeat:no-repeat - изображение не будет повторяться.

Пример

/* Фоновое изображение будет повторяться только по горизонтали */
body
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
background-repeat:repeat-x;
}

CSS свойство background-position позволяет задавать местоположение фонового изображения.

В качестве первого значения данного свойства должна задаваться величина смещения изображения по горизонтали, а в качестве второго величина смещения по вертикали.

Величина смещения может быть указана как с помощью пикселей (px), процентов (%) и сантиметров (cm) (background-position:50px 30px;), так и с помощью предопределенных ключевых слов (background-position:right top;).

Пример

body
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
background-repeat:no-repeat;
background-position:40px 60px;
}

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

Прикрепленное изображение будет оставаться на данном месте даже при прокрутке страницы.

Пример

/* Фоновая картинка будет оставаться на одном месте даже при прокрутке страницы */
body
{
background-image:url('http://www.wisdomweb.ru/editor/spider2.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top;
}

Краткая форма записи

Для того, чтобы сократить итоговый размер кода в CSS была предусмотрена краткая форма записи некоторых свойств.

Для краткой записи оформления фона элементов в CSS предусмотрено свойство background.

Пример

/* Фоновое изображение будет размещено в правом верхнем углу (в предыдущем примере
нам приходилось использовать 4 различных CSS свойства для того, чтобы сделать тоже
самое) */
body
{
background:url('http://www.wisdomweb.ru/editor/spider2.gif') no-repeat fixed right top;
}

При использовании стенографической формы записи соблюдайте следующий порядок следования свойств:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Обратите внимание: Вы можете пропускать неиспользуемые значения.

Список всех свойств оформления фона

Для того, чтобы узнать больше о желаемом свойстве щелкните по его названию.

Свойство	Описание	Значение
background	Устанавливает все возможные свойства фона за одно определение	background-color background-image background-repeat background-attachment background-position
background-attachment	Указывает будет ли фоновая картинка привязана к одному месту, или будет прокручиваться вместе с текстом.	scroll fixed
background-color	Устанавливает фоновый цвет элемента.	rgb(x,x,x) #xxx название_цвета
background-image	Устанавливает фоновую картинку для элемента	url(URL) none
background-repeat	Указывает как фоновая картинка будет повторяться	repeat repeat-x repeat-y no-repeat
background-position	Указывает координаты расположения фоновой картинки.	left top left center left bottom center top center center center bottom right top right center right bottom x% y% xpos ypos

Сделайте сами

Задание 1 вставьте картинку паучка и переместите ее в рамку (подробности в редакторе).

Пример

<div id='spidercont'>
<p id='text'>1. Вставьте в данный элемент картинку паучка <b>spider2.gif</b>
(картинка находится в папке редактора так что обращайтесь к ней просто по имени)
с помощью свойства <b>background-image</b>. Изображение при этом не должно повторяться.
</p>
</div>
<div id='spidersquare'>
2. Перенесите паучка в данную рамку с помощью свойства <b>background-position</b>.
При этом при прокрутке страницы изображение паука должно оставаться в рамке.
</div>

< Предыдущая Следующая >

Последние добавления

HTML для новичков

XHTML

CSS для новичков