Html/CSS (初心者向けの最初のエントリ)

1. Web 標準の意味を理解する - Web 標準を使用する理由
***** コンテンツとスタイルを分離する
1. Web 標準は一連の標準、つまり一連の技術標準です
使用する場合は組み合わせて使用​​しますアプリケーション
【1】、構造化コンテンツhtml
【2】、表現力豊かなコンテンツcss
【3】、動作コンテンツJavaScript
2、Web開発ガジェット--Firefoxのfirebug
ツール--アドオン--search firebug
作業するにはWeb フロントエンドとして、IE、Firefox、Google Chrome、Safari などのブラウザと互換性がある必要があります。
Web ページに CSS スタイルがあるかどうか、ブラウザーでテキスト サイズをテスト変更します。
3. CSS 定義スキル:
[1]。将来の CSS コードの最適化のために、すべての属性値の後に「;」を付けることをお勧めします
[2]。たとえば、h1 タグには独自の属性値があり、自動的に太字で大きなフォント サイズで表示されます。
【3】主流ブラウザとの互換性と統一のため、設定時にすべての要素のcss属性を標準にリセットすることを推奨します。
【4】. ブラウザごとに CSS 属性値が異なります。最も重要なことはブラウザの互換性です。
【5】使用したい特殊なフォントがある場合はどうすればよいですか？ --それを写真に変換します。
(CSS3は@font-faceに渡すことができます

カスタマイズされたフォント)中国語と英語のフォント。フォントの順序を設定し、英語フォントを前に、中国語フォントを後ろに設定します。
【6】、CSS編集ツール - 専門家なら何でも使えます、葉っぱを使って人を殺します。
【7】. テキストを縦方向の中央に配置したい場合は、行の高さ = 要素の高さを設定します。
【8】 のデフォルトのスタイルに戻すことができます。 htmlタグ。
4. CSS を Web ページに適用する方法: それは人々が服を着る方法と同じです。
【1】、インラインスタイル：1つに適用されます。
【2】. 埋め込みスタイル: ラベルの種類に適用されます。
【3】Webページが多い場合はCSSを使用し、CSSを別ファイルに記述する必要があります（推奨）。
【4】.インポートされたスタイル: スタイルもファイルに書き込まれ、Web ページに流し込まれます。
*****説明、インポートされたスタイルは実際には埋め込みスタイルと似ており、両方とも Web ページにスタイルを追加します。
1. インポートすると HTML ファイルのスペースが占有されます。
2. 一部のブラウザでは解析の問題が発生する可能性があります。ブラウザは最終的に @import のコンテンツを読み取ります
3. 複数のスタイル ファイルを 1 つのスタイル ファイルにインポートします。

2. cssの特徴

cssはカスケードスタイルシートと呼ばれます。
1. 継承: 子要素は親要素の一部のスタイルを継承します。
[一部の子要素にはデフォルト値があるため、親要素は使用されません]
2. オーバーレイ: 子要素が親要素と同じスタイルを定義している場合、親要素のスタイルを上書きします。
****次のスタイルは以前のスタイルを上書きします

3. CSS スタイルの優先順位: スタイルが競合する場合、誰が耳を傾けるべきでしょうか? (! important を使用して優先度を上げることができます)

css の優先度: 近接性の原則
スコープが小さいほど、優先度は高くなります。
スタイルが修正対象に近いほど優先度が高くなります。

おじいちゃん--赤

お父さん--緑
子供--青
優先度を選択
インライン>id>クラス>ラベルセレクター
特別な状況では、特定の属性の権限を増やすことができます
*****IEtestツール、互換性の問題もあります。ie6 は win7 では開けません。ie6 の緑色バージョンをダウンロードしてください。使用するバージョンを直接インストールする必要はありません。

4. よく使用されるテキストおよびテキスト制御の CSS スタイル

*****CSS スタイルを適用するときは、そのデフォルト値に注意する必要があります。ブラウザごとに CSS のデフォルト値が異なるため (ブラウジング属性が異なる)
サーバーのサポートも異なります。また、Web ページの互換性を確保し、互換性の異なる属性の代わりに渡された属性を使用するようにする必要があります。 )

5. CSS は要素の特定の状態を制御します - 疑似クラス

疑似クラスの構文:
要素名: 疑似クラス名 {属性: 値}
例: ハイパーリンクのマウス通過状態
a: hover{text-decoration : 下線 ;}
****マウスを置いた効果が機能しない場合は、接続ステータスの順序を L-V-H-A に変更してください