-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Все на карте

 -Поиск по дневнику

Поиск сообщений в Net-man

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.04.2010
Записей: 814
Комментариев: 5985
Написано: 11575


CSS: Урок 2. Шрифт в CSS | Виды и семейства шрифтов

Суббота, 04 Декабря 2010 г. 13:28 + в цитатник

Определяем CSS шрифт с засечками и без засечек

Существует множество видов шрифтов, которые образуют, так называемые, семейства:

 

  • Verdana, Geneva, sans-serif
  • Times New Roman, Times, serif
  • Courier New, Courier, monospace
  • Tahoma, Geneva, sans-serif
  • Arial, Helvetica, sans-serif

CSS шрифт – семейства шрифтов:

font-family: Pезультат
Verdana, Geneva, sans-serif Семейство шрифтов без засечек
Arial, Helvetica, sans-serif Семейство шрифтов без засечек
'Times New Roman', Times, serif Семейство шрифтов с засечками
'Courier New', Courier, monospace Семейство моноширинных шрифтов

Verdana, Geneva, sans-serif — семейство шрифтов без засечек:

E

Times New Roman, Times, serif — семейство шрифтов с засечками:

E

Courier New, Courier, monospace — семейство моноширинных шрифтов:

E

Еще пример по форматированию шрифта:

<head>
<title>Пример</title>
<style type="text/css">
p {
font-family:'Times New Roman', Times, serif;
font-weight:bold;
font-size:18px;
font-style:italic
}
</style>
</head>
<body>
<div>Обычный текст</div>
<p>
Текст полужирный, размером 18 пикселей, наклонный, семейства Times New Roman
</p>
</body>

Результат: шрифт, отформатированный при помощи CSS

В примере выше стилевые описания распространяются на параграфы данного документа. Атрибут font-family: содержит три различных шрифта, одного семейства (с засечками). Указывать их можно в различном порядке, но будет применен первый или второй если браузер не сможет найти на компьютере пользователя установленный первый шрифт, или третий, если программа браузера не прочтет первые два. При написании кода, название, состоящее из нескольких слов выделяется кавычками, например, 'Times New Roman'.

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

Шриф sans-serif является представителем семейства шрифтов без засечек. К нему относятся Verdana, Geneva и другие. Если прописать код: font-family: sans-serif — программа браузера выберет на компьютере пользователя один из шрифтов без засечек, например, Verdana. Если обозначить: font-family: serif — будет выбран шрифт семейства с засечками, например, Times. CSS aтрибут со значением font-family: monospace — установит моноширинный шрифт, к примеру, Courier New.

CSS aтрибут font-family: определит, выбранный вами, вид шрифта. Можно установить свой шрифт, но нет ни какой гарантии, что он будет присутствовать на компьютере пользователя. Если его там не окажется, программа браузера не сможет правильно интерпретировать, указанный вами, шриф.

CSS шрифт | Курсивный, полужирный шрифт

Определим курсивный шрифт:

CSS атрибут со значением style="font-style:italic" определяет курсивный шрифт.

Определим полужирный шрифт:

CSS ключение style="font-weight:bold" определяет полужирный шрифт.

Определим нормальный объем шрифта:

Строчка style="font-weight:300" преобразует полужирный шрифт в обычный.

Продолжение в следующем уроке.

Рубрики:  Полезное
Уроки CSS
Метки:  

Процитировано 2 раз

Millio   обратиться по имени Воскресенье, 05 Декабря 2010 г. 10:13 (ссылка)
Приятного воскресенья! Спасибо за материалы!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 06 Декабря 2010 г. 09:37ссылка
Millio, привт! Отличной недели)
MIGDA   обратиться по имени Четверг, 09 Декабря 2010 г. 19:29 (ссылка)
Благодарю!!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 09 Декабря 2010 г. 20:07ссылка
MIGDA, не за что!:give_rose
Millio   обратиться по имени Вторник, 21 Декабря 2010 г. 13:49 (ссылка)
М-да, вот сейчас эти знания мне и пригождаются, хотя женскому мозгу сложно понять все тонкости html и CSS...
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку