Порядок выполнения работы. Раздел 1. Свойства шрифтов

2015-12-15

468

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 11 12 13 14 151617 18 19 20 Следующая ⇒

Раздел 1. Свойства шрифтов

Конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств:

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

Свойство font-family

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name

Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".

Generic family

Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:

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

Задание 9.1

Измените содержание выше созданных файлов, сохраните их под новыми именами и просмотрите результат в браузере

default9_1.htm:

<html> <head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style9_1.css" /> </head> <body> <h1>Заголовок1</h1> <p>CSS это язык стилей, определяющий отображение HTML-документов. Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого. </p><h2> Заголовок2- имеет совсем другой вид!!!</h2><p>Заголовки второго уровня отображаются шрифтом "Times New Roman" . Если он не установлен на пользовательской машине, будет использоваться шрифт семейства serif, шрифт с засечками.</p> </body></html>

style9_1.css:

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

Свойство font-style

Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2> будут показаны курсивом italic.

Задание 9.2

Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите результат в браузере

default9_2.htm:

<html>

<head>

<title>Мой документ</title>

….. остальное без изменений

style9_2.css:

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;font-style: italic;}

Свойство font-variant

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Смотрите примеры:

Задание 9.3

Default9_3.htm:

<html>

<head>

<title>Мой документ</title>

</head>

<body>

<h1>Примеры использования Сss</h1>

<p>CSS это язык стилей, определяющий отображение HTML-документов.

Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной,

фоновыми изображениями, позиционированием элементов и многими другими вещами.

HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

</p>

<h2> Примеры использования Сss</h2>

<p>

Нормальная форма отображения

</p>

</body>

</html>

Style9_3.css:

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

Свойство font-weight

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

Задание 9.4

Default9_4.htm:

<html>

<head>

<title>Мой документ</title>

</head>

<body>

<h1>Примеры использования Сss</h1>

<p>CSS это язык стилей, определяющий отображение HTML-документов. Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

</p>

<h2> таблица</h2>

<tr>

<td>левая верхняя ячейка</td><td>правая верхняя ячейка</td>

</tr>

<tr>

<td>левая нижняя ячейка</td><td>правая нижняя ячейка</td>

</tr>

</table>

</body>

</html>

Style9_4.css:

p {font-family: arial, verdana, sans-serif;}

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

Свойство font-size

Размер шрифта устанавливается свойством font-size.

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. Проценты определяют размер шрифта относительно высоты символов, принятых по умолчанию.

Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Задание 9.5

Default9_5.htm:

<html>

<head>

<title>Мой документ</title>

</head>

<body>

<h1>Примеры использования Сss</h1>

</p>

<h2> таблица</h2>

<tr>

<td>левая верхняя ячейка</td><td>правая верхняя ячейка</td>

</tr>

<tr>

<td>левая нижняя ячейка</td><td>правая нижняя ячейка</td>

</tr>

</table>

<h3> Заголовок3<h3>

</body>

</html>

Style9_5.css:

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

2015-12-15

468

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 11 12 13 14 151617 18 19 20 Следующая ⇒

Обсуждение в статье: Порядок выполнения работы. Раздел 1. Свойства шрифтов

Обсуждений еще не было, будьте первым... ↓↓↓