рефераты конспекты курсовые дипломные лекции шпоры

Раздел Информатика
/
Шрифты в CSS

Реферат Курсовая Конспект

Выберите учебное заведение

Шрифты в CSS

Шрифты в CSS - раздел Информатика, ОСНОВЫ CSS Рассмотрим Основные Свойства Шрифтов: Font-Family Fon...

Рассмотрим основные свойства шрифтов:

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

Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам, объединяются в семейства. Рассмотрим три основных семейства:
Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";
Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ;
Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";

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

Правило: "Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки".

h1 {font-family: verdana, arial, sans-serif;} p {font-family: "Times New Roman", serif;}

Т.е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. Надпись из примера выше -
h1 {font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif .

Свойство FONT-STYLE

Данное свойство задает стиль шрифта. Может принимать три значения:

normal - обычный;
italic - курсивный;
oblique - наклонный;

У вас может возникнуть вопрос: "чем отличается курсивный от наклонного?" , - дело в том, что значение italic означает использование встроенного в шрифт курсивного начертания. Ведь почти каждый шрифт включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном.
А значение oblique- это искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол.

h1{ font-family: verdana, arial, sans-serif; font-style:normal; } h2{ font-family: verdana, arial, sans-serif; font-style:italic ; } h3{ font-family: verdana, arial, sans-serif; font-style:oblique; }

Свойство FONT-VARIANT

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

normal - значение по умолчанию, текст отображается обычным образом.
small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.

Т.е. как видите большие(заглавные буквы) остаются без изменений, а маленькие - представляют собой полную копию заглавных букв, только слегка меньшего размера.

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

Пример записи стиля:

h1{ font-family: verdana, arial, sans-serif; font-variant:small-caps; } h2{font-family: verdana, arial, sans-serif;}

Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal - обычный иbold - жирный. Некоторые браузеры поддерживают числовые значения: 100, 200, 300, 400, 500, 600, 700, 800, 900. Для справки: 400 равносильно normal, а 700 - bold . Но пользоваться числами не рекомендуется!

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

Свойство FONT-SIZE

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

h1 { font-family: arial, verdana, sans-serif; font-size: 18px; } h2{ font-family: arial, verdana, sans-serif; font-size: 36px; color: red; }

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

Сокращенная запись. Свойство FONT

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

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

font-style_ font-variant_font-weight_font-size_font-family

Например:

P{
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

А теперь то же самое в краткой форме:

P{ font : italic normal bold 30px arial,sans-serif; }

Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

Развернуть

Открыть в широком формате

– Конец работы –

Эта тема принадлежит разделу:

ОСНОВЫ CSS

Комментарии используются чтобы пояснить ваш код и могут помочь вам когда вы будете редактировать исходный код позже Комментарии игнорируются... CSS комментарий начинается с quot quot и заканчивается quot quot... Это комментарий p text align center Это другой комментарий color black font family arial...

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

Что будем делать с полученным материалом:

Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Все темы данного раздела:

ОСНОВЫ CSS
CSS - Cascading Style Sheets - в переводе Каскадные таблицы стилей. CSS значительно облегчает и автоматизирует создание веб-сайтов. Каскадные таблицы стилей открывают совершенно н

Синтаксис и принцип работы CSS
CSS имеет строго определенный синтаксис, т.е. правила, по которым создаются таблицы стилей. В CSS, в отличие от HTML, нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей в CSS я

Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

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

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

Порядок соединения
Какой стиль будет использоваться, когда указано более одного стиля для HTML элемента? Вообще говоря, можно сказать, что все стили "сольются" в новую "фактическую" табли

Цвет и фон в CSS
Цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.) Основными свойствами цвета

Все Фоновые Свойства CSS
Свойство Описание background Устанавливает все фоновые свойства в одном объявлении background-attachment

Все CSS Свойства Шрифта
Свойство Описание font Устанавливает все свойства шрифта в одном объявлении font-family Устанав

Текст в CSS
В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста. text-align text-decoration text-indent text-transform letter

Все Текстовые Свойства CSS
Свойство Описание color Устанавливает цвет текста direction Устанавливает направление текста/на

Списки в CSS
Рассмотрим основные свойства CSS, отвечающие за внешний вид списков. Ø list-style-type Ø list-style-position Ø list-style-image &Osla

Все CSS Свойства Списка
Свойство Описание list-style Устанавливает все свойства списка в одном объявлении list-style-image

Типы селекторов в CSS
Селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS . Селектор по элементу; Селект

Границы Таблиц
Чтобы указать границы таблиц в CSS, используйте свойство border. Пример ниже указывает черную границу для элементов table, th, и td: table,th,td { border:1px solid black

Выравнивание Текста Таблицы
Текст в таблице выравнивается с помощью свойств text-align и vertical-align. Свойство text-align указывает горизонтальное выравнивание, например, по левому краю (left), по правому краю (ri

Цвет Таблицы
Пример ниже указывает цвет границ, текста и фона элементов th: table, td, th { border:1px solid green; } th { background-color:green; color:white; }

Блоковая модель в CSS
В html различают элементы блочные и строчные. Причем блочные элементы - это отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемент

Рамки в CSS
Давайте в этом уроке поговорим о рамках. Основные свойства рамок в CSS следующие: border-width border-color border-style Сокращенна

PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.
И давайте сразу посмотрим примерчик: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат: .p1 { background-color :

WIDTH - свойство устанавливающее ширину блока;
Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др. Теория - теорией, но давайте практико

Позиционирование блоков
Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, спи

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

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