My:CSS — различия между версиями

Материал из synset
Перейти к: навигация, поиск
(Основные свойства стилей)
(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 ===
 +
 
 +
* '''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>
Col1 Col2 Col3
C11 C12 C13
C21 C22 C23
  • Атрибуты тега 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>
C1
C2 C3 C4

Объединение строк:

 
<table border="1">
<tr>
<td rowspan="3"> C1</td>  <td>C2</td>
</tr>
<tr>  <td>C3</td> </tr>
<tr>  <td>C4</td> </tr>
</table>
C1 C2
C3
C4

Основы стилей

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;