<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. :
<!-- Dress left -->
<table border="0" cellpadding="0" cellspacing="0">
<!-- Your variable left margin -->
<tr valign="top"><td width="15%"
bgcolor="#ffffcc"> </td>
<td width="75%" bgcolor="#ffffcc"
valign="top">
<!-- Your actual content -->
:
<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>
<!-- Other blocks -->
</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>
<!-- end .grid_24 -->
<div class="clear"></div>
<div class="grid_1">
<p>
30
</p>
</div>
<!-- end .grid_1 -->
<div class="grid_23">
<p>
910
</p>
</div>
<!-- end .grid_23 -->
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┬╗.
, , !