| Оплата и обучение |
Преподаватель
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: свободно
Лекция 5:
Шрифты в CSS
Аннотация: Приводятся примеры работы со шрифтами, общие способы и методы применения шрифтов, их характеристики и атрибуты.
Ключевые слова: css, шрифт, семейство шрифта, CSS1, браузер, Internet, font-variant, 'font-size-adjust', 'font-stretch', narrow, condenser, SEMI, oblique, cursive, 'fantasy', monospace
Параметры шрифтов в CSS определяют шрифт текста.
Примеры:
- Этот пример показывает, как задать шрифт текста.
<html> <head> <style type="text/css"> h1 {font-family: courier} h2.font {font-family: sans-serif} pre {font-family: times} </style> </head> <body> <pre>применяется шрифт "times"</pre> <h1>заголовок h1</h1> <h2 class="font">заголовок h2</h2> </body> </html> - Этот пример показывает, как задать размер шрифта.
<html> <head> </head> <body> <ol style="font-size: 200%"> <li>first</li> <li>second</li> </ol> <p style="font-size: 80%">текст параграфа</p> <ul style="font-size: 60%"> <li>first</li> <li>second</li> </ul> </body> </html>
- Этот пример показывает, как задать стиль шрифта.
<html> <head> <style type="text/css"> ol {font-style: normal} ul {font-style: oblique} p {font-style: italic} </style> </head> <body> <p>Текст параграфа. Текст параграфа. Текст параграфа.</p> <ol> <li>первый пункт</li> <li>второй пункт</li> <li>третий пункт</li> </ol> <ul> <li>первый пункт</li> <li>второй пункт</li> <li>третий пункт</li> </ul> </body> </html> - Этот пример показывает, как задать вариант шрифта.
<html> <head> </head> <body> <h1 style="font-variant: small-caps">Заголовок h1</h1> <h2 style="font-variant: small-caps">Заголовок h2</h2> </body> </html>
- Этот пример показывает, как задать степень жирности шрифта.
<html> <head> <style type="text/css"> h1.first {font-weight: 800} h2.second {font-weight: bold} h3.third {font-weight: 900} </style> </head> <body> <h1 class="first">заголовок h1</h1> <h2 class="second">заголовок h2</h2> <h3 class="third">заголовок h3</h3> </body> </html> - Этот пример показывает, как использовать сокращенную запись для задания всех свойств шрифта в одном объявлении.
<html> <head> <style type="text/css"> p { font: oblique small-caps bold -5px serif } </style> </head> <body> <p>параграф параграф параграф параграф параграф параграф</p> </body> </html>
