рдЕрджреНрднреБрдд рд▓реЗрдЖрдЙрдЯ, рд╕рд┐рдореЗрдВрдЯрд┐рдХ рдорд╛рд░реНрдХрдЕрдк рдФрд░ рд╕рд╛рдордЧреНрд░реА рдФрд░ рдбрд┐рдЬрд╝рд╛рдЗрди рдХреЛ рдЕрд▓рдЧ рдХрд░рдиреЗ рдХреЗ рдлрд╛рдпрджреЗ рджрд░реНрдЬрдиреЛрдВ, рд╕реИрдХрдбрд╝реЛрдВ рдмрд╛рд░ рд╡рд░реНрдгрд┐рдд рд╣реИрдВ, рд▓реЗрдХрд┐рди рдлрд┐рд░ рднреА рдРрд╕реЗ рд▓реЛрдЧ рд╣реИрдВ рдЬреЛ html рдФрд░ css рдХреЗ рд╡рд┐рдЪрд╛рд░ рдХреЛ рдирд╣реАрдВ рд╕рдордЭрддреЗ рд╣реИрдВ, рдХреЛрдб рдореЗрдВ рдРрд╕реА рднрдпрд╛рдирдХ рдмрд╛рддреЗрдВ рд▓рд┐рдЦрддреЗ рд╣реИрдВ
<span style="color:blue">
, , - ,
<font color="blue">
, . html css . , . ,
theshock, .
html , SGML. , - , . , . , , . , . - Netscape. ,
, , .
Netscape , , .
, html . W3C - , Netscape . .
Microsoft. W3C, , html 3.0 - html 3.2, css. IE 3 NN 4 - .
, Netscape , , 6- , , . Netscape Firefox, IE , , , .
: , .
. , css 3 , , .
css, html
html.
<font>,
<b>,
<i>, , , , .
┬лA List Apart┬╗ html+css. :
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top"><td width="15%"
bgcolor="#ffffcc"> </td>
<td width="75%" bgcolor="#ffffcc"
valign="top">
:
<div id="content">
css. html+css? html- (-, , W3C). css. :
1. , html- , .
2. , html-. , тАФ css-, , . ┬лdon't repeat yourself┬╗ , . , .
3. , ( ). , , <h2> , , .
4. html- , ss- , , .
5. , css- . css- html-,
6. css- ( user-css). ,
ibash.org.ru.
7. .
<font color="red">? , . html. , ! (, )
<span style="color:red"> тАФ , ┬лA List Apart┬╗ 10 . , html- css , - тАФ - . , . , , ,
<span class="error">. , , , -
<span class="important"> <strong>. html5 , .
-
? . , html. , . , html, css. , , . , , , , . , , . html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Habrahabr</title>
</head>
<body>
<header>
<img src="logo.png" alt="Habrahabr logo" />
<ul>
<li>Nutochka</li>
<li></li>
<li></li>
<li> </li>
<li></li>
<li></li>
</ul>
</header>
<nav>
<ul>
<li><span></span></li>
<li><a href="#">q&a</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
<section>
<article>
<h1><a href="#">{Article.title}</a></h1>
<div class="content">{Article.content}</div>
<div class="tags">{Article.tags}</div>
<div class="footer">{Article.footer}</div>
</article>
</section>
<aside>
<div class="best">
<ul>
<li>
<a href="#" class="blog">{Best.blogname}</a>
┬╗ <a href="#" class="article">{Best.article}</a>
</li>
<li>
<a href="#" class="blog">{Best.blogname}</a>
┬╗ <a href="#" class="article">{Best.article}</a>
</li>
<li>
<a href="#" class="blog">{Best.blogname}</a>
┬╗ <a href="#" class="article">{Best.article}</a>
</li>
</ul>
</div>
</aside>
<footer>
┬й 2006тАУ2010 ┬л ┬╗
</footer>
</body>
</html>
html , . css, , , html.
, - , , , .
css-
( , ) css-. ,
960 grid system<div class="container_24">
<h2>
24 Column Grid
</h2>
<div class="grid_24">
<p>
950
</p>
</div>
<div class="clear"></div>
<div class="grid_1">
<p>
30
</p>
</div>
<div class="grid_23">
<p>
910
</p>
</div>
blueprint:
<div class="container showgrid">
<h1>Blueprint Tests: grid.css</h1>
<div class="span-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-8 last">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-6 append-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="span-6 append-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
, , html3.2. , html- , . css, , . Css- , тАФ .
? html , css, . CSS? , css , тАФ , , . ,
LessCss SASS. css. ┬л
Introducing the LESS CSS Grid┬╗.
, , !