Основы работы с CSS


Примеры


  1. Этот пример показывает, как задать цвет текста.

    <html>

    <head> <style type="text/css"> p {color: green} ul {color: #dda0dd} ol {color: rgb(0,0,255)} </style> </head>

    <body> <ul> <li>список ul<li> </ul> <ol> <li>список ol</li> </ol> <p>это параграф</p> </body>

    </html>

  2. Этот пример показывает, как задать фоновый цвет части текста.

    <html> <head> <style type="text/css"> span.back { background-color: gray } </style> </head>

    <body> <p> Данный текст содержит определение, фон которого выделен. <span class="back">Это определение.</span> </p> </body> </html>

  3. Данный пример показывает, как увеличить или уменьшить интервал между символами.

    <html>

    <head> <style type="text/css"> p {letter-spacing: 1cm} li {letter-spacing: 5px} </style> </head>

    <body> <p>параграф</p> <ol> <li>элемент списка</li> </ol> </body>

    </html>

  4. Данный пример показывает, как выравнивать текст.

    <html> <head> <style type="text/css"> ol {text-align: center} ul {text-align: left} dl {text-align: right} </style> </head>

    <body> <ol> <li>список ol</li> <li> список ol</li> <li> список ol</li> </ol> <ul> <li> список ul</li> <li> список ul</li> <li> список ul</li> </ul> <dl> <dt> список <dd>dl dl dl</dd></dt> <dt> список <dd>dl dl dl</dd></dt> <dt> список <dd>dl dl dl</dd></dt> </dl> </body> </html>

  5. Этот пример показывает, как можно оформить текст.

    <html> <head> <style type="text/css"> a {text-decoration: underline} ul {text-decoration: overline} ol {text-decoration: line-through} </style> </head>




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



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