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

Материал из synset
Перейти к: навигация, поиск
(Таблицы html)
 
(не показана 41 промежуточная версия этого же участника)
Строка 29: Строка 29:
  
 
   <a href="http://synset.comm/">Cсылка на synset.com</a>
 
   <a href="http://synset.comm/">Cсылка на synset.com</a>
   <a href="http://synset.comm/" title="лейбла ссылки">synset.com</a>
+
   <a href="http://synset.comm/" title="всплывающая лейбла ссылки">synset.com</a>
  
 
   <img src="net.jpg" alt="альтернативное описание" />  <!-- вставка картинки -->
 
   <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> <!-- картинка, как ссылка -->  
 
   <a href="http://synset.com"><img src="logo.png"></a> <!-- картинка, как ссылка -->  
  
Строка 42: Строка 44:
 
</pre>
 
</pre>
  
== Определение cтилей CSS ==
+
== Таблицы 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 документа.
Строка 65: Строка 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>
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" style="background-color:#ffffcc"> C1</td>  <td>C2</td>
</tr>
<tr>  <td>C3</td> </tr>
<tr>  <td>C4</td> </tr>
</table>
C1 C2
C3
C4

Формы

Иерархический список выбора:

 
<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 для чайников

См.также