インターネット上ではいくつかのチュートリアルに便利ですがご利用いただけますたくさんのCSSのチュートリアルです。 これはあなた次のWebサイトプロジェクトの良いCSSのコードを記述する5つのステップを見つけるチュートリアルでは。 私はこのチュートリアルをお楽しみ下さい。

1。 ResetCss

あなたはいつもエリックメイヤーリセット、由井リセット、または独自のカスタムリセットすると、ちょうど何かを使用することができるかどうかをリセットを使用する必要があります。

リセットスタイルシートの目標は、既定の行の高さのようなものでブラウザの不整合を減らすためには、余白との見出しのフォントサイズ、およびように- エリックメイヤー

  、HTML本体にはdiv、スパン、アプレット、オブジェクトに、H1、H2では、H3の、9004、H5亜型、h6、インラインフレーム、 
 引用、事前に、略称、頭字語、住所、大きな、、、コード、デル、dfn、日引用 
  フォントは、IMG、アドイン、kbdとq、sampは、小型、ストは、強力なサブ、ジェソプ、TTのは、VAR掲載 
  、、Dtに、dlとDDのフィールドセット、フォーム、ラベル、凡例、表、キャプション、TBODYを、tfootの、 
  THEAD要素、trは番目のは、TD、入力には、テキストエリアを選択 

  ; padding : 0 ; } （マージン：0;パディング：0;） 


  ; padding : 0 ; } *（マージン：0;パディング：0;） 

2。 CSSのショートハンド

1つは、最も重要なCSSの機能の能力を最小限に抑える方法でコードを記述することです。

不正なコード

  （ 
 マージントップ：10px; 
 マージン右：7px; 
 マージン底：10px; 
 余白左：7px; 

 パディングトップ：10px; 
 パディング右：7px; 
 パディング底：10px; 
 パディング左：7px; 

 フォントサイズ：12px; 
 フォントの重量：100％; 
  ; フォントファミリー ：ゴシック体、Verdana、000000、 サンセリフ ; 
  ） 

正しいコード

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } （ マージン ：10px 7px 10px 7px; パディング ：10px 7px 10px 7px;フォント：太字 12pxゴシック体、Verdana、000000、 サンセリフ ;） 

3。 非常に多くのクラスを使用していないかのID

私は、初心者のほとんどのクラスを追加し、IDは、ページ上でrequired.There私が何を参照する時の以下の例をいくつかではないが、ほぼすべての要素には気づいている。

不正なコード

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div = "wrapper""<p クラス = "heading""<strong クラス = "subheading""ようこそ"/強い""/ p"<p ク ラス = "linka"""href =の= "wrapper" ク ラスID "＃" のclass ="リンク""ホーム"/""/ p"<p クラス = "linkb""<a href =の"#" クラス = "link"""/""/ p"について"p クラス =""linkc"<a href =の"#" クラス = "link""サービス"/""/ p"<p クラス = "linkd""<a href =の"#" クラス = "link""お問い合わせ"/""/ p""/部" 

ここでは、正しいコードです。

正しいコード

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div = "wrapper""<h1>へようこそ"/ H1の"<ul> <li> <a のhref IDを = "#""ホーム"/""/李"<li> <a href =の"#"" "について/""/李"<li> <a href =の"#""サービス"/""/李"<li> <a href =の"#""お問い合わせ"/""/李"" / UL規格""/部" 

4。 組織するスタイルシート

するので、それのことと関連する商品を見つけるのは簡単ですあなたのスタイルシートを整理する必要が接近している。 コメントを使用効果的。 たとえば、がどのようにあなたのスタイルシートを整理するように指示される例です

  / *リセット* / 
   elements削除マージンとパディングの要素 

  / *基本的な要素* / 
 基本的な要素を定義スタイル：ボディに、H1、H2では、H3の、9004、h6、オール、UL規格、dlと、p等 

  / *一般クラス* / 
 一般的なクラスを定義するスタイル：のように下を削除するシンプルなもの、  
 両側に等浮動小数点  
  / *基本レイアウト* / 

  / *基本レイアウト* / 
 基本的なレイアウトのスタイル：ヘッダを定義します。 フッター、サイドバー等 

  / *ヘッダー* / 
 を定義するヘッダのスタイルを 

  / *内容* / 
 を定義するコンテンツエリアのスタイル 

  / *フッター* / 
 を定義フッターのスタイル 

  / *その他* / 
 継続 

5。 使用して条件付きスタイルシート

Internet Explorerは、ほとんどすべてのブラウザのバグがあります。 幸いなことには、CSSはIEに提供して管理するために条件コメントを使用することができます。 もし私がそれを必要と私は、スタイルシートと呼ばie6.cssていると、IEのターゲットを古いバージョンの。 私は、古いブラウザのため、迅速かつ簡単にCSSを管理することができます。

ここでは例です

  <!--[場合、LTEのはIE 6]" 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > = "stylesheet" のhref = "ie6.css" タイプ = "text/css" メディア = "screen" / <link rel" 
 
  -- > "！[Endifに] - " 

おわりに

これらのほんの一部のヒントは、よりよいコードを記述する助けています。 私は、チュートリアルではまた、より良いクリーンなコードを書くのに役立つことを期待。 あなたの現在と次のプロジェクトにこれらのヒントを適用し、きっと努力に感謝します。

もしあなたが考えることがチュートリアルがより良くしてもらいたい私たちと一緒に。 コメント問い合わせ

もし私たちからより多くのインスピレーションを受ける希望してくださいRSSフィードや電子メールでの我々のフィードを購読する考え。

報告Filed under：CSSの 、管理者によるチュートリアル