Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 5:

Шрифты в CSS

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >
Аннотация: Приводятся примеры работы со шрифтами, общие способы и методы применения шрифтов, их характеристики и атрибуты.

Параметры шрифтов в CSS определяют шрифт текста.

Примеры:

  1. Этот пример показывает, как задать шрифт текста.
    <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>
  2. Этот пример показывает, как задать размер шрифта.
    <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>
  3. Этот пример показывает, как задать стиль шрифта.
    <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>
  4. Этот пример показывает, как задать вариант шрифта.
    <html>
    <head>
    </head>
    
    <body>
    <h1 style="font-variant: small-caps">Заголовок h1</h1>
    <h2 style="font-variant: small-caps">Заголовок h2</h2>
    </body>
    
    </html>
  5. Этот пример показывает, как задать степень жирности шрифта.
    <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>
  6. Этот пример показывает, как использовать сокращенную запись для задания всех свойств шрифта в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    p
    {
    font: oblique small-caps bold -5px serif
    }
    </style>
    </head>
    
    <body>
    <p>параграф параграф параграф параграф параграф параграф</p>
    </body>
    
    </html>
< Лекция 4 || Лекция 5: 12345 || Лекция 6 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия