My:CSS — различия между версиями
WikiSysop (обсуждение | вклад) |
WikiSysop (обсуждение | вклад) (→Таблицы html) |
||
(не показано 46 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
− | + | Это конспект по основам задания стилей html документов. | |
+ | == Основы html == | ||
+ | Html-документ состоит из головы=head (описание параметров) и тела=body (собственно документ): | ||
<pre class="brush:html; gutter: false;"> | <pre class="brush:html; gutter: false;"> | ||
<html> | <html> | ||
Строка 5: | Строка 7: | ||
<head> | <head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> | <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> | ||
− | <title> | + | <title>Заголовок документа</title> |
</head> | </head> | ||
<body> | <body> | ||
− | <b>Жирный шрифт</b> | + | <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> | </body> | ||
</html> | </html> | ||
</pre> | </pre> | ||
+ | |||
+ | == Таблицы html == | ||
+ | Каждая строка окружена '''tr'''. Каждая ячейка '''td'''. Ячейки заголовка '''th''' (будут жирные). | ||
+ | Простая таблицы из заголовка, 2-х строк и 3-х столбцов | ||
+ | <table width="100%"><tr><td width="50%"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <th>Col1</th> <th>Col2</th> <th>Col3</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>C11</td> <td>C12</td> <td>C13</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>C21</td> <td>C22</td> <td>C23</td> | ||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | </pre> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | <td width="50%" align="center"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <table> | ||
+ | <tr> | ||
+ | <th>Col1</th> <th>Col2</th> <th>Col3</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>C11</td> <td>C12</td> <td>C13</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>C21</td> <td>C22</td> <td>C23</td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | </table> | ||
+ | |||
+ | * Атрибуты тега '''table''' | ||
+ | ** border="1" - толщина линий между ячейками | ||
+ | ** width="30%" - таблица занимает 30% ширины браузера | ||
+ | ** align="left" - выравнивание всей таблицы по горизонтали. Применим к '''tr''', '''td'''. Можно "center" или "right". | ||
+ | ** valign="top" - тоже самое по вертикали ("middle", "bottom") | ||
+ | |||
+ | Объединение ячеек: | ||
+ | <table width="100%"><tr><td width="50%"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <table border="1"> | ||
+ | <tr> <td colspan="3">C1</td> </tr> | ||
+ | <tr> <td>C2</td> <td>C3</td> <td>C4</td> </tr> | ||
+ | </table> | ||
+ | </pre> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | <td width="50%" align="center"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <table border="1"> | ||
+ | <tr> <td colspan="3">C1</td> </tr> | ||
+ | <tr> <td>C2</td> <td>C3</td> <td>C4</td> </tr> | ||
+ | </table> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | </table> | ||
+ | |||
+ | Объединение строк: | ||
+ | <table width="100%"><tr><td width="50%"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <table border="1"> | ||
+ | <tr> | ||
+ | <td rowspan="3" style="background-color:#ffffcc"> C1</td> <td>C2</td> | ||
+ | </tr> | ||
+ | <tr> <td>C3</td> </tr> | ||
+ | <tr> <td>C4</td> </tr> | ||
+ | </table> | ||
+ | </pre> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | <td width="50%" align="center"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <table border="1"> | ||
+ | <tr> | ||
+ | <td rowspan="3" style="background-color:#ffffcc"> C1</td> <td>C2</td> | ||
+ | </tr> | ||
+ | <tr> <td>C3</td> </tr> | ||
+ | <tr> <td>C4</td> </tr> | ||
+ | </table> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | </table> | ||
+ | |||
+ | == Формы == | ||
+ | Иерархический список выбора: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <select size="1"> | ||
+ | <optgroup label="Europe"> | ||
+ | <option>United Kingdom</option> | ||
+ | <option>Luxembourg</option> | ||
+ | </optgroup> | ||
+ | <optgroup label="Asia"> | ||
+ | <option>India</option> | ||
+ | <option>Dubai</option> | ||
+ | </optgroup> | ||
+ | </select> | ||
+ | </pre> | ||
+ | |||
+ | == Основы стилей == | ||
+ | |||
+ | HTML заботится о структуре информации, а CSS производит настройку внешнего вида (layout). Изменение шрифтов для текста в абзаце имеет вид: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <p style="font-size:20px;">Это размер 20</p> | ||
+ | <p style="font-family:courier;">Это шрифтом Courier</p> | ||
+ | <p style="font-size:20px; font-family:courier">Это шрифт Courier, размером 20</p> | ||
+ | </pre> | ||
+ | |||
+ | Стили можно задавать для различных элементов документа один раз в его заголовке внутри тега style: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | h1 {font-size: 30px; font-family: arial} | ||
+ | h2 {font-size: 15px; font-family: courier} | ||
+ | p {font-size: 8px; font-family: times new roman} | ||
+ | </style> | ||
+ | </head> | ||
+ | </pre> | ||
+ | |||
+ | Изменение фона : | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <h1 style="background-color: blue;">Заголовок на синем фоне<h1> | ||
+ | <body style="background-image: XXX;"> | ||
+ | </pre> | ||
+ | |||
+ | Плавающие картинки: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <img src="bill.jpg" style= "float:left;" /> <!-- слева--> | ||
+ | <img src="bill.jpg" style="position:absolute;bottom:50px;right:10px;" /> <!-- справа внизу --> | ||
+ | </pre> | ||
+ | |||
+ | <table width="100%"><tr><td width="70%"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <p style="padding:25px;border:1px solid red;"> | ||
+ | Текст в рамочке | ||
+ | </p> | ||
+ | </pre> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | <td width="30%" align="center"> | ||
+ | <!----------------------------------------------------------> | ||
+ | <p style="padding:25px;border:1px solid red;">Текст в рамочке</p> | ||
+ | <!----------------------------------------------------------> | ||
+ | </td> | ||
+ | </table> | ||
+ | |||
+ | == Способы задания cтилей CSS == | ||
Стили CSS служат для переопределения внешнего вида отображения html документа. | Стили CSS служат для переопределения внешнего вида отображения html документа. | ||
Строка 36: | Строка 222: | ||
</pre> | </pre> | ||
Все три примера изменяют цвет фона документа на красный. | Все три примера изменяют цвет фона документа на красный. | ||
+ | |||
+ | Внешняя таблица стилей это текстовый файл с расширением .css | ||
+ | |||
+ | == Основные свойства стилей == | ||
+ | |||
+ | === background === | ||
+ | |||
+ | * '''color''': #ff0000; - цвет переднего плана | ||
+ | * '''background-color''': #ffcc00; - цвет фона элемента | ||
+ | * '''background-image''': url("butterfly.gif"); - фоновые изображения | ||
+ | * '''background-repeat''': no-repeat; - картинки не размножаются или повторяются по горизонтали (repeat-x), по вертикали (repeat-y), по горизонтали и вертикали (repeat). | ||
+ | * '''background-attachment''': fixed; - фиксируется фоновый рисунок, или прокручивается вместе с содержимым (scroll) | ||
+ | * '''background-position''': right bottom; - положение фонового рисунка; " 2cm 2cm" - от левого верхнего угла; "50% 25%" - по центу и на четверть сверху | ||
+ | |||
+ | Свойства можно background объединять: | ||
+ | : background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; | ||
+ | |||
+ | === Font === | ||
+ | |||
+ | * '''font-family''': arial, verdana, sans-serif, "Times New Roman"; | ||
+ | * '''font-style''': italic; - кроме этого: normal, oblique | ||
+ | * '''font-weight''': bold; | ||
+ | * '''font-size''': 30px; - кроме этого: 12pt; 120%; 1em; Пиксели 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Для увеличения браузером шрифта стоит использовать '%' или 'em'. | ||
+ | |||
+ | Сокращённая запись для фонта: | ||
+ | : font: italic bold 30px arial, sans-serif; | ||
+ | |||
+ | === Text === | ||
+ | |||
+ | * p {'''text-indent''': 30px; } - отступ для первой строки абзаца | ||
+ | * td{'''text-align''': center;} - положение (left, right, centre, justify) | ||
+ | * '''text-decoration''': underline; - подчёркивание. Кроме этого: overline; line-through; | ||
+ | * '''letter-spacing''': 6px; - расстояние между буквами | ||
+ | * '''text-transform''': uppercase; - изменение текста. Ещё capitalize ("john doe" => "John Doe"), lowercase. | ||
+ | |||
+ | === Ссылки === | ||
+ | |||
+ | * '''a''' { color: blue; } - цвет | ||
+ | * '''a''' {text-decoration:none;} - отсутствует подчёркивание ссылки | ||
+ | * '''a:link''' { color: blue; } - цвет не кликнутой ссылки | ||
+ | * '''a:visited''' {color: red;} - цвет кликнутой ссылки | ||
+ | * '''a:active''' {background-color: #FFFF00;} - активная ссылка | ||
+ | * '''a:hover''' { color: orange; font-style: italic; } - мышь на ссылкой | ||
+ | |||
+ | Можно определять свои классы для стилей ссылок | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | a {color: blue;} | ||
+ | a.whitewine { color: #FFBB00; } | ||
+ | a.redwine { color: #800000; } | ||
+ | </pre> | ||
+ | и в документе задавать различные ссылки: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <a href="ch.htm" class="whitewine">Шардонэ</a> | ||
+ | <a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li> | ||
+ | </pre> | ||
+ | |||
+ | === ID === | ||
+ | |||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <h1 id="c1">Глава 1</h1> | ||
+ | <h2 id="c1-1">Глава 1.1</h2> | ||
+ | <h2 id="c1-2">Глава 1.2</h2> | ||
+ | </pre> | ||
+ | Разные стили для разных заголовок: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | #c1-2 {color: red; } | ||
+ | </pre> | ||
+ | |||
+ | === span и div === | ||
+ | |||
+ | Тег '''span''' ничего не добавляет к содержимому документа и может использоваться в стилях: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <p>Кто рано ложится и рано встаёт, тот будет | ||
+ | <span class="benefit">здоровым</span>, | ||
+ | <span class="benefit">богатым</span> и | ||
+ | <span class="benefit">умным</span>. | ||
+ | </p> | ||
+ | </pre> | ||
+ | и стили: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | span.benefit { color:red;} | ||
+ | </pre> | ||
+ | |||
+ | Тег '''div''' применяется для группирования одного или более блок-элементов. | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <div id="democrats"> | ||
+ | <ul> | ||
+ | <li>Франклин Д. Рузвелт</li> | ||
+ | <li>Джон Ф. Кеннеди</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </pre> | ||
+ | и стиль для всей этой группы: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | #democrats { background:blue; } | ||
+ | </pre> | ||
+ | |||
+ | Создание 3-x цветных квадратиков: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <table><tr> | ||
+ | <td><div id="red"></div></td> <td><div id="green"></div></td> <td><div id="blue" ></div></td> | ||
+ | </tr></table> | ||
+ | </pre> | ||
+ | стили: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | #red, #green, #blue{ width:100px; height:100px; margin:10px; } | ||
+ | #red { background:red; } | ||
+ | #green{ background:green;} | ||
+ | #blue { background:blue; } | ||
+ | </pre> | ||
+ | |||
+ | === Ящики === | ||
+ | |||
+ | Задание полей документа: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } | ||
+ | </pre> | ||
+ | или | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | body { margin: 100px 40px 10px 70px; } | ||
+ | </pre> | ||
+ | |||
+ | Текст в заголовке будет сдвинут вправо: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | h1 { background: orange; padding-left:120px; } | ||
+ | </pre> | ||
+ | |||
+ | Задание рамок: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | h1 {border-width: thick; border-style: dotted; border-color: gold; } | ||
+ | </pre> | ||
+ | Типы рамок: dotted, dashed, solid, double; объёмные: groove, ridge, inset, outset. | ||
+ | |||
+ | Можно определять каждую линию: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | h1 { | ||
+ | border-top-width: thick; border-top-style: solid; border-top-color: red; | ||
+ | border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; | ||
+ | border-right-width: thick; border-right-style: solid; border-right-color: green; | ||
+ | border-left-width: thick; border-left-style: solid; border-left-color: orange; | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | Сокращённая запись: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | p { border-width: 1px; border-style: solid; border-color: blue; } | ||
+ | p { border: 1px solid blue; } | ||
+ | </pre> | ||
+ | |||
+ | Простая рамка вокруг текста: | ||
+ | <pre class="brush:html; gutter: false;"> | ||
+ | <div class="box">Текст</div> | ||
+ | </pre> | ||
+ | стиль для него: | ||
+ | <pre class="brush:css; gutter: false;"> | ||
+ | div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; } | ||
+ | </pre> | ||
+ | |||
+ | |||
+ | == Ссылки == | ||
+ | |||
+ | [http://ru.html.net/tutorials Уроки HTML, CSV, PHP для чайников] | ||
+ | |||
+ | == См.также == | ||
+ | |||
+ | * [[My:JS|Java Script]] | ||
+ | * [[My:PHP|PHP]] |
Текущая версия на 11:52, 2 октября 2011
Это конспект по основам задания стилей 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
Каждая строка окружена tr. Каждая ячейка td. Ячейки заголовка th (будут жирные). Простая таблицы из заголовка, 2-х строк и 3-х столбцов
<table> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> <tr> <td>C11</td> <td>C12</td> <td>C13</td> </tr> <tr> <td>C21</td> <td>C22</td> <td>C23</td> </tr> </table> |
|
- Атрибуты тега table
- border="1" - толщина линий между ячейками
- width="30%" - таблица занимает 30% ширины браузера
- align="left" - выравнивание всей таблицы по горизонтали. Применим к tr, td. Можно "center" или "right".
- valign="top" - тоже самое по вертикали ("middle", "bottom")
Объединение ячеек:
<table border="1"> <tr> <td colspan="3">C1</td> </tr> <tr> <td>C2</td> <td>C3</td> <td>C4</td> </tr> </table> |
|
Объединение строк:
<table border="1"> <tr> <td rowspan="3" style="background-color:#ffffcc"> C1</td> <td>C2</td> </tr> <tr> <td>C3</td> </tr> <tr> <td>C4</td> </tr> </table> |
|
Формы
Иерархический список выбора:
<select size="1"> <optgroup label="Europe"> <option>United Kingdom</option> <option>Luxembourg</option> </optgroup> <optgroup label="Asia"> <option>India</option> <option>Dubai</option> </optgroup> </select>
Основы стилей
HTML заботится о структуре информации, а CSS производит настройку внешнего вида (layout). Изменение шрифтов для текста в абзаце имеет вид:
<p style="font-size:20px;">Это размер 20</p> <p style="font-family:courier;">Это шрифтом Courier</p> <p style="font-size:20px; font-family:courier">Это шрифт Courier, размером 20</p>
Стили можно задавать для различных элементов документа один раз в его заголовке внутри тега style:
<head> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head>
Изменение фона :
<h1 style="background-color: blue;">Заголовок на синем фоне<h1> <body style="background-image: XXX;">
Плавающие картинки:
<img src="bill.jpg" style= "float:left;" /> <!-- слева--> <img src="bill.jpg" style="position:absolute;bottom:50px;right:10px;" /> <!-- справа внизу -->
<p style="padding:25px;border:1px solid red;"> Текст в рамочке </p> |
Текст в рамочке |
Способы задания 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>
Все три примера изменяют цвет фона документа на красный.
Внешняя таблица стилей это текстовый файл с расширением .css
Основные свойства стилей
background
- color: #ff0000; - цвет переднего плана
- background-color: #ffcc00; - цвет фона элемента
- background-image: url("butterfly.gif"); - фоновые изображения
- background-repeat: no-repeat; - картинки не размножаются или повторяются по горизонтали (repeat-x), по вертикали (repeat-y), по горизонтали и вертикали (repeat).
- background-attachment: fixed; - фиксируется фоновый рисунок, или прокручивается вместе с содержимым (scroll)
- background-position: right bottom; - положение фонового рисунка; " 2cm 2cm" - от левого верхнего угла; "50% 25%" - по центу и на четверть сверху
Свойства можно background объединять:
- background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Font
- font-family: arial, verdana, sans-serif, "Times New Roman";
- font-style: italic; - кроме этого: normal, oblique
- font-weight: bold;
- font-size: 30px; - кроме этого: 12pt; 120%; 1em; Пиксели 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Для увеличения браузером шрифта стоит использовать '%' или 'em'.
Сокращённая запись для фонта:
- font: italic bold 30px arial, sans-serif;
Text
- p {text-indent: 30px; } - отступ для первой строки абзаца
- td{text-align: center;} - положение (left, right, centre, justify)
- text-decoration: underline; - подчёркивание. Кроме этого: overline; line-through;
- letter-spacing: 6px; - расстояние между буквами
- text-transform: uppercase; - изменение текста. Ещё capitalize ("john doe" => "John Doe"), lowercase.
Ссылки
- a { color: blue; } - цвет
- a {text-decoration:none;} - отсутствует подчёркивание ссылки
- a:link { color: blue; } - цвет не кликнутой ссылки
- a:visited {color: red;} - цвет кликнутой ссылки
- a:active {background-color: #FFFF00;} - активная ссылка
- a:hover { color: orange; font-style: italic; } - мышь на ссылкой
Можно определять свои классы для стилей ссылок
a {color: blue;} a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }
и в документе задавать различные ссылки:
<a href="ch.htm" class="whitewine">Шардонэ</a> <a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li>
ID
<h1 id="c1">Глава 1</h1> <h2 id="c1-1">Глава 1.1</h2> <h2 id="c1-2">Глава 1.2</h2>
Разные стили для разных заголовок:
#c1-2 {color: red; }
span и div
Тег span ничего не добавляет к содержимому документа и может использоваться в стилях:
<p>Кто рано ложится и рано встаёт, тот будет <span class="benefit">здоровым</span>, <span class="benefit">богатым</span> и <span class="benefit">умным</span>. </p>
и стили:
span.benefit { color:red;}
Тег div применяется для группирования одного или более блок-элементов.
<div id="democrats"> <ul> <li>Франклин Д. Рузвелт</li> <li>Джон Ф. Кеннеди</li> </ul> </div>
и стиль для всей этой группы:
#democrats { background:blue; }
Создание 3-x цветных квадратиков:
<table><tr> <td><div id="red"></div></td> <td><div id="green"></div></td> <td><div id="blue" ></div></td> </tr></table>
стили:
#red, #green, #blue{ width:100px; height:100px; margin:10px; } #red { background:red; } #green{ background:green;} #blue { background:blue; }
Ящики
Задание полей документа:
body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
или
body { margin: 100px 40px 10px 70px; }
Текст в заголовке будет сдвинут вправо:
h1 { background: orange; padding-left:120px; }
Задание рамок:
h1 {border-width: thick; border-style: dotted; border-color: gold; }
Типы рамок: dotted, dashed, solid, double; объёмные: groove, ridge, inset, outset.
Можно определять каждую линию:
h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Сокращённая запись:
p { border-width: 1px; border-style: solid; border-color: blue; } p { border: 1px solid blue; }
Простая рамка вокруг текста:
<div class="box">Текст</div>
стиль для него:
div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }
Ссылки
Уроки HTML, CSV, PHP для чайников