My:CSS
Это конспект по основам задания стилей html документов.
Основы html
Html-документ состоит из головы=head (описание параметров) и тела=body (собственно документ):
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Заголовок документа</title> </head> <body> <h1>Заголовок</h1> <h2>Подзаголовок</h2> <p> Параграф, будет отделяться от следующего отступом. <b>Жирный шрифт.</b> <i>Курсивный шриф.</i> <small>Уменьшенный шрифтом.</small> <ul> <!-- если <ol>, то нумерованный список --> <li>Элемент списка</li> <li>Другой элемент списка</li> </ul> </p> Идёт переход на новую строку <br> <hr> <!-- горизонтальная линия --> <a href="http://synset.comm/">Cсылка на synset.com</a> <a href="http://synset.comm/" title="всплывающая лейбла ссылки">synset.com</a> <img src="net.jpg" alt="альтернативное описание" /> <!-- вставка картинки --> <img src="net.jpg" title="всплывающая лейба" /> <img src="net.jpg" width="32" height="32" /> <a href="http://synset.com"><img src="logo.png"></a> <!-- картинка, как ссылка --> <h1 id="head1">head 1</h1> <!-- задание внутренней ссылки --> <a href="#head1">go to head 1</a> <!-- переход внутри документа --> </body> </html>
Таблицы html
Простая таблицы из 2-х строк и 3-х столбцов
<table> <tr> <td>Cell 11</td> <td>Cell 12</td> <td>Cell 13</td> </tr> <tr> <td>Cell 21</td> <td>Cell 22</td> <td>Cell 23</td> </tr> </table> |
|
Определение cтилей CSS
Стили CSS служат для переопределения внешнего вида отображения html документа. Их можно включать непосредственно в параметры тега html документ, например для изменения на красный цвета фона документа:
<body style="background-color: #FF0000;">
или описанием стилей в заголовке документа (тэг style) внутри блока head:
<head> <style type="text/css"> body {background-color: #FF0000;} </style> </head>
или в качестве линка на файл стилей также внутри заголовка (предпочтительнее):
<head> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head>
Все три примера изменяют цвет фона документа на красный.