HTML&CSS スキルを向上させ、構造化コードを記述する方法_html/css

まえがき

これまでに HTML と CSS の知識点について 4 つの記事を書きましたが、これは知識点のまとめに相当します。必要に応じて、これらのポイントは通常の開発プロセスで発生するはずです。これらのブログを確認すると理解しやすいかもしれません。この記事からは、開発プロセス中に頭痛の種となりやすいフロントエンドの問題と、よりパフォーマンスの高いフロントエンドコードを記述する方法について詳しく紹介します。私もフロントエンドを始めたばかりですので、フロントエンドの専門家全員がコンテンツ内の間違った点を修正して、より早く上達できることを願っています。最近、ブログガーデンでフロントエンドの専門家をたくさん見かけますが、彼らは大手BAT企業で働いており、これは私にとって開発をする夢でもあります。。。

No1.CSS のプレゼンテーションと構成

1.CSS の構造

(1) より古典的なスタイルのアーキテクチャ: 私たちがよく見る Web システムのスタイルファイルには、通常、index.css または Base.css のみが含まれていますが、実際の開発プロセスでは、CSS スタイルをモジュールごとにグループ化し、類似したスタイルを 1 つのモジュールの下に置くようにする必要があります。モジュール化後は多数のcssファイルが追加されましたが、バージョンアップ時には全てのcssファイルを1つのcssファイルに圧縮することができ、ページの読み込み速度が向上します。以下は比較的古典的な CSS スタイルのアーキテクチャです:

# Base //基础样式– normalize.css  //标准化样式– layout.css  //流布局样式– typography.css  //段落样式# Components //组件样式– alerts.css – buttons.css– forms.css– list.css– nav.css– tables.css# Modules 模块样式– aside.css //边栏样式– footer.css //底部样式– header.css //头部样式

ログイン後にコピー

(2) モジュール型 CSS アーキテクチャ: Base、Layout、Module、State、および Theme モジュールを含みます。各モジュールの意味は次のとおりです:

# Base（核心元素style，覆盖body、form等默认样式）# Layout（区别不同元素的size和grid样式）# Module（个别的特别页面样式）# State（基于各种事件，提供不同的状态样式，例如:hover等）# Theme（基于skin、look、feel的样式）

ログイン後にコピー

2. ページの読み込み速度を向上させる方法

(1) セレクターの記述: ブラウザーは CSS スタイル名のパス上のすべてのセレクターをレンダリングするため、選択は短く保つ必要があります。パスを使用するとレンダリングが軽減され、ページの読み込み速度が向上します。

(2) ファイルの削減または圧縮: ファイルが http プロトコルを通じて送信される場合、html、css、および js ファイルを gzip を通じて圧縮してトラフィックを削減できます。さまざまな http サーバーが gzip 圧縮伝送を提供します。

(3) HTTP リクエストを減らす - ファイルの数を減らす: 複数の CSS ファイルを 1 つの CSS ファイルに圧縮したり、複数の JS ファイルを 1 つの JS ファイルに圧縮したりするなど、類似したファイルを 1 つのファイルに結合して、http リクエストのみを送信するようにします。

(4) HTTP リクエストを減らす - ファイルを正しい場所にロードします: CSS ファイルはヘッドの先頭にロードし、JS ファイルはページの最後にロードする必要があります (本文の終了マーク

(5) 画像の結合: アクションボタンのセットがよく見られます。各ボタンには異なるアイコンがあり、ページの読み込み時に各アイコンの読み込みでリクエストが生成されます。結合された画像を複数の要素の背景として使用し、background-position を使用して画像の表示位置を配置できます。この考えを実現したのが次のページです:

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <style type="text/css">        ul { margin: 0; padding: 0; }        li { float: left; list-style: none; margin: 2px; }        li a { background: linear-gradient(#fff, #eee); border: 1px solid #ccc; border-radius: 3px; display: block; padding: 3px; }        li a:hover { border-color: #999; }        li span { background: url("sprite.png") 0 0 no-repeat; color: transparent; display: block; font: 0/0 a; height: 16px; width: 16px; }        .italic { background-position: -16px 0; }        .underline { background-position: -32px 0; }        .size { background-position: -48px 0; }        .bullet { background-position: -64px 0; }        .number { background-position: -80px 0; }        .quote { background-position: -96px 0; }        .left { background-position: -112px 0; }        .center { background-position: -128px 0; }        .right { background-position: -144px 0; }    </style>    <script type="text/javascript"></script></head><body>    <ul>    <li><a href="#"><span class="bold">Bold Text</span></a></li>    <li><a href="#"><span class="italic">Italicize Text</span></a></li>    <li><a href="#"><span class="underline">Underline Text</span></a></li>    <li><a href="#"><span class="size">Size Text</span></a></li>    <li><a href="#"><span class="bullet">Bullet Text</span></a></li>    <li><a href="#"><span class="number">Number Text</span></a></li>    <li><a href="#"><span class="quote">Quote Text</span></a></li>    <li><a href="#"><span class="left">Left Align Text</span></a></li>    <li><a href="#"><span class="center">Center Align Text</span></a></li>    <li><a href="#"><span class="right">Right Align Text</span></a></li>    </ul></body></html>

ログイン後にコピー

表示結果は以下の通りです:

No2. 要素の配置

1. Float 浮動配置問題

(1) Float の古典的な問題: まずコードを見て結果を表示します。：

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <style type="text/css">        .box-set { background: #eaeaed; /* 灰色 */ /* overflow: auto; */ /* overflow技术 */ }        .box { background: #2db34a; /* 绿色 */ float: left; margin: 1.858736059%; width: 29.615861214%; }    </style>    <script type="text/javascript"></script></head><body>    <div class="box-set">        <figure class="box">Box 1</figure>        <figure class="box">Box 2</figure>        <figure class="box">Box 3</figure>    </div></body></html>

ログイン後にコピー

以下の表示効果からわかるように、親コンテナの box-set で設定された背景色は反映されず、親コンテナの高さは 0 になります。

(2) 解決策: オーバーフローテクノロジと Clearfix テクノロジを使用します。

(3) Solution-overflow: box-set スタイルに属性 overflow: auto を直接追加すると、親コンテナの背景設定が有効になっていることがわかります。ただし、互換性を考慮して、IE6 でも幅と高さを設定する必要があります。ただし、box-shadow スタイルなどの他のスタイルを設定すると、シャドウ効果がボックスセットコンテナからオーバーフローする可能性があります。

(4) 解決策 - clearfix: ページを次のコードに変更し、ページのボックスセット表示を正常に実行し、IE6 と 7 の互換性の問題も解決します。 :bofore 擬似クラスは子の上部マージンのオーバーフローを防止し、:after 擬似クラスは子の下部マージンのオーバーフローを防止することに注意してください。

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <style type="text/css">        .box-set { background: #eaeaed; /* 灰色 */ *zoom: 1; }        .box-set:before,        .box-set:after { content: ""; display: table; }        .box-set:after{ clear: both; }        .box { background: #2db34a; /* 绿色 */ float: left; margin: 1.858736059%; width: 29.615861214%; }    </style>    <script type="text/javascript"></script></head><body>    <div class="box-set">        <figure class="box">Box 1</figure>        <figure class="box">Box 2</figure>        <figure class="box">Box 3</figure>    </div></body></html>

ログイン後にコピー

2.position 属性

(1) 位置のデフォルト値: 要素のデフォルトの位置は静的です。

(2) 位置の相対値: 静的な要素の位置属性値に対する相対的なオフセット位置。相対では、他の要素の位置は変更されません。

（3）position的absolute值：元素从常规的流文档中溢出，元素的位置是相对于最近的position为relative或者absolute值得父元素偏移位置，找不到则元素的位置相对于body偏移。

（4）position的fixed值：元素相对于浏览器视窗的偏移位置，不会随着浏览器的滚动条滚动而改变位置。IE6不支持该属性。

（5）fixed实现header和foot停靠功能：下面这个例子实现footer一致停靠在浏览器的最下面，不会随着滚动条位置的变化而变化。

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <style type="text/css">    body { background: #eaeaed; }    footer { height: 100px; background: #2db34a; bottom: 0; left: 0; position: fixed; right: 0; }    </style>    <script type="text/javascript"></script></head><body>    <footer>Fixed Footer</footer></body></html>

ログイン後にコピー

3.z-index属性

（1）默认z-index位置：越排在DOM节点的靠top位置就越在z方向的下边。

（2）前置条件：如果要设置z-index属性，必须设置元素的position属性为relative、aboslute或者fixed。例如下面的代码分别按层次停靠元素：

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <style type="text/css">        .box-set { background: #eaeaed; height: 160px; position: relative; }        .box { background: #2db34a; border: 2px solid #ff7b29; position: absolute; }        .box-1 { left: 10px; top: 10px; }        .box-2 { bottom: 10px; left: 70px; z-index: 3; }        .box-3 { left: 130px; top: 10px; z-index: 2; }        .box-4 { bottom: 10px; left: 190px; z-index: 1; }    </style></head><body>    <div class="box-set">        <figure class="box box-1">Box 1</figure>        <figure class="box box-2">Box 2</figure>        <figure class="box box-3">Box 3</figure>        <figure class="box box-4">Box 4</figure>    </div></body></html>

ログイン後にコピー