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




Начало    Вперед



Книжный магазин