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


    <body> <ol> <li>первое</li> <li>второе</li> <li>третье</li> </ol> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <p><a href="http://www.intuit.ru/">www.intuit.ru</a></p> </body>
    </html>
  6. Этот пример показывает, как сделать отступ для первой строки параграфа.
    <html> <head> </head>
    <body> <p> параграф<br> <p style="text-indent: 2cm;"> параграф<br> <p style="text-indent: 4cm;"> параграф<br> </p> </body>
    </html>
  7. Данный пример показывает, как управлять регистром символов в тексте.
    <html> <head> </head>
    <body> <pre style="text-transform: uppercase;">Верхний регистр</pre>
    <p style="text-transform: lowercase;">Нижний регистр</p>
    <pre style="text-transform: capitalize;">первые буквы в словах заглавные</p> </body>
    </html>


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