Основы работы с 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 class="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>


Содержание раздела