「CSS について」読書メモ_html/css_WEB-ITnose

注:

この本は 2009 年に出版されたものなので、ある程度の知識はあります...ご存知のとおり。

私がよく知っている知識点は記載されていないこともあるので、より詳しく知りたい場合はこの本を読んでください。

濃い灰色の部分は私自身の理解ですので、間違っている点や追加すべき点がありましたらアドバイスをお願いします。

jsfiddle にコードのデモを載せています。中国ではアクセス速度が少し遅いので、しばらくお待ちください。または、中国に同様のオンライン デバッグ Web サイトがあることをご存知の場合は、ぜひ共有してください。

このノートにはコードのデモ リンクの一部のみが記載されています。この本の完全なサンプル コードをご覧になりたい場合は、Baidu Cloud (http://pan.baidu.com/s/1o64sPR0) からダウンロードできます。すでに共有しました。

このメモはかなり長いので、しばらくお待ちください。

CSS を辛抱強く学び、CSS の重要な原則をマスターすれば、CSS が本当に楽しいことが分かるでしょう。

CSS を学習する最良の方法は、やり続け、考え続け、練習し続けることです。

CSS の機能:

不必要な HTML 要素の使用を避けるために、ページ テキスト、画像、その他のページ要素を変更します。

ページ構造とページレイアウトをより効果的に制御します。

開発とメンテナンスの効率を向上させます。

CSS の略語:

色の略語: #RRGGBB ?? #RGB と略されます。

単位値の省略：値が0の場合、単位を省略できます。

内マージンと外マージンの略称：時計回りに上、右、下、左の方向に応じて4つの略称があります。

ボーダー: -width || -style || -color の略語。

背景の略語: -color || -image || -attachment || -position

フォントの略語: -style || -size || /line-height || -family

リストの略語: list-style: -image || -position || -type

CSS セレクター:

タグセレクター: E (html タグ)セレクター: #className

クラス セレクター: .className

ワイルドカード セレクター: *

包含セレクター: 派生セレクターまたは子孫セレクターとも呼ばれ、要素の子孫要素に作用します。

サブセレクター: サブオブジェクト セレクターとも呼ばれ、要素の子要素に作用します。セレクターを接続するには「>」を使用します。

隣接セレクター: 要素に隣接する次の要素 (線形構造の直接後続要素) に作用します。セレクターを接続するには「+」を使用します (IE7+)。

属性セレクター: E[attr]、E[attr=“value”]、E[attr~=“value”]、E[attr|=“value”]、E[attr^=“value”]

セレクターの組み合わせ関係: クラス セレクターまたは ID セレクター、セレクター グループ、およびセレクターの組み合わせを目的を絞って使用します。

疑似クラス:

それに関連する 1 つ以上のセレクターのステータスを指定するために使用されます (IE6/7 サポート部分)。その形式は、セレクター: 擬似クラス {属性: 属性値;} です。

例: a:link{}、a:visited{}、a:hover{}、a:active{}。

擬似クラスを使用すると、実装を支援するためにあまりにも多くの JavaScript を使用することなく、よりインタラクティブな効果をページに追加できます。

疑似オブジェクト:

は、HTML 文書で指定された情報に加えて、文書を作成するための追加情報 (IE6/7 サポート部分) を指します。その形式: selector:疑似オブジェクト {プロパティ:プロパティ値;}。

例: p:before {content: "April 1st"}。

CSS カスケード スタイル シートの特徴は「カスケード」です。いわゆる

カスケード

とは、セレクターの使用に基づいて CSS スタイル シートが相互にスタイルを重ね合わせたり、カバーしたりすることを意味します。

Web ページで定義される 4 つのスタイル:

html: HTML で使用されるスタイルを示します。

作成者: CSS ファイルの作成者を示します。

ユーザー: ブラウザ Web ページのユーザーが設定したスタイルを指します。

ブラウザ: ブラウザのデフォルトのスタイルを指します。

CSS スタイルで採用される優先順位:

! important キーワードで宣言された属性。

HTML の CSS スタイル プロパティ。

作成者によって編集された CSS ファイル スタイル プロパティ。

ユーザーが設定したスタイル。

ブラウザのデフォルトのスタイル。

セレクターの優先順位ポイント:

タグセレクター、疑似クラス、疑似オブジェクト: 優先順位ポイントは 1 です。

クラスセレクター、属性セレクター: 優先ポイントは 10 です。

IDセレクター: 優先ポイントは100です。

スタイル属性: 優先ポイントは 1000 です。

その他のセレクター (ワイルドカード セレクターなど): 優先ポイントは 0 です。

对于 !important关键字的使用一定要谨慎，切勿随便使用，避免产生不必要的问题。

 

内嵌样式表，一般应用在访问量比较大的页面 减少对服务器的http请求数而减少对服务器的负担。

缺点是如果需要修改，那就只能对页面进行修改， 且无法利用浏览器缓存特性。

 

由于浏览器最后解析@import，这样很容易导致IE6的闪屏或者在打开页面的过程中无样式，直到页面加载完毕后才会加载样式的现象出现，因此 不建议使用@import。

 

a7aa28ecea9c76c2bf6495073b604358

    d657c1f03026693bf2216fbd19e13348主要内容区域16b28748ea4df4d9c2150843fecfba68

    0818976174f51fd16148a8e3216f6947侧边栏16b28748ea4df4d9c2150843fecfba68

16b28748ea4df4d9c2150843fecfba68

ブラウザは HTML コードを文ごとに上から下に解析するため、sideBox の前に mainBox を配置する主な機能は、ブラウザ内にコンテンツ領域を事前に表示することです。

CSS スタイルを使用してページ構造をレイアウトする場合、フローティングを使用しない場合、ページのレイアウトには位置決めのみを使用できます。

2 列のページ レイアウト:

2 列の固定幅構造:
重要なポイント: float、幅の指定、:float のクリア後。
効果: http://jsfiddle.net/XianfaLang/tWvph/
前提: 2 つの列のボックス モデルの幅の合計が親要素の幅を超えることはできません。そうしないと、位置ずれが発生します。

2 列の適応構造:
キーポイント: float、幅のパーセンテージ、:float をクリアした後。
効果: http://jsfiddle.net/XianfaLang/MyfXs/

単一列固定幅 - 単一列適応構造:
キーポイント: 相対位置、負のマージン効果: http://jsfiddle.net/XianfaLang/U3J3X/
問題: SideBox に多くのコンテンツがある場合、絶対配置を使用すると、親要素の高さを拡張できなくなり、他の要素のコンテンツが覆われてしまいます。解決策は、JavaScript を使用して親要素の高さを再判断することです。個人的には、JavaScript を使用してこの問題を解決するのではなく、CSS ソリューションが必要だと考えています。いいえ、第 5 章で解決策が示されています: http://jsfiddle.net/XianfaLang/5w8MD/

同じ高さの 2 つの列:
4.1. 背景シミュレーション: 背景画像のタイリングを使用して視覚効果を実現します。身長。
4.2. 負のマージンの実装 (推奨):
原則: 左右方向の外側のマージンを使用して、ページ内のレイアウトのずれを補正します。
重要なポイント: 両方のコンテナーに margin-bottom:-9999px; padding-bottom:9999px を設定し、親要素に overflow:hidden を設定します。
効果: http://jsfiddle.net/XianfaLang/Q5nph/
質問: ページが < ;a> を使用している場合 ページにジャンプすると、一部のテキスト情報が非表示になります。 mainBoxやsideBoxの下部に背景画像を配置すると、背景画像が表示されなくなります。
4.3. 境界線シミュレーション:
重要なポイント: border-right:280px Solid #AAAAAA; 絶対配置
効果: http://jsfiddle.net/XianfaLang/tLmTc/
4.4. JS メソッド:
重要なポイント: JavaScript を使用して設定します。 2つの列の高さは同じです。
効果: http://jsfiddle.net/XianfaLang/C9XcZ/

3 列以上のレイアウト:

width:auto と float の関係を理解する: http://jsfiddle.net/XianfaLang/nMyh4 /

2 列の固定幅の中間適応構造:
キーポイント: フローティング、負のマージン、mainBox の幅は 100% です。
効果: http://jsfiddle.net/XianfaLang/dsfKU/

左の固定幅 - 右と中央の適応構造:
キーポイント: フローティング、マージンの割合、負のマージン。
効果: http://jsfiddle.net/XianfaLang/nB57t/

3 列の幅適応構造: 左側の固定幅と同様、右側と中央の適応構造。幅をパーセンテージに変更するだけです。

同じ高さの 3 つの列:

原理は同じ高さの 2 つの列の場合と同様で、実装方法は 4 つあります。ここには 2 つのタイプのみがあります:
ネガティブマージンの実装: http://jsfiddle.net/XianfaLang/hRq2q/
ボーダーシミュレーション: http://jsfiddle.net/XianfaLang/EBww5/

テキスト関連

text -indent 属性は、次のようにテキストを横に「押し込む」ことができます: p { text-indent: 2em; } /* 段落のインデントを 2em に設定します */ 「吸引」効果のある 負のマージン を思い出させます。

テキストを非表示にする方法:

a. text-indent/line-height を使用して、テキストをコンテナーの外に「プッシュ」します。
b. 可視性: 要素を非表示に設定しますが、スペースを占有します。
c. 表示: なし。要素を非表示にし、スペースを占有しないように設定します。

画像関連

PNG の利点:

は現在最も歪みのない形式であり、GIF と JPG の両方の利点を活用しており、豊富な保存形式を備えています。

画質に関連するすべての情報を保持しながら、ネットワーク送信を容易にするために画像ファイルを限界まで圧縮できます。

表示速度が速い。

透明な画像の作成をサポートします。

PNG 欠点: アニメーション効果をサポートしません。

PNG-8 は GIF よりも少し小さいですが、GIF はアニメーション化できますが、PNG-8 ではアニメーション効果を実現できません。

PNG-24 は最もカラフルな画像であり、完全に透明な画像のみをサポートする PNG-8 や GIF とは異なり、アルファ チャネルの透明度をサポートします。

画像を半透明にし、ページをより美しくすることができるアルファ チャネルの透明度をサポートします。

背景画像の基準点としてどの形式の画像を使用する必要がありますか:

画像が著しく歪んでいるかどうか。

どの形式の画像が最小ですか。

画像に透明効果があるかどうか、ある場合はアルファ透明効果があるかどうか。

背景位置 注:

背景画像は、最初に水平位置を設定し、次に垂直位置を設定する必要があります。

値が 1 つだけある場合、その値は水平方向の位置決めに使用され、垂直方向の位置決めはデフォルトの 50% に基づきます。

属性値がパーセントの場合は画像の中心点を基準に相対位置が計算され、ピクセル値がpxの場合は画像の左上隅が計算されます。

負の値も使用できます。

CSS スプライトは、頻繁に使用されるグラフィック要素を結合するためによく使用されます。

CSS スプライトノート:

コンテナの幅と高さを修正します。

コンテナの幅と高さを超える背景画像は非表示にする必要があります。

背景画像を結合するときは、各画像の目的を考慮する必要があります。

グラフィックとテキストの混合: a1f02c36ba31691bcfe87b2722de723b に float を設定: left;

3 つのリスト:

順序なしリスト: ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6...ae99c402cc566312349e737f82c86cf6

順序付きリスト:c34106e0b4e09414b63b2ea253ff83d625edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632ebc34106e0b4e09414b63b2ea253ff83d6

カスタマイズされたリスト:5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca94タイトルeb24fd95d3eb75652009dccb02dcfa5b ;Content82e295699cff932a4d4dabba39074c35 cd324b2387ec29e44e8e788c60648872

インライン要素には幅と高さの属性がありません。ブロックレベルの要素に変換された後にのみ幅と高さの属性が存在します。

CSS スタイルでブロック要素を水平に配置するには、位置決めとフローティングの 2 つの方法しかありません。

CSS はパフォーマンス上の効果を実現し、JavaScript は動作上の効果を実現します。

CSS スタイルを使用するには、全員が CSS スタイルの理解を向上させ、問題に対処する能力を向上させるために、常に新しいコンテンツを探索して試す必要があります。

リストの例:

2 番目のメニュー ナビゲーション (水平):
重要なポイント: 全体の幅、第 1 レベルのリストの幅と高さ、およびフローティング、第 2 レベルのリストの絶対位置。
効果: http://jsfiddle.net/XianfaLang/4CPdG/

画像とテキストのリスト情報:
キーポイント: 全体の幅、フローティング。
効果: http://jsfiddle.net/XianfaLang/KM7Ua/

理解、分析、および要約は、実行する必要がある手順です:

各例で説明されている手順と実装方法を理解します。

各メソッドの使いやすさと、他に優れた実装方法があるかどうかを分析します。

それぞれの実践で得た経験を要約します。

IE ブラウザでは、ボタンとテキストの間の垂直方向の配置関係は、チェック ボックスとテキストの間の配置関係と同様であり、vertical-align を使用して調整する必要があります。

テーブル関連

border-collapse: テーブルの行とセルの端が結合されるかどうかを取得または設定します。デフォルト値: 個別。マージ: 崩壊します。

隣接するセレクターを使用して、交互の行の色を変更できます。個人的には、この知識ポイントは主に隣接するセレクターの応用を理解するためのもので、実用性はほとんどないと感じています。

カレンダーテーブルの作成: http://jsfiddle.net/XianfaLang/Z4wVQ/2/

table タグは、ページレイアウトではなく、データ構造を表示するために使用します。

float は、ページ上の要素を水平方向に 並べて 表示し、position は、ページ上の要素を 重なって して表示します。

CSS フィルターを使用する前に、いくつかの質問について考える必要があります:

CSS フィルターがページ上で何度も使用されるかどうか。

CSS フィルターを使用すると、より多くの CPU を使用しますか?

CSS フィルターによって生成された効果を画像を使用して直接置き換えることはできますか。

CSS フィルターを使用した後、ページ上のコンテンツの操作に影響しますか?

iframeを使って実装された「タブ」は、徐々にページ内容を一つに統合したり、JSで表示内容を切り替えたりするように進化してきました。

タブを実装するには、HTML 構造と CSS スタイルの間の微妙な関係を把握する必要があります。

負のマージンとカスケード効果の適用: 奇妙なナビゲーション メニュー。

IE ブラウザは、各リスト li の間に数ピクセルのスペースを生成します。float:left; を使用して、余分な数ピクセルを「非表示」にします。

例を分析する最良の方法は、例を単純化し、問題を根本的に理解して分析することです。

クリアフローティングエフェクト:

ページの位置ずれを解決します。

子要素が浮動しているため、親要素が子要素の高さに適応できない問題を解決します。

float をクリアするためによく使用されるメソッド:

1. clear 属性 -- よく使用される clear: 両方;

2. 追加のタグを追加します: 56c5d334198039483265786248524197b540f28881ddca37a12f5e2817938eef 4. 親要素の設定: overflow: hidden; IE6 でトリガーされます (zoom など): 1)

5. 親要素の設定: display: table;

6. 親要素の設定:疑似クラスの後 (推奨):

.clearFix:after {    clear: both; /* 清除伪类层以上的浮动 */    display: block;   /* 使生成的元素以块级元素显示,占满剩余空间; */    visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */       height: 0;    line-height: 0; /* 设置伪类层中的高度和行高为0 */    content: " "; /* 将伪类层中的内容清空 */}.clearFix {    zoom: 1; /* 针对IE浏览器产生hasLayout效果清除浮动 */}

構造分析 これはページ作成の最初のステップです。

ユーザーは、スクロール バーが左右ではなく上下に動くことに慣れています。

写真が大きい場合は、2つの写真にカットすることができます。

セマンティック XHTML タグを使用する利点:

スタイルを正常にロードできない場合でも、明確な文書構造が表示されます。

SEO (検索エンジン最適化) のパフォーマンスを向上させます。

プログラム開発との連携を強化します。

ページ後のメンテナンスの効率を向上させます。

あなたの作品を共有し、あなたの作品を批判する人たちに感謝の意を表しましょう。彼らはあなたに、より良いやり方を教えてくれるからです。

コードを書く能力を向上させる方法:

CSS マニュアルをもっと読んでください。

XHTML コード内の各タグの意味。

CSS レイアウトの Web サイトがどのように扱われるかを分析するのが得意です。

CSS レイアウトの Web サイトを書く練習をもっとしてください。

インターネット検索エンジンの使い方を学びます。

レイアウトの問題を解決するための補助ツール (Firebug、Chrome devtool) の使用が得意です。

経験の要約とメモの整理が得意 (PC/モバイル/Web で利用できる Youdao クラウド メモを使用することをお勧めします。WeChat のリンクをコピーすることでクラウド メモを直接同期できるため、メモを読む暇があります)。

コードスニペットを収集して使用します。