esprits top Esprit's Style

    -    エンジニアの足つぼ    -

 idとclassの違いを理解する

〆 idとclassの違いを理解できていますか?

プロの作ったサイトは必ずidが設定されています。重要なid,classの使い分けを理解してください。

1.idとclassの使い方をサンプルで見てみます。

 id と class の違い
 File  Edit  Tool  Help
                  

 header_c1 

 header_c2 

 headertest 


 contents_c1 

 contents_c2 

 contents 


 footer_c1 

 footer_c2 

 footer 


@sample.css
#header h3.c1{
	color:blue;
}
#header h3.c2{
	color:orange;
}
#contents h3.c1{
	color:green;
}
#contents h3.c2{
	color:purple;
}
div#contents{
	color:red;
}
#footer h3.c1{
	color:olive;
}
#footer h3.c2{
	color:maroon;
}
@sample
<html><head>
<link href="sample.css" rel="stylesheet" type="text/css" />
</style>
</head>
<body>
<div id="header">
  <h3 class="c1"> header_c1 </h3>
  <h3 class="c2"> header_c2 </h3>
  <h3> header </h3>
</div>
<div id="contents">
  <h3 class="c1"> contents_c1 </h3>
  <h3 class="c2"> contents_c2 </h3>
  <h3> contents </h3>
</div>
<div id="footer">
  <h3 class="c1"> footer_c1</h3>
  <h3 class="c2"> footer_c2</h3>
  <h3> footer </h3>
</div></body></html>
The link to this site is free.   /   Last Updated : 28.May.2012   
Copyright © ESPRITS STYLE. 2008   /   ご意見、感想、苦情は、 こちらへ...
counter