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

    Содержание    Вперед