My:CSS — различия между версиями
WikiSysop (обсуждение | вклад) (→Основные свойства стилей) |
WikiSysop (обсуждение | вклад) (→font) |
||
Строка 224: | Строка 224: | ||
: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; | : 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; |
Версия 15:35, 10 июля 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"> C1</td> <td>C2</td> </tr> <tr> <td>C3</td> </tr> <tr> <td>C4</td> </tr> </table> |
|
Основы стилей
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;