div+css 命名規則_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1つ。ファイル命名規則

グローバルスタイル: global.css;

フォントスタイル: font.css;
印刷スタイル: print.css;共通クラス/ID命名規則

Header: header
Content: content

Container:container

Footer: footer

Navigation: menu
Main Navigation: mainMenu
Sub-navigation: subMenu
Logo: logo
Slogan: Banner
タイトル: タイトル
サイドバー: サイドバー
アイコン: アイコン
ノート: note
検索: search
ボタン: btn
ログイン: ログイン
リンク: link
情報ボックス: manage
…

よく使うクラスに名前を付ける必要があります使ってみる一般的な英単語を標準として採用し、理解しやすくし、適切な場所に注釈を付けます。二次クラス/ID の命名には、複合書き込みモードが採用され、最後の単語の最初の文字は大文字にする必要があります。たとえば、「検索ボックス」は「searchInput」、「検索アイコン」は「searchIcon」、 "検索ボタン" "名前付き" searchBtn

CSS の記述仕様とメソッド

1. 従来の記述仕様とメソッド

1. DOCTYPE を選択します:

XHTML1.0 では、次の 3 つの DTD 宣言から選択できます。 : 非常に緩やかな DTD が必要です。これにより、HTML4.01 ロゴを引き続き使用できます (ただし、xhtml の記述方法に準拠する必要があります)。完全なコードは次のとおりです。

厳密: 厳密な DTD の場合、プレゼンテーション層識別子は使用できません。完全なコードは次のとおりです:

フレームセット: フレームページ用に特別に設計された DTD。ページにフレームが含まれる場合は、この DTD を使用する必要があります。完全なコードは次のとおりです。

もちろん理想的な状況は、 DTD ですが、ほとんどの人にとって Web 標準に慣れていないデザイナーにとっては、現在、トランジショナル DTD (XHTML1.0 Transitional) が理想的な選択肢です (トランジショナル DTD を使用しているこのサイトも含みます)。この DTD ではプレゼンテーション層も使用できるためです。ロゴ、要素、および要素も、W3C コード検証に合格しやすくなります

DTD については、次を参照してください:

http://www.div-css.net/search.asp?SearchContent=Document Type&searchType=title

2. 言語と文字セットを指定します:

ドキュメントの言語を指定します:

順序ブラウザーによって正しく解釈され、W3C コード検証によって承認されるためには、すべての XHTML ドキュメントで次のようなエンコード言語を宣言する必要があります。

一般的に使用される言語定義:

標準 XML ドキュメントの言語定義:

古いバージョンのブラウザの言語定義:

< metahttp-equiv= "Content-Language" content="utf-8"/>

文字セットを改善するために、「utf-8」の使用を推奨します。

3. スタイルシートの呼び出し:

外部スタイルシートの呼び出し:

ページ内メソッド: ページコードの先頭領域にスタイルシートを直接記述します。例:

外部呼び出しメソッド: スタイルシートを別の CSS ファイルを作成し、ページの先頭領域で次のようなコードで呼び出します。

Web 標準に準拠したデザインでは、使用をお勧めします。外部呼び出しメソッドを使用すると、ページを変更せずに、.css ファイルを変更するだけで、ページのスタイルを変更できます。すべてのページが同じスタイルシートファイルを呼び出す場合、1 つのスタイルシートファイルを変更すると、すべてのファイルのスタイルが変更される可能性があります。

4. 適切な要素を選択します:

HTML 要素のスタイルではなく、ドキュメントの構造に基づいて HTML 要素を選択します。たとえば、P 要素は改行ではなく、テキストの段落を含める場合に使用します。ドキュメントの作成時に適切な要素が見つからない場合は、ユニバーサル div または scan の使用を検討してください。 div と spans の過度の使用は避けてください。 div 要素とspan 要素を少しだけ適切に使用すると、ドキュメントの構造がより明確になり、より合理的で使いやすくなります。

タグや構造的なネストの使用をできるだけ少なくすることで、ドキュメントの構造が明確になるだけでなく、スタイルも維持されます。ファイルが小さくなり、ユーザーのダウンロード速度が向上すると同時に、ブラウザによるドキュメントの解釈と表示も容易になります。

派生セレクターを使用して、サブ要素のスタイルを定義できます。要素の名前付けを簡素化すると同時に、次のような構造も明確になります:

.mainMenuulli{background:url(images/bg.gif;)}

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

首页

介绍

服务

/*======メインナビゲーション======*/
#mainMenu{
width:100;
height:30px;
background:url(images/mainMenu_bg.jpg)repeat-x;
}
#mainMenuulli{
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====メインナビゲーションの終わり====== */

XHTML 標準では、手は IE でのみ認識されます。マウスジェスチャを「手の形」に変換する必要がある場合は、「手」を「ポインタ」、つまり「カーソル」に置き換えます。 :pointer;"

background:url(. . /images/icon.gif)no-report#333;/*検索ボックスの背景を定義します*/
}
2. 段落全体のコメント:

background:url(../images/icon.gif)no-repeat#333;
}
/*= ====検索バーの終わり=====*/

コメントについては、次を参照してください:
http://www.div-css.net/search.asp?SearchContent= Comments&searchType=title

width:100;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1pxsolid#333;
width:100;
height:20px;
overflow:hidden;
}

属性値が重複しています2 つの異なるクラスは次のように省略できます:

width:100;
overflow:hidden;
}
#mainMenu{height:30px;}
#subMenu{height:20px;}

2. 同じ属性の省略形:

background-repeat:no-repeat;
background-position:5050;
}
.search{
background :#333url (../images/icon.gif)no-repeat5050;
}

3. 内枠と外枠の略称:

margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
は次のように省略できます。

.btn{

そして上下辺、左右辺のborder属性値が同じであれば、その属性値は

.btn{

上下左右の境界線の属性値がすべて同じである場合、次のように 1 に直接短縮できます:

3つのRGBカラー値が同じ場合、カラー値コードを省略できます。例:

ブラウザごとに W3C 標準のサポートが異なるため、ブラウザごとにページの解釈や表示が異なります。たとえば、多くの場合、IE と FF の間には 3 ピクセルの違いがあります。 css ハックを使用して調整を行うもちろん、必要がない場合は、ハッキングによって引き起こされるページの問題を避けるために、調整を行うためのハックを作成しないことが最善です。

IE はすべて * を認識できますが、 ! important は認識できません。

。 searchInput{
background-color :#333;/*3 つすべて*/
*background-color:#666 ! important;/*IE7 のみ*/
*background-color:#999;/*IE6 以前のみ*/
}
一般に、この 3 つの書き込み順序は、FF、IE7、IE6 です。

書き込み方法 2:

IE6は「_」を認識できますが、IE7もFFも認識できないため、IE6、IE7、FFの違いだけに着目すると、次のように書くことができます:
.searchInput{
background-color:#333 ;/*全般 */
_background-color:#666;/*IE6 でのみ認識*/
}

* html と *html は IE 固有のタグであり、Firefox ではサポートされていません。
.searchInput{背景色:#333;}
*html.searchInput{背景色:#666;}/*IE6 のみ*/
* html.searchInput{背景色:#555;}/*IE7 のみ*/

select はセレクターです。状況に応じて変更します。 2 番目の文は、MAC 上の Safari ブラウザに固有のものです。

*:lang(zh)select{font:12px! important;}/*FF 専用*/
select:empty{font:12px! important;}/*safari で表示*/

ここでの主な点は、CSS コメントを通じて属性と値を区切ることです。コメントはコロンの前にあります。

OnlyIE
IE5.0 のみ認識可能:
IE5.0 のみ
IE5.0 は IE5.5 で認識可能:
< [ifgtIE5.0]>IE5.0 のみ
IE6 でのみ認識:
IE6-
IE6 で認識可能-
CSSHACK と BUG については、次を参照してください:
http://www.div-css.net/search.asp?SearchContent=HACK&searchType= title
http://www.div -css.net/search.asp?SearchContent=BUG&searchType=title

Firefox では、すべての子がフローティングの場合、親の高さは完全にカバーできません。次に、このクリアフローティング HACK を使用して親を 1 回定義すると、この問題は解決されます。

visibility:hidden;
}

記事ソース: Div-Css.net Design Network参考: http://www.div-css.net/div_css/news/div-css-wangyebuju-jiqiao.asp