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

Материал из synset
Перейти к: навигация, поиск
(Основы html)
(Таблицы html)
Строка 56: Строка 56:
 
</table>
 
</table>
 
</pre>
 
</pre>
<nowiki>
+
 
 
<table>
 
<table>
 
<tr>
 
<tr>
Строка 65: Строка 65:
 
</tr>
 
</tr>
 
</table>
 
</table>
</nowiki>
 
  
 
== Определение cтилей CSS ==
 
== Определение cтилей CSS ==

Версия 14:23, 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

Простая таблицы из 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>
Cell 11 Cell 12 Cell 13
Cell 21 Cell 22 Cell 23

Определение 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>

Все три примера изменяют цвет фона документа на красный.