1.CSSの略語ルールを上手に活用する
/*上下左右の書き順に注意*/ 1.余白(4辺)について: 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px (省略された左は右と等しい) 1px 2px (省略された上は下と等しい) 1px (4 つの辺はすべて同じ)
2. すべてを簡略化します: */ body{margin:0}--- ------- --Web ページ内のすべての要素のマージンが 0 であることを示します。 #menu{ margin:0}-----------Web ページ内のすべての要素のマージンが 0 であることを示します。メニュー ボックスは 0
3 です。 略語 (境界線) 固有のスタイル:
Border:1px Solid #ffffff; テキストの略語規則: Font-style:italic formフォント バリアント:小文字/標準; フォント バリエーション:小文字/標準; フォント サイズ:1.2em(120%)/1.5em(150%); :arrial,sans-serif,verdana; 省略形 Into: Font:italic small-caps 太字 12px/1.5em arrial,sans-serif; 注: Font-size と Line-height はスラッシュで結合されており、別々に記述することはできません。
5. 背景画像について: 背景:#FFF url(log.gif) no-repeat 左上固定;
6. リストについて: リスト スタイル タイプ: 正方形/なし; inside ; List-style-image:url(filename.gif); と省略します: List-style:none inside url(filename.gif);
2. CSS スタイルを導入する 1.link < "stylesheet" type="text/css" href="a.css"> rel 関係タイプのデータ型。複数の href パスがあり、一部のブラウザでは候補スタイルがサポートされます。キーワード: 代替: < link rel="stylesheet" type =”text/css” href=”a.css”> 内部スタイル ブロック --外部参照CSSファイル(2) 優先順位はアクセス順ではなく、CSS内の宣言順で設定されます。 上の例と同様に、CSS 定義では . yellow が .blue の後にあるため、
は黄色として表示されます。
も黄色として表示されます。8. 正しいリンク スタイルを記述します
CSS を使用してリンクのさまざまな状態を定義するときは、次の記述順序に注意してください: L V H A の最初の文字を使用すると、LoVe を思い出すことができます。 、Hate、順序を覚えておくための2つの単語。
:link --------リンクの色
:visited -----マウスをクリックした後の色
:hover -------マウスをクリックしたときの色配置されているがクリックされていない (hover)
:active-----マウスクリック時の色
9. :hover
の柔軟な使用IE6 は a タグ以外の :hover 属性をサポートしていません:hover 属性はマウス ホバー効果であると理解しています。 IE7 および FF では、ほぼすべての要素に :hover 属性効果を設定できます。これは、さまざまな訪問を行う場合に非常に効果的です。
のような:
p {
width: 360px;
height: 80px;
padding: 20px;
margin: 50px auto 0 auto;
border: 1px Solid #ccc;
行の高さ: 25px;
背景 : #fff;
}
p:hover {
ボーダー : 1px ソリッド #000;
背景 : #ddd;
}
---------- -----この効果は IE7 および FF 用です
p a {
color : #00f;
text-decoration : none;
font-size : 13px
}
p a:hover {
; color : #036;
text-decoration:Underline;
}
---------------この効果は IE6
10 を定義する際に注意すべき小さな問題です。 A タグ
a{color:red;} を定義すると、A の 4 つの状態のスタイルを表します。マウスが置かれている状態を定義したい場合は、他の 3 つの状態を定義するだけです。 are A で定義されたスタイル。
a:link が 1 つだけ定義されている場合は、他の 3 つの状態を忘れずに定義してください。
11. コンテンツのラップの禁止とコンテンツのラップの強制
テーブルやレイヤーでは、いくつかの CSS 属性を使用してこれらの要件を実現できます。
改行を無効にする: White-space:nowrap
改行を強制する: word-break: Break-all; White-space:normal; 12. 相対と絶対の違い
絶対---CSSでの書き方は:position:absolute ; これはブラウザの左上隅を指し、TRBL が設定されていない場合、
のデフォルトになります。親のマーキングの原点が原点になります。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。
Relative---CSS での記述方法は、position:relative; 親の原点を原点として参照することを意味します。 TRBL では、親
にパディングなどの CSS 属性がある場合、親コンテンツ領域の原点を基準に配置されます。
その 13. ブロックレベル要素 block とインライン要素 inline を区別します
ブロックレベル --- 幅と高さを定義でき、別の行を占有します (例: div ul)
インライン --- width とテキスト要素(スパンなど)のように高さは定義できません 14. 表示と可視性の違い
Display:none と Visibility:hidden はどちらも要素を非表示にできますが、Visibility:hidden は要素のコンテンツのみを非表示にします。ただし、使用される位置スペースは引き続き保持されます。 Display:none はページから要素を削除するのと同等で、その要素が占有している位置も削除されます。
15. 背景の構文
background-image:url(background pattern.jpg, gif, bmp);
background-color: #FFFFFF; (背景色)
background-color : 透明; -- 背景を透明色に設定しますか?>
background-repeat 背景画像の繰り返しのサイドバイサイド設定を変更します
背景画像が Y 方向に並んでいますリピートなし背景画像は並べて処理されません
Background-attachment 画像の位置を固定するかどうか
説明
scroll スクロールを引くと背景画像が移動します（デフォルト値）
fixed スクロールを引くと背景画像は移動しませんスクロールが引かれます
長さによる背景位置の位置: x y
パーセンテージによる背景位置の位置: x% y%
説明
x% 右に移動
y% 下に移動
backgroud-position: 0 % 0%; 左上
背景位置: 0% 50%; 左中央
背景位置: 50% 0%; 中央
背景位置: 100% 0%; 右上
背景位置: 0% 100%; 左下
背景位置: 100% 50%; 中央下背景-位置: 100% 100%; 右下はキーワードで配置されます
キーワード 説明
top 上 ( y = 0 )
center middle ( x = 50, y = 50 )
bottom Bottom (y = 100)
left 左 (x= 0)
Exp:
background-position:center;
画像は、X=50% Y=50% の位置で指定された背景の中央にあります
background-position: 200px 30px
16. コメントの書き方
HTML の場合:
<-- フッター --> CSS の場合:
/* -- ------- - header --------------- */ style 17. CSS命名規則
1. idの命名
(1) ページ構造
コンテナ:container
コンテンツ: content/container
ページ本文：main
フッター：footer
ナビゲーション：nav
サイドバー：sidebar
列見出し：column
ページ周辺 全体のレイアウト幅を制御：wrapper
控中:左右center
(2) ナビゲーション
ナビゲーション: nav
ドミナントナビゲーション: Mainnav
ナビゲーション: Subnav
ナビゲーション: TOPNAV
ボーダーナビゲーション: サイドバー
左側のナビゲーション: leftsidebar
右側のナビゲーション:
メニュー：menu
サブメニュー: submenu
タイトル: title
要約: 概要
(3) 機能
ロゴ: logo
広告: バナー
ログイン: ログイン
ログインバー: loginbar
登録: regsiter
検索：検索
リボン：ショップ
タイトル：タイトル
参加：ジョイナス
ステータス：ステータス
ボタン：btn
スクロール：スクロール
タグページ：タブ
記事リスト: list
プロンプト情報: msg
Current: current
Tips: Tips
Icon: icon
Note: note
Guide: guild
Service: service
Hotスポット: ホット
ニュース:ニュース
ダウンロード: ダウンロード
投票: 投票
パートナー: パートナー
リンク: link
著作権: copyright
2. クラスの名前付け
(1) 色: 色の名前または 1 6 ベース コードを使用します。
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
（2）フォントサイズは「font+font Size」を直接使用します。
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
などの名前として (3) 配置スタイル、配置ターゲットの英語名を使用します。
.left { float:left; }
.bottom { float:bottom; }
(4)
.barnews { }
.barproduct { など、「カテゴリ + 関数」を使用して名前を付けたタイトル バーのスタイル}
注::
U はすべて小文字です。中央のバーと下にスクラッチ行を追加しないようにします (例: mainContent)。
3. メインサイトCSSファイル
モジュール module.css
基本共有base.css (root.css)
レイアウト、layout.css
Themes.css
Columns.css
Text font.css
Forms Forms.css
Patch mend.css
Print print.css
18. パディングは幅に影響します
スペースがある場合の間で必要ですネストするラベルのグループを指定し、外側にあるラベルのパディングを定義するのではなく、内側にあるラベルのマージン属性に任せます。 19 、完全な単一ピクセルの境界テーブル
table{border-collapse:collapse;}
td{border:1px Solid #000;}
20. テキストが長すぎる場合は、長い部分を省略記号として表示に変更します
値を見つける必要はありません。以前のスタイル P が将来変更されると、定義した p.style1 のスタイルも変更されます。 (この方法は、後でスタイルを変更する場合に非常に重要です)
22. よく使用されるいくつかの CSS 詳細処理スタイル
1) 両端の漢字の配置: text-align:justify:inter-ideograph;
2) 固定幅の中国語文字の切り捨て: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; (折り返しは許可しませんが、複数行ではなく 1 行のテキスト切り捨てのみを処理できます。) (IE5 以降) FF は
できず、非表示にするだけです。
***ユニバーサル強制改行:white-space:normal;word-break:break-all;
禁止された改行:white-space:nowrap
強制改行:word-wrap:break-word; -break: Normal;
.AutoNewline
{
/*word-break: Break-all; メソッド 1 が必要*/
/*word-wrap:break-word;overflow:hidden; メソッド 2 */
/* word-wrap:break-word; word-break:normal; メソッド 3*/
Word-wrap:break-word; word-break:break-all;
}
.NoNewline
/* word-break: keep-all; 方法 1 必須*/
white-space:nowrap;
}
3) 固定幅の漢字 (単語) 改行: table-layout:fixed; Break:break-all ; (IE5 以降) FF はできません。 4)Textマウスを使用して前のテキストを配置し、効果を確認します。この効果は多くの海外のウェブサイトで見られますが、中国ではほとんど見られません
。 5) 画像を半透明に設定します: .halfalpha {background-color: #000000; filter: Alpha (Opacity=50)} IE6 と IE5 ではテストに合格しましたが、FF では失敗しました。これは、このスタイルがプライベートであるためです。 IE; 6 ) FLASH 透明度: swf を選択し、元のコード ウィンドウを開き、 の前に を入力します。
FIREFOX の場合、
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
8) ブラウザーでのレイヤーの中央揃えの問題
body { text-align: center }
#content { text-align: left; width: 700px; margin: 0 auto }
9) 単一行コンテンツの垂直方向レイヤー内の配置の問題
# content{height:19px; line-height:19px; }欠点は、コンテンツを折り返す必要がないことです。 10) ブラウザーでのレイヤーの垂直方向の中央揃えの問題
欠点は、スクロール バーが水平方向と垂直方向に表示されず、1 つの画面にのみ表示されることです
実際、解決策は次のとおりです: まず、位置が必要です:絶対的な; 絶対的な位置決め。レイヤーの配置には、負の外側パッチ マージンを使用する方法を使用します。負の値のサイズは、レイヤー自体の幅と高さを 2 で割ったものです。
例: レイヤーの幅は 400、高さは 300 です。絶対位置を使用し、上と左の距離を 50% に設定します。 margin-top の値は -150 です。 margin-left の値は -200 です。このようにして、ブラウザ内でレイヤーが垂直方向の中央に配置される
スタイルの書き込みを実現しました。
コード例を参照してください:
div {
Position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
Border:1px ソリッドレッド;
}
11) CSS 制御画像適応サイズ
div img {
max-width:600px;
width:600px;
wi dth:expression ( document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
その二十三、float 属性を持つ要素を使用する際の注意点
1. border 属性を使用します。エラーを判断するには 要素のレイアウト特性: float 属性のレイアウトを使用すると、注意しないとエラーが発生する可能性があります。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。 2. float要素の親要素にclear属性を指定することはできません
MacIE上でfloat要素の親要素にclear属性を使用すると、周囲のfloat要素のレイアウトが乱れてしまいます。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。 3. float 要素は width 属性を指定する必要があります
width を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。
また、要素を指定するときは、単位として px ではなく em を使用するようにしてください。 4. Float要素ではmarginやpaddingなどの属性を指定できません。IEではmarginやpaddingを指定してfloat要素を表示する場合にバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハック メソッドを使用して IE に特別な値を指定することもできます。 5. float 要素の幅の合計は 100% 未満でなければなりません
float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。 24. ブラウザの互換性の問題 (FF/IE6/IE7 の場合)
1. CSS ハック: IE6、IE7、firefox を区別する
. オレンジ; *背景:青;
IE6 は * を認識できますが、!重要です
もう 1 つ、「_」に下線を付けます。
IE6 は下線をサポートしていますが、IE7 も Firefox も下線をサポートしていません。このようにして、Firefox、IE7、IE6を区別することもできます
背景:緑!重要; _背景:青;
アウト アウト アウトライン スルー アウト 背景:緑!重要;2. Firefox と IE での BOX モデルの解釈に一貫性がないため、2px の違いが生じます
div{margin:30px! important;margin:28px;}
これら 2 つのマージンの順序を逆にしてはいけないことに注意してください。 !重要 この属性は IE では認識されませんが、他のブラウザでは認識されます。実際、IE では次のように解釈されます: div{maring:30px;margin:28px} 定義を繰り返す場合は、
を押して最後の定義に従って実行されるため、単に margin:XXpx! important;
と書くことはできません。 3. 条件付きコメント 別のブラウザを選択します (CSS ハックより簡単です)
4. IE8 を区別します
.color{
background-color: /*すべてのブラウザは紫色で表示されます*/
背景 -color: #FF00009; /*IE6、IE7、IE8 は赤色に表示されます*/
*background-color: #0066FF; /*IE6 および IE7 は青色に表示されます*/ *IE6 は緑色に表示されます*/
25. W3C に従う標準原則
1. テーブルを配置する前に、最適なソリューションを慎重に検討し、 内の 3 つのレベルでテーブルのネストを制御するようにしてください。また、2 つのタグ
2. Web ページでは、すべてのコンテンツがこの大きなテーブル内にネストされるようにする必要があります。これは、Web の場合、ブラウザーがページの要素を解釈するときに、それらを 1 つずつテーブル単位で表示するためです。ページは大きな
テーブル内にネストされているため、訪問者が URL を入力すると、最初は長い間空白のスペースが表示され、その後、すべての Web コンテンツが同時に表示されます。これを行う必要がある場合は、 タグを使用して、
大きなテーブルを分割して表示できるようにします。
3. 組版では、効果を得るために最初の行をインデントする必要があることがよくあります。標準的な方法は、スタイル シートで p { text-indent: 2em; を定義することです。それぞれの段落に
マークを追加します。通常の状況では、終了マーク を省略しないでください。
4. 原則として、画像表示のサイズを人為的に妨害するために
画像のサイト サイズによっては、読み込みプロセス中に Web ページがジッターする可能性があります (画像が固定サイズのテーブルに挿入されている場合、この現象は発生しません) )、特に画像サイズが大きい場合にはこの現象が顕著になりますので、明らかにWebページのカクつきが予想される場合は必ず
5. ブラウザの自動レイアウト機能を最大限に活用するために、完全なテキスト内で手動で分割に介入する
6. 異なる言語の単語の間には、ヘッダー記号の前と末尾記号の後を除き、半角スペースを入れる必要があります。漢字間の句読点は全角句読点とし、英語の文字と数字を囲む括弧は必要です。半角括弧を使用します。
7. すべてのフォント サイズはスタイル シートを使用して実装する必要があり、 タグをページに表示することは禁止されています。
8. Webページ内に複数の連続して出現しないようにし、全角スペースはできるだけ少なくしてください（英語の文字セットでは全角スペースは文字化けします）。 、padding、margin、hspace、
vspace、透明gif画像を可能な限り使用する必要があります。
9. 中国語と英語を混合する場合、英語と数字を verdana フォントと arial フォントとして定義するよう最善を尽くします。
10. 行間隔をパーセンテージで定義することをお勧めします。一般的に使用される 2 つの行間隔の値は、line-height:120%/150% です。
11. Web サイト内のすべてのパスは相対パスを使用し、通常はリンクします。たとえば、デフォルト ファイルのリンク パスは、次のように記述する必要はありません。次のようになります: ”aboutus/”> 12. グラフィックにテキストを埋め込む場合は、より大きなフォントを使用する グラフィックにはテキストを含めないことをお勧めします。 13. 「Web ページのサイズ」は、HTML ファイルとすべての埋め込みオブジェクトを含む、すべての Web ページのファイル サイズの合計として定義されます。ユーザーは斬新なサイトよりも高速なサイトを好みます。モデム ユーザーの場合、Web ページのサイズを 34K 以下に保つことが適切です。 14. Float 要素は width 属性を指定する必要があります。width を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。 また、要素を指定するときは、単位として px ではなく em を使用するようにしてください。 15. Float要素ではmarginやpaddingなどの属性を指定できない IEでは、marginやpaddingを指定してfloat要素を表示するとバグが発生する。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハック メソッドを使用して IE に特別な値を指定することもできます。 16. float 要素の幅の合計は 100% 未満である必要があります float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。
< ;/ dl>
l dt と dd に ol ul li と p を追加できます
27. float をクリアします
clearfix:after {content :"."; 表示:ブロック; 高さ:0; クリア:両方; 可視性 :hidden;} すべての子がフローティングの場合、この HACK を使用して子全体を完全にカバーできません。 float を使用して親を一度定義すると、この問題を解決できます。 .clearfix { display:inline-block; } /* IE-mac から非表示にする */ * html .clearfix { height:1%; } .clearfix { display:block; }
/* IE-mac から非表示にする */
** この種の使用法は、グラフィックとテキストを混合する場合により一般的ですが、margin と clear{clear:both} を使用して直接制御するのは簡単ではありません。
28. テキスト処理 1. 一般フォント: font-family: "Lucida Grande"、Verdana、Lucida、Arial、Helvetica、"宋体"、sans-serif タイトルフォント (h1/h2): font-family: Cambria、ジョージア州、「タイムズ ニュー ローマン」、タイムズ、セリフ; 2. ドロップ キャップ: P:first-letter{padding:10px,fontsize:32pt;float:left} 3. ピンイン中国語文字:
29、最小高さのマルチブラウザ互換性の問題 Div{ min-height: 450px; height:auto! important; height:450px; overflow:visible;??? ; 親レイヤーを含めるには理由があるため、すぐにコンテナーが表示されます。 · 3 ピクセルのテキストの動きが遅い場合でもパニックにならないでください。高さの設定はさまざまなブラウザと互換性があることに注意してください。デフォルトの設定は問題ないかもしれません。フロートを個別にクリア、行の高さをなしに設定、高をゼロに設定、デザイン効果とブラウジング。レイアウトの学習にはアイデアが必要です。パスはレイアウト原則に従って自然で直線的で、HTML の制御が容易で、ハックが少なく合理化されたレイアウトです。コード、優れた互換性、フレンドリーなエンジンを歓迎します。 · すべてのタグがアクティブですが、デフォルトは異なります。span は Wiji です。Wiji は Inline とブロック レベルを生成します。img は特別ですが、法的原則にも準拠しています。その他は単に変更されており、* 記号はすべて に戻ります。オリジナルのカスケード パターンはもっと練習する必要があり、すべてが規制されています。 · 画像リンクの書式設定には注意してください。画像リンクのテキストリンクが整列している場合は、padding とvertical-align:middle を設定する必要があります。多少の違いは問題ありません。 · IE フローティング二重マージンの場合は、display: inline を使用してください。 · リストは水平方向に入力する必要があり、リスト コードは互いに近くに配置し、ギャップを覚えておく必要があります。
31. Web でのフォント アプリケーション 実用的でシンプルなフォント ファミリーのいくつかのセットを要約します: Tahoma、Helvetica、Arial、sans-serif シリーズのニュートラル フォント。 13px以上の環境でのご利用を推奨いたします。フォントファミリー: Trebuchet MS、Verdana、Helvetica、Arial、サンセリフ、Verdana ファミリーのワイド フラット フォント。 11px以下の環境でのご利用を推奨いたします。 font-family: Geogia、Times New Roman、Times、serif フォントが最適です。 主に 16 ピクセルを超える大きなタイトル フォントに使用されます。 font-family: Lucida Console、Monaco、Courier New、mono、monospace 一連の等幅フォント。コードを書くことは非常に便利です。さらに、Lucida Console が広すぎると感じた場合は、幅の狭い Lucida Sans Typewriter に切り替えることができます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
