CSSウェブページレイアウト共通仕様
一.ファイル命名規範
グローバルスタイル:global.css; フレームレイアウト:layout.css; フォントスタイル:font.css; リンクスタイル:link.css; 印刷スタイル:print.css;
二.常用類/ID命名規範
ヘッダー:header容量:content容量:containerフッター:footer版権:copyrightパイロット:menuメインナビゲーション:mainMenuサブナビゲーション:subMenuタグ:logoタグ:bannerタグ:titleサイドバー:sidebarタグ:Icon注釈:note検索:searchボタン:btn登録:loginチェーン接続:link情報ボックス:manage......
常用類の命名はできるだけよく見られる英語の単語を基準にして、分かりやすくし、適切な場所で注釈しなければならない.二級クラス/IDネーミングの場合は、組み合わせて書くモードを採用し、後の単語の頭文字は大文字でなければならない.例えば、「検索ボックス」は「searchInput」、「検索アイコン」は「searchIcon」、「検索ボタン」は「searchBtn」と命名しなければならない.
CSS書写規範及び方法
一.通常の書く規範と方法
1.DOCTYPEを選択:
XHTML 1.0では、3つのDTD宣言を選択できます.
トランジション(Transitional):非常にゆとりのあるDTDが必要で、HTML 4を引き続き使用することができます.01の標識(ただしxhtmlの書き方に合致する).完全なコードは次のとおりです.
厳格な(Strict):厳格なDTDが要求され、
などの表現層の識別と属性を使用することはできません.完全なコードは次のとおりです.
フレームワーク(Frameset):フレームワークページに特化したDTDを設計し、ページにフレームワークが含まれている場合は、このDTDを採用する必要があります.完全なコードは次のとおりです.
理想的な状況はもちろん厳格なDTDですが、Web標準に触れたばかりのデザイナーの多くにとって、移行のDTD(XHTML 1.0 Transitional)は現在の理想的な選択です(当駅を含めて、移行型DTDを使用しています).このようなDTDはまた、表現層の識別、要素、属性を使用することができ、W 3 Cのコード検証も容易であるからである.
2.言語および文字セットを指定します.
ドキュメントの言語を指定します.
ブラウザによって正しく解釈され、W 3 Cコードで検証されるためには、すべてのXHTMLドキュメントが使用する符号化言語を宣言する必要があります.例:一般的な言語定義:
標準のXMLドキュメント言語定義:
古いバージョンのブラウザの言語定義:
文字セットを向上させるには、「utf-8」を推奨します.
3.スタイルシートを呼び出す:
外部スタイルシート呼び出し:
ページ埋め込み:スタイルシートをページコードのhead領域に直接書きます.次のようになります.
外部呼び出し法:スタイルシートを独立したものに書く.cssファイルで、ページhead領域で次のようなコードで呼び出します.
Web規格に適合する設計では、外部呼び出し法を推奨し、ページを変更せずに変更できる.cssファイルでページのスタイルを変更します.すべてのページが同じスタイルシートファイルを呼び出す場合は、スタイルシートファイルを変更して、すべてのファイルのスタイルを変更できます.
4、適切な要素を選択する:
HTML要素のスタイルではなく、ドキュメントの構造に基づいてHTML要素を選択します.たとえば、改行のためではなく、P要素を使用してテキスト段落を含めます.ドキュメントの作成中に適切な要素が見つからない場合は、汎用divまたはspanの使用を考慮します.
移行を避けるにはdivとspanを使用します.div要素とspan要素を少量、適切に使用することで、ドキュメントの構造をより明確かつ合理的にし、スタイルを使用しやすくすることができます.
ラベルと構造のネストをできるだけ少なく使用することで、ドキュメントの構造を明確にするだけでなく、ファイルのコンパクトさを維持することができ、ユーザーのダウンロード速度を高めると同時に、ブラウザのドキュメントに対する解釈と表示を容易にすることができる.
5、派生セレクタ:
派生セレクタを使用して、要素内のサブ要素にスタイルを定義し、名前を簡略化しながら構造をより明確にすることができます.たとえば、次のようにします.
6、補助画像は後ろ姿図で処理する:
ここでの「補助画像」とは、ページとして表現される内容の一部ではなく、修飾、間隔、注意にのみ用いられる画像を指す.これを後ろ姿図処理として、ページを変更せずにCSSスタイルで変更することができます.
7、構造とスタイルの分離:
ページにドキュメントの構造のみを書き込み、cssファイルにスタイルを書き、CSSスタイルシートを外部から呼び出すことで構造とスタイルの分離を実現します.
8、文書の構造化書写:
ページCSSドキュメントは構造化された書き方を採用し、論理がはっきりしていて読みやすい.次のようになります.
9、マウスジェスチャー:
XHTML規格では、handはIEのみで認識され、マウスジェスチャーを「手形」に変換する必要がある場合、「hand」を「pointer」、すなわち「cursor:pointer;
二.注釈書き規範
1、行間コメント:
次のように、属性値の後に直接書きます.
2、全体の注釈:
開始および終了にコメントを追加します.たとえば、次のようにします.
三.スタイル属性コードの略語
1、同じ属性および属性値を持つ異なるクラスの略語:
2つの異なるクラスについて、一部が同じまたはすべてが同じ属性および属性値である場合、マージの略語に対応します.特に、複数の異なるクラスがあり、同じ属性および属性値がある場合、マージの略語はコード量を減らし、制御しやすくなります.次のようになります.
2つの異なる属性値には重複点があります.
2、同一属性の略語:
同じ属性は、その属性値に基づいて、次のように簡単に書くこともできます.
3、内外側外枠の略:
CSSにおける内外枠に関する距離は、上、右、下、左の順に並べられており、この4つの属性値が異なる場合は、以下のように直接省略することができる.
以下のように略すことができます.
上と下、左と右の枠線の属性値が同じである場合、属性値は直接2つに略すことができます.たとえば、次のようになります.
略語:
上下左右の4つの枠線の属性値が同じである場合は、次のように直接1つに略すことができます.
略語:
4、カラー値の略:
RGBの3色の値が同じである場合、色値コードを省略することができる.次のようになります.
省略可能:
四.hack書く規範
ブラウザによってW 3 C規格のサポートが異なるため、各ブラウザではページに対する解釈が異なる.例えばIEはFFと3 pxの差がある場合が多いが、これらの差についてはcssのhackで調整する必要がある.もちろん、必要がない場合はhackと書かずに調整し、hackによるページの問題を避けることが望ましい.
1、IE 6、IE 7、Firefox間の互換書き方:
書き方一:
IEはすべて*を識別することができます;FFなどの標準ブラウザでは*を認識できません.IE 6は*を認識できますが、認識できません!important,IE 7は*を識別でき、識別できます!important; FFは*を認識できませんが、認識できます!important; 上記の表現によれば、同じ種類/IDのCSS hackは以下のように書くことができる.
一般的な三者の書く順序はFF、IE 7、IE 6である.
書き方2:
IE 6は""を認識することができ、一方、IE 7及びFFは認識できないので、IE 6とIE 7及びFFとの区別のみについては、以下のように書くことができる.
書き方3:
*+htmlと*htmlはIE特有のラベルで、Firefoxはしばらくサポートしていません.
シールドIEブラウザ:
selectはセレクタで、状況に応じて交換します.2番目の文はMAC上のsafariブラウザ独自のものです.
IE 6識別可能:
ここでは主にCSS注釈によって属性と値を分け、注釈はコロンの前にある.
IEのif条件hack書き方:
全てのIEは認識可能:
2.フローティングをクリアする:
Firefoxでは、子がフローティングである場合、親の高さが子全体を完全に包むことができないため、このフローティングをクリアしたHACKで親を一度定義すれば、この問題を解決することができる.
注:ネット上で見つけたCSSの作成規範は、とても役に立ちます.記録して、みんなの参考に供します!
グローバルスタイル:global.css; フレームレイアウト:layout.css; フォントスタイル:font.css; リンクスタイル:link.css; 印刷スタイル:print.css;
二.常用類/ID命名規範
ヘッダー:header容量:content容量:containerフッター:footer版権:copyrightパイロット:menuメインナビゲーション:mainMenuサブナビゲーション:subMenuタグ:logoタグ:bannerタグ:titleサイドバー:sidebarタグ:Icon注釈:note検索:searchボタン:btn登録:loginチェーン接続:link情報ボックス:manage......
常用類の命名はできるだけよく見られる英語の単語を基準にして、分かりやすくし、適切な場所で注釈しなければならない.二級クラス/IDネーミングの場合は、組み合わせて書くモードを採用し、後の単語の頭文字は大文字でなければならない.例えば、「検索ボックス」は「searchInput」、「検索アイコン」は「searchIcon」、「検索ボタン」は「searchBtn」と命名しなければならない.
CSS書写規範及び方法
一.通常の書く規範と方法
1.DOCTYPEを選択:
XHTML 1.0では、3つのDTD宣言を選択できます.
トランジション(Transitional):非常にゆとりのあるDTDが必要で、HTML 4を引き続き使用することができます.01の標識(ただしxhtmlの書き方に合致する).完全なコードは次のとおりです.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>厳格な(Strict):厳格なDTDが要求され、
などの表現層の識別と属性を使用することはできません.完全なコードは次のとおりです.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
フレームワーク(Frameset):フレームワークページに特化したDTDを設計し、ページにフレームワークが含まれている場合は、このDTDを採用する必要があります.完全なコードは次のとおりです.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>理想的な状況はもちろん厳格なDTDですが、Web標準に触れたばかりのデザイナーの多くにとって、移行のDTD(XHTML 1.0 Transitional)は現在の理想的な選択です(当駅を含めて、移行型DTDを使用しています).このようなDTDはまた、表現層の識別、要素、属性を使用することができ、W 3 Cのコード検証も容易であるからである.
2.言語および文字セットを指定します.
ドキュメントの言語を指定します.
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>ブラウザによって正しく解釈され、W 3 Cコードで検証されるためには、すべてのXHTMLドキュメントが使用する符号化言語を宣言する必要があります.例:一般的な言語定義:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
標準のXMLドキュメント言語定義:
<?xml version=”1.0″ encoding=” utf-8″?>
古いバージョンのブラウザの言語定義:
<meta http-equiv=”Content-Language” content=” utf-8″ />
文字セットを向上させるには、「utf-8」を推奨します.
3.スタイルシートを呼び出す:
外部スタイルシート呼び出し:
ページ埋め込み:スタイルシートをページコードのhead領域に直接書きます.次のようになります.
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部呼び出し法:スタイルシートを独立したものに書く.cssファイルで、ページhead領域で次のようなコードで呼び出します.
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
Web規格に適合する設計では、外部呼び出し法を推奨し、ページを変更せずに変更できる.cssファイルでページのスタイルを変更します.すべてのページが同じスタイルシートファイルを呼び出す場合は、スタイルシートファイルを変更して、すべてのファイルのスタイルを変更できます.
4、適切な要素を選択する:
HTML要素のスタイルではなく、ドキュメントの構造に基づいてHTML要素を選択します.たとえば、改行のためではなく、P要素を使用してテキスト段落を含めます.ドキュメントの作成中に適切な要素が見つからない場合は、汎用divまたはspanの使用を考慮します.
移行を避けるにはdivとspanを使用します.div要素とspan要素を少量、適切に使用することで、ドキュメントの構造をより明確かつ合理的にし、スタイルを使用しやすくすることができます.
ラベルと構造のネストをできるだけ少なく使用することで、ドキュメントの構造を明確にするだけでなく、ファイルのコンパクトさを維持することができ、ユーザーのダウンロード速度を高めると同時に、ブラウザのドキュメントに対する解釈と表示を容易にすることができる.
5、派生セレクタ:
派生セレクタを使用して、要素内のサブ要素にスタイルを定義し、名前を簡略化しながら構造をより明確にすることができます.たとえば、次のようにします.
.mainMenu ul li {background:url(images/bg.gif;)}
6、補助画像は後ろ姿図で処理する:
ここでの「補助画像」とは、ページとして表現される内容の一部ではなく、修飾、間隔、注意にのみ用いられる画像を指す.これを後ろ姿図処理として、ページを変更せずにCSSスタイルで変更することができます.
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、構造とスタイルの分離:
ページにドキュメントの構造のみを書き込み、cssファイルにスタイルを書き、CSSスタイルシートを外部から呼び出すことで構造とスタイルの分離を実現します.
8、文書の構造化書写:
ページCSSドキュメントは構造化された書き方を採用し、論理がはっきりしていて読みやすい.次のようになります.
<div id=”mainMenu”>
<ul>
<li><a href=”#” > </a></li>
<li><a href=”#” > </a></li>
<li><a href=”#” > </a></li>
</ul>
</div>
/*===== =====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*===== =====*/
9、マウスジェスチャー:
XHTML規格では、handはIEのみで認識され、マウスジェスチャーを「手形」に変換する必要がある場合、「hand」を「pointer」、すなわち「cursor:pointer;
二.注釈書き規範
1、行間コメント:
次のように、属性値の後に直接書きます.
.search{
border:1px solid #fff;/* */
background:url(../images/icon.gif) no-report #333;/* */
}
2、全体の注釈:
開始および終了にコメントを追加します.たとえば、次のようにします.
/*===== =====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*===== =====*/
三.スタイル属性コードの略語
1、同じ属性および属性値を持つ異なるクラスの略語:
2つの異なるクラスについて、一部が同じまたはすべてが同じ属性および属性値である場合、マージの略語に対応します.特に、複数の異なるクラスがあり、同じ属性および属性値がある場合、マージの略語はコード量を減らし、制御しやすくなります.次のようになります.
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
2つの異なる属性値には重複点があります.
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2、同一属性の略語:
同じ属性は、その属性値に基づいて、次のように簡単に書くこともできます.
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、内外側外枠の略:
CSSにおける内外枠に関する距離は、上、右、下、左の順に並べられており、この4つの属性値が異なる場合は、以下のように直接省略することができる.
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
以下のように略すことができます.
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
上と下、左と右の枠線の属性値が同じである場合、属性値は直接2つに略すことができます.たとえば、次のようになります.
.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
略語:
.btn {margin:10px 5px;}
上下左右の4つの枠線の属性値が同じである場合は、次のように直接1つに略すことができます.
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
略語:
.btn{margin:10px;}
4、カラー値の略:
RGBの3色の値が同じである場合、色値コードを省略することができる.次のようになります.
.menu { color:#ff3333;}
省略可能:
.menu {color:#f33;}
四.hack書く規範
ブラウザによってW 3 C規格のサポートが異なるため、各ブラウザではページに対する解釈が異なる.例えばIEはFFと3 pxの差がある場合が多いが、これらの差についてはcssのhackで調整する必要がある.もちろん、必要がない場合はhackと書かずに調整し、hackによるページの問題を避けることが望ましい.
1、IE 6、IE 7、Firefox間の互換書き方:
書き方一:
IEはすべて*を識別することができます;FFなどの標準ブラウザでは*を認識できません.IE 6は*を認識できますが、認識できません!important,IE 7は*を識別でき、識別できます!important; FFは*を認識できませんが、認識できます!important; 上記の表現によれば、同じ種類/IDのCSS hackは以下のように書くことができる.
.searchInput {
background-color:#333;/* */
*background-color:#666 !important; /* IE7*/
*background-color:#999; /* IE6 IE6 */
}
一般的な三者の書く順序はFF、IE 7、IE 6である.
書き方2:
IE 6は""を認識することができ、一方、IE 7及びFFは認識できないので、IE 6とIE 7及びFFとの区別のみについては、以下のように書くことができる.
.searchInput {
background-color:#333;/* */
_background-color:#666;/* IE6 */
}
書き方3:
*+htmlと*htmlはIE特有のラベルで、Firefoxはしばらくサポートしていません.
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/* IE6*/
*+html .searchInput {background-color:#555;}/* IE7*/シールドIEブラウザ:
selectはセレクタで、状況に応じて交換します.2番目の文はMAC上のsafariブラウザ独自のものです.
*:lang(zh) select {font:12px !important;} /*FF */
select:empty {font:12px !important;} /*safari */
IE 6識別可能:
ここでは主にCSS注釈によって属性と値を分け、注釈はコロンの前にある.
select { display /*IE6 */:none;}
IEのif条件hack書き方:
全てのIEは認識可能:
<!–[if IE]> Only IE <![end if]–>
IE5.0 :
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0 IE5.5 :
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
IE6 :
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6 IE6 IE5.x :
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
IE7 :
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
2.フローティングをクリアする:
Firefoxでは、子がフローティングである場合、親の高さが子全体を完全に包むことができないため、このフローティングをクリアしたHACKで親を一度定義すれば、この問題を解決することができる.
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
注:ネット上で見つけたCSSの作成規範は、とても役に立ちます.記録して、みんなの参考に供します!
@charset "utf-8";
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,div,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{_overflow:auto;_height:100%;margin:0 auto;}
html{_overflow:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%}
a{text-decoration:none; color:#111;}
a:hover{cursor:pointer;}
b,strong{font-weight:bold;}
a,input,img{vertical-align:middle;}
img{font-size:0;}
a,fieldset,img{border:0}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
small{font-size:12px}
ul,ol,li,dl,dt,dd{list-style:none;}
li{display:list-item;}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
legend{color:#000}
button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle;}
table{ border-collapse:collapse; border-spacing:0;}
hr{ border:medium none; clear:both;}
body a{outline:none;blr:expression(this.onFocus=this.blur());}/* a */
/*------- ---------------------------------*/
.clearBoth{display:block;float:none;clear:both;overflow:hidden;visibility:hidden;width:0;height:0;background:none;border:0;font-size:0}
.adsense{display:none}