Îñíîâû CSS

Ó÷åáíèê CSS

· ×òî òàêîå CSS?
· Ñòðóêòóðà html-ñòðàíèöû
· Øðèôò: ðàçìåð è ãàðíèòóðà
· Âûðàâíèâàíèå è ïðîáåëû
· Íà÷åðòàíèå øðèôòà
· Îôîðìëåíèå ññûëîê
· Ôîðìàòèðîâàíèå ñïèñêîâ
· Êëàññû
· Èçîáðàæåíèÿ
· Ñïðàâî÷íèê àòðèáóòîâ CSS

Îñíîâû HTML

1. Òåðìèíû è îïðåäåëåíèÿ
2. Ïðèíöèïû WEB 2.0
3. Ñòðóêòóðà HTML-äîêóìåíòà
4. Îñíîâíûå ìåòàòåãè
5. Ôîðìàòèðîâàíèå òåêñòà HTML
6. Ñïèñêè
7. Òåêñò ôèêñèðîâàííîãî ôîðìàòà
8. Âûäåëåíèå ôðàãìåíòîâ òåêñòà
9. Èçìåíåíèå ïàðàìåòðîâ øðèôòà
10. Ãðàôèêà
11. Òàáëèöû
12. Ãèïåðññûëêè
13. Èçîáðàæåíèÿ-êàðòû
14. Ôðåéìû

Îñíîâû CSS3

15. ×òî òàêîå CSS
16. Ñèíòàêñèñ CSS
17. Ñòèëåâûå êëàññû
18. Êîìáèíèðîâàííûå ñòèëè
19. Òàáëèöû CSS
20. Ïðàâèëà êàñêàäíîñòè CSS
21. Ðåêîìåíäàöèè ïðèìåíåíèÿ ñòèëåé
22. Ïàðàìåòðû øðèôòîâ
23. Ðàçðûâû ñòðîê, âåðòèêàëüíîå âûðàâíèâàíèå
24. Ïàðàìåòðû ôîíà
25. Ïàðàìåòðû àáçàöà
26. Ïàðàìåòðû ñïèñêîâ
27. Ïàðàìåòðû êóðñîðà
28. Ïàðàìåòðû îòñòóïîâ
29. Ïàðàìåòðû ðàìêè
30. Ïàðàìåòðû âûäåëåíèÿ
31. Ïàðàìåòðû îòîáðàæåíèÿ
32. Êîíòåéíåðû

Òàáëèöû html-ñòðàíèöû

×àùå âñåãî â ïîëèãðàôèè òàáëèöû èñïîëüçóþòñÿ äëÿ òîãî, ÷òîáû ðàçìåñòèòü êàê ìîæíî áîëüøå èíôîðìàöèè íà îãðàíè÷åííîé ïëîùàäè ïå÷àòíîãî èçäàíèÿ.

 HTML òàáëèöû èãðàþò êóäà áîëåå âàæíóþ ðîëü. Òàáëèöû â HTML âûïîëíÿþò ôóíêöèþ íå ñòîëüêî ñòðóêòóðèðîâàíèÿ äàííûõ, ñêîëüêî ôóíêöèþ äèçàéíà html-ñòðàíèöû. Ïðè ïîìîùè òàáëèö ìîæíî ñîçäàòü ïðàêòè÷åñêè ñêîëüêî óãîäíî ñëîæíûé äèçàéí html-ñòðàíèöû.

HTML-òàáëèöû ñîçäàþòñÿ â 4 ýòàïà:

1. TABLE - ôîðìèðóåò ñîáñòâåííî òàáëèöó (ïàðíûé òåã);
2. TR - ôîðìèðóåò ñòðîêó òàáëèöû (ïàðíûé òåã), òåã TR äîëæåí áûòü îáÿçàòåëüíî âëîæåí â TABLE;
3. TH, TD - ôîðìèðóåò çàãîëîâîê òàáëèöû (íåîáÿçàòåëüíûé òåã) è ÿ÷åéêè òàáëèöû (ïàðíûå òåãè), òåãè TH, TD äîëæíû áûòü îáÿçàòåëüíî âëîæåíû â òåã TR;
4. Çàãîëîâîê è ÿ÷åéêè òàáëèöû çàïîëíÿþòñÿ èíôîðìàöèåé (òåêñòîì, êàðòèíêàìè...).

<table>
<tr>
	<th>Ïàðàìåòð</th>
	<th>Çíà÷åíèå</th>
</tr>
<tr>
	<td>Äëèíà (ìåòð)</td>
	<td>10</td>
</tr>
<tr>
	<td>Øèðèíà (ìåòð)</td>
	<td>5</td>
</tr>
</table>

Ñìîòðåòü ïðèìåð â áðàóçåðå..

Âàæíî ïîíèìàòü, ÷òî â ÿ÷åéêè òàáëèöû ìîæíî ïîìåùàòü ëþáóþ èíôîðìàöèþ â ëþáûõ îáúåìàõ - òåêñò, ãðàôèêó, äðóãèå òàáëèöû, çâóêîâûå ôàéëû, ôàéëû âèäåîèçîáðàæåíèé.

Ïðàâèëà, êîòîðûå âûïîëíÿåò áðàóçåð ïðè âûâîäå òàáëèöû íà ýêðàí ìîíèòîðà:

• Ðàçìåðû òàáëèöû è åå ÿ÷ååê àâòîìàòè÷åñêè èçìåíÿþòñÿ òàê, ÷òîáû ïîëíîñòüþ âìåñòèòü èõ ñîäåðæèìîå;
• Ìåæäó ãðàíèöàìè ÿ÷ååê è ìåæäó ãðàíèöåé êàæäîé ÿ÷åéêè è åå ñîäåðæèìûì äåëàåòñÿ íåáîëüøîé îòñòóï;
• Çàãîëîâîê òàáëèöû îòîáðàæàåòñÿ ïîëóæèðíûì øðèôòîì è âûðàâíèâàåòñÿ ïî öåíòðó;
• Ïî óìîë÷àíèþ ðàìêè âîêðóã òàáëèöû è ìåæäó ÿ÷åéêàìè íå ðèñóþòñÿ.

Çàãîëîâîê è ñåêöèè òàáëèöû

Òàêèå äîïîëíèòåëüíûå âîçìîæíîñòè HTML, êàê ñîçäàíèå çàãîëîâêà è ñåêöèé òàáëèöû, ïðèìåíÿþòñÿ íà ïðàêòèêå íå ÷àñòî, íî î íèõ íàäî çíàòü.

Çàãîëîâîê òàáëèöû ñîçäàåòñÿ ïðè ïîìîùè òåãà CAPTION. Òåêñò, ïîìåùåííûé â òåã CAPTION, âñåãäà âûâîäèòñÿ ñâåðõó òàáëèöû, è âûðàâíèâàåòñÿ ïî öåíòðó. Îáû÷íî òåã CAPTION èäåò ñðàçó æå çà îòêðûâàþùèì òåãîì TABLE, íî ìîæåò ñòîÿòü â ëþáîì ìåñòå òåëà HTML-ñòðàíèöû.

Ëîãè÷åñêè òàáëèöó ìîæíî ðàçáèòü ïðè ïîìîùè òðåõ òåãîâ:

• THEAD - ñåêöèÿ çàãîëîâêà òàáëèöû, ñîäåðæèò ñòðîêó ñ ÿ÷åéêàìè çàãîëîâêà òàáëèöû;
• TBODY - ñåêöèÿ òåëà òàáëèöû, ñîäåðæèò ñòðîêè ñ ÿ÷åéêàìè, â êîòîðûõ íàõîäèòñÿ îñíîâíàÿ èíôîðìàöèÿ;
• TFOOT - ñåêöèÿ çàâåðøåíèÿ (ïîäâàëà) òàáëèöû, ñîäåðæèò ñòðîêó ñ ÿ÷åéêàìè èòîãîâûõ äàííûõ.

Áðàóçåð íèêàê íå îòîáðàæàåò òåãè THEAD, TBODY, TFOOT. Îíè âñåãî ëèøü äåëÿò òàáëèöó íà ëîãè÷åñêèå ÷àñòè.

<table>
 <caption>Äèíàìèêà öåí</caption>
 <THEAD>
  <tr>
	<th>Ãîä</th>
	<th>Ñòîèìîñòü</th>
  </tr>
 </THEAD>
 <TBODY>
  <tr>
	<td>2010</td>
	<td>100</td>
  </tr>
  <tr>
	<td>2011</td>
	<td>120</td>
  </tr>
  <tr>
	<td>2012</td>
	<td>130</td>
  </tr>
  <tr>
	<td>2013</td>
	<td>110</td>
  </tr>
 </TBODY>
 <TFOOT>
  <tr>
	<td>Ñðåäíåå</td>
	<td>115</td>
  </tr>
 </TFOOT>
</table>

Ñìîòðåòü ïðèìåð â áðàóçåðå..

Îáúåäèíåíèå ÿ÷ååê òàáëèöû

Âèä ñòàíäàðòíîé òàáëèöû:

Âàðèàíò òàáëèöû ñ îáúåäèíåíèåì ÿ÷ååê:

<table border="1">
<tr>
	<td rowspan="2">1+6</td>
	<td colspan="4">2+3+4+5</td>
</tr>
<tr>
	<td>7</td>
	<td>8</td>
	<td>9</td>
	<td>10</td>
</tr>
<tr>
	<td>11</td>
	<td colspan="2">12+13</td>
	<td>14</td>
	<td rowspan="2">15+20</td>
</tr>
<tr>
	<td>16</td>
	<td>17</td>
	<td>18</td>
	<td>19</td>
</tr>
</table>

ß÷åéêè â HTML îáúåäèíÿþòñÿ ïðè ïîìîùè äâóõ àòðèáóòîâ òåãà TD:

• rowspan - îáúåäèíÿåò ñîñåäíèå ÿ÷åéêè ïî âåðòèêàëè (â ñòîëáöàõ òàáëèöû);
• colspan - îáúåäèíÿåò ñîñåäíèå ÿ÷åéêè ïî ãîðèçîíòàëè (â ñòðîêàõ òàáëèöû).

Ñòàíäàðòíàÿ òàáëèöà ðàçìåðîì 2õ2:

<table border="1">
<tr>
	<td>1</td>
	<td>2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

Òàáëèöà ñ îáúåäèíåíèåì ÿ÷ååê â ñòðîêå:

<table border="1">
<tr>
	<td colspan="2">1+2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

Òàáëèöà ñ îáúåäèíåíèåì ÿ÷ååê â ñòîëáöå:

<table border="1">
<tr>
	<td rowspan="2">1+3</td>
	<td>2</td>
</tr>
<tr>
	<td>4</td>
</tr>
</table>

Ìíîãå HTML-ðåäàêòîðû ïîçâîëÿþò ñîçäàâàòü òàáëèöû ñ îáúåäèíåíèåì ÿ÷ååê â èíòåðàêòèâíîì ðåæèèìå, çíà÷èòåëüíî óïðîùàÿ ðàáîòó. Äëÿ ñîçäàíèÿ òàáëèöû ñ îáúåäèíåíèåì ÿ÷ååê â "ðó÷íîì ðåæèìå", íàäî âûó÷èòü ñëåäóþùèå ïðàâèëà:

• îáúåäèíåíèå ÿ÷ååê òàáëèöû ïî ãîðèçîíòàëè:
  • íàéòè â html-êîäå ñòðàíèöû òåã TD, êîòîðûé ñîîòâåòñòâóåò ïåðâîé èç îáúåäèíÿåìûõ ÿ÷ååê, åñëè ñ÷èòàòü ñëåâà íàïðàâî;
  • âïèñàòü â íàéäåííûé òåã TD àòðèáóò COLSPAN è ïðèñâîèòü åìó êîëè÷åñòâî îáúåäèíÿåìûõ ÿ÷ååê, ñ÷èòàÿ è ñàìóþ ïåðâóþ èç íèõ;
  • óäàëèòü òåãè TD, êîòîðûå ñîçäàþò îñòàëüíûå îáåäèíÿåìûå ÿ÷åéêè â äàííîé ñòðîêå.
• îáúåäèíåíèå ÿ÷ååê òàáëèöû ïî âåðòèêàëè:
  • íàéòè â html-êîäå ñòðàíèöû òåã TR, ñòðîêó òàáëèöû â êîòîðîé íàõîäèòñÿ ïåðâàÿ èç èç îáúåäèíÿåìûõ ÿ÷ååê, åñëè ñ÷èòàòü ñâåðõó âíèç;
  • íàéòè â êîäå ýòîé ñòðîêè òåã TD, êîòîðûé ñîîòâåòñòâóåò ïåðâîé èç îáúåäèíÿåìûõ ÿ÷ååê;
  • âïèñàòü â íàéäåííûé òåã TD àòðèáóò ROWSPAN è ïðèñâîèòü åìó êîëè÷åñòâî îáúåäèíÿåìûõ ÿ÷ååê, ñ÷èòàÿ è ñàìóþ ïåðâóþ èç íèõ;
  • óäàëèòü òåãè TD â ïîñëåäóþùèõ ñòðîêàõ, êîòîðûå ñîçäàþò îñòàëüíûå îáåäèíÿåìûå ÿ÷åéêè â äàííîì ñòîëáöå.

Àòðèáóòû òåãîâ TABLE, TR, TD

align - âûðàâíèâàíèå ïî ãîðèçîíòàëè: ïî ëåâîìó êðàþ (çíà÷åíèå ïî óìîë÷àíèþ); ïî öåíòðó; ïî ïðàâîìó êðàþ.

<TABLE align = left|center|right>
<TR align = left|center|right>
<TD align = left|center|right>

width - øèðèíà òàáëèöû, ñòðîêè èëè ÿ÷åéêè (çíà÷åíèå ìîæíî çàäàâàòü â ïèêñåëÿõ èëè â ïðîöåíòàõ).

<TABLE width = 90%>
<TR width = 150>
<TD width = 50>

valign - âûðàâíèâàíèå ñîäåðæèìîãî ÿ÷ååê ïî âåðòèêàëè: ïî ñåðåäèíå (çíà÷åíèå ïî óìîë÷àíèþ); ïî âåðõó; ïî íèçó; ïî áàçîâîé ëèíèè.

<TR valign = center|top|bottom|baseline>
<TD valign = center|top|bottom|baseline>

height - âûñîòà ñòðîêè òàáëèöû (ïèêñåëè èëè ïðîöåíòû).

<TR height = 200>

cellpadding - ðàññòîÿíèå ìåæäó ñîäåðæèìûì ÿ÷åéêè è åå ãðàíèöåé (ïèêñåëè).

cellspacing - ðàññòîÿíèå ìåæäó ÿ÷åéêàìè òàáëèöû.

<TABLE cellpadding=5; cellspacing=10>

bgcolor - öâåò ôîíà òàáëèöû, ñòðîêè èëè ÿ÷åéêè.

<TABLE bgcolor = red>
<TR bgcolor = blue>
<TD bgcolor = white>

background - ôàéë ôîíîâîãî èçîáðàæåíèÿ äëÿ òàáëèöû èëè îòäåëüíîé ÿ÷åéêè.

<TABLE background = "image.ipg">
<TD background = "image.png">

border - òîëùèíà ëèíèé òàáëèöû.

<TABLE border = 2>

bordercolor - öâåò ëèíèé òàáëèöû, ñòðîêè èëè ÿ÷åéêè.

<TABLE bordercolor = red>
<TR bordercolor = blue>
<TD bordercolor = white>

<table border="2" bordercolor="#800000" width="250" bgcolor="#808000">
 <caption>Äèíàìèêà öåí</caption>
 <THEAD>
  <tr align="center">
	<th>Ãîä</th>
	<th>Ñòîèìîñòü</th>
  </tr>
 </THEAD>
 <TBODY>
  <tr >
	<td>2010</td>
	<td>100</td>
  </tr>
  <tr>
	<td>2011</td>
	<td>120</td>
  </tr>
  <tr>
	<td>2012</td>
	<td>130</td>
  </tr>
  <tr>
	<td>2013</td>
	<td>110</td>
  </tr>
 </TBODY>
 <TFOOT>
  <tr>
	<td>Ñðåäíåå</td>
	<td>115</td>
  </tr>
 </TFOOT>
</table>

Ñìîòðåòü ïðèìåð â áðàóçåðå..

 íà÷àëî ñòðàíèöû

 íà÷àëî ñòðàíèöû