美しくレイアウトする方法、またはCSSフレームワークの悪い点

素晴らしいレイアウト、セマンティックマークアップ、コンテンツとデザインの分離の利点は何十、何百回も説明されていますが、それでも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. , , , , , , . «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. .

? , . html. , ! (, )  — , «A List Apart» 10 . , html- css , - — - . , . , , , . , , , -  . 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».

, , !

Source: https://habr.com/ru/post/J108142/

All Articles

美しくレイアウトする方法、またはCSSフレームワークの悪い点

css, html

-

css-

More articles: