美しいページはどこから来るのでしょうか? CSSstyles!
CSSの特徴: Web コンテンツとスタイルの分離を実現します
- selector Html のセレクターでマークされたコンテンツは、CSS のスタイルに従って表示されます
- CSS スタイルを Web コンテンツに適用する方法
- インライン スタイル
- インライン スタイル
- 導入方法: html ファイル ボックス css ファイル 成功しました分離
- リンク タイプ: クライアントが Web ページを閲覧すると、まず外部 CSS ファイルを Web ページにロードし、次にコンパイルして表示します。この場合、表示された Web ページには期待どおりの効果があります
- : クライアントが Web ページを閲覧すると、最初に HTML 構造が表示され、次に外部 CSS ファイルが Web ページにロードされます。もちろん、最終的な効果は前者と同じですが、ネットワーク速度が遅い場合は、最初に CSS 統一レイアウトを使用せずに HTML Web ページを表示します
- 長所と短所の比較: スタイルをインポートすると、1 つの CSS ファイルを指すページが多すぎるのを回避できます。 Webサイト内で同じCSSファイルを使用しているページが少ない場合は、どちらの方法でも効果にほとんど差はありませんが、Webサイトのページ数がある程度以上になると(Sinaや他のポータルなど)、 )、リンク メソッドを使用するのは難しい場合があります。これにより、複数のページが同じ CSS ファイルを呼び出すため速度が低下しますが、通常、このレベルのページに到達できる Web サイトには、最適なハードディスクを使用する資本もあります。 , したがって、この要素について心配する必要はありません。
- 基本CSSセレクター
- マークアップセレクター
-
カテゴリセレクター
クラス
-
-
IDセレクター
ID
-
- セレクターの優先順位: ID セレクター > クラス セレクター > HTML タグ セレクター
-
- 交差点セレクター
和集合セレクター
子孫セレクター
-
-
-
- Boxモデル
margin: margins
- Border: border
- padding: inner margins
それぞれ左、下、上の4つの属性 - を4つ設定する場合属性値:
-
-
-
-
-
ボックスの配置
static: デフォルトのレイアウト方法 (ボックスには標準フローに従ってフローティングメソッドが含まれます) レイアウト)
relative: 相対的な配置、指定された値だけボックスをオフセットします元の標準位置からの相対的な距離。他のボックスは引き続き標準フローで処理されます
-
- absolute: 絶対位置決め。ボックスの位置は、そのボックスを含むボックスに基づいてオフセットされます。他のボックスの配置は、あたかもこのボックスが存在していないかのようになります
修正: ブラウザウィンドウに基づいて配置 -
- CSS
- まだまだ学ぶべきことはたくさんあり、今後も深めていく必要があります。