CSS 学習ノートの概要とテクニック_html/css_WEB-ITnose

このプロジェクトについて Ye さんに話したところ、静的なホームページを書いてほしいと頼まれました。でも、実際に始めてみると、どうやって始めればよいのか分からないことに気づきました。モデルやモジュールがまったく理解できず、書くのがとても混乱しました。 ！

図に示すように、ページのドロップダウンにはサイドバー、中間コンテンツなどもあります。

でも、先生とやることに同意したので、卑怯なことはできなかったので、思い切ってMOOCでBootstrapを2、3日かけて学びました（講義はとても良いので、Dabaiを読むことをお勧めします）実際、私はすぐに読み終えましたが、その中の多くのことが実際に著者によって非常によくまとめられており、デモンストレーションもありました。

多くのことを得ることができたので、HTML div+css レイアウトをもう一度見てみるつもりです。そのインターフェイスは 1 ～ 2 日で書き終えることができます。それほど自信があるのですね、ははは〜自分を追い込まなければ、自分の良さは決して分かりません。

CSS ボックス モデル、これを理解する必要があります

本を読んでいるときにこの図を見たので、より理解しやすいと思ったので、

1、タグ セレクター

を取り上げました。 2, クラスセレクター class

3, ID セレクター id

2. 優先度: id > class > タグ

3. 擬似セレクター: 実際には要素の状態です

rree

これらの状態を定義するには、次の順序があります。 L V H A

Id とクラス属性名の使用制限

div に適用されるか、他のオブジェクトの ID に適用されるかに関係なく、同じ名前の ID は 1 つの中で 1 回だけ使用できます。現在のページ、クラス属性名は複数回再利用できます。

フレーム内のパーセンテージの関係

例えば、コンテナなどの外側のdivの幅はブラウザウィンドウに対する比率である80%に設定されます。 2 つの内側の div (コンテンツとサイド) の比率は、外側の div に対して相対的です。つまり、コンテナーの幅に基づきます。

可視性と表示属性の違い

可視性と表示はどちらもページ要素を非表示にするという目的を達成できますが、それでも違いがあります。

要素を非表示にしても、ページ上に要素のスペースを保持したい場合は、visibility:hidden を使用します。

空のスペースを他のコンテンツで埋めながら要素を非表示にしたい場合は、display:none を使用します。

CSS ファイルを HTML にインポートするためのヒント

同じスタイルの再利用性と拡張性を向上させるために、複数のタグ スタイルを個別に定義して CSS ファイルにパッケージ化できます。

例: p.css div.css . css import を使用して、複数のタグ スタイル ファイルを CSS ファイルにインポートします。

次に、HTML ページで、リンク タグを使用してインポートします。この一般的な CSS ファイルで十分です。

CSS 属性の記述順序

レイアウト配置属性 –> テキスト属性 –> その他の属性 に従うことをお勧めします。 同様の属性が一緒に記述されるようにしてください。

属性列挙:

a：link：超链接被点前状态a：visited：超链接点击后的状态a：hover：悬停在超链接上的状态a：action：点击超链接时的状态