CSS についてどれくらい知っていますか (2) - css_html/css_WEB-ITnose を学習するためのアイデア

このシリーズの最初の記事を 2 週間前に書きましたが、当時は解決策について考えていただけで、しばらく更新されていませんでした。いくつかの初期結果が得られたので、更新を開始しましょう。

1． 冗談です

テーマは深刻すぎる必要はありません。ブログを書くことは本を書くこととは異なります。雑談のように書くことが自分自身を表現する最良の方法です。

以前ジョークを見たのを覚えていますが、それは本当のことかもしれません、それは問題ではありません。一般的な内容は次のとおりです。 香港の教授はこう言いました。香港の大学と本土の大学には大きな違いがあります。本土の大学では、警備員さえも哲学を理解しています。なぜなら、キャンパスに入ろうとすると警備員がいるからです。 「あなたは誰ですか、どこから来て、どこへ行くのですか？」という非常に哲学的な質問をします。

そのジョークを読んだ後の最初の反応は、自分自身を笑った後、何をすべきかを忘れてしまったということでした。

でも、哲学が何なのかは知りませんが、この文章には少しガンダム的な意味があると思います。 「あなたは誰ですか、どこから来たの、どこへ行くのですか」を CSS チュートリアルにマッピングすると、次の質問をすることができます:

1. CSS とは何か、CSS を深く理解する方法、HTML との違い関係性;
2. CSS のソースがいくつかあります (5 つのソース)
3. CSS の機能とそれを HTML と組み合わせる方法

私の他のチュートリアルを読んだ友人は皆、私の原則を知っています。何か、非常に特別で非常に合理的で効率的だと思う別のアイデアがあるはずです。それが存在しない場合は、それを書きたくないです。 CSS を書く人のほとんどは最初にセレクターを書くかもしれませんが、私はそんなことはしません。

これ以上のゴシップはありません。これらの問題を根本から理解したい場合は、ブラウザから始めましょう。

2． ブラウザの仕組み

以前、「ブラウザの仕組み: 新しい Web ブラウザの舞台裏」という記事を読みました。この記事では、ブラウザの動作プロセスを簡潔かつ包括的に紹介します。これは、Web フロントエンド プログラマが理解するのに最適です。もう 1 冊の本「WebKit Technology Insider」をおすすめしたいと思います。著者はこの本に長い間注目しており、最近の読書計画に含めています。内容 現時点では記事の内容については詳しく触れておりません。

上の図は、Webkit カーネルが HTML と CSS をレンダリングするフローチャートです。図からわかるように、html の解析は 1 行であり、CSS の解析は 1 行です。この 2 つはある時点で結合されて、最終的なビューが形成されます。

CSS に焦点を当てると、上の図から CSS を学習するための 3 つのブレークスルー ポイントをまとめることができます。

CSS の 5 つのソース

1. CSS で制御できる表示方法
2. 位置、背景、フォントなど
3. これを見て興奮する友達はいますか？ CSS を学ぶ前に、まずブラウザーが CSS をどのように読み込み、処理し、使用するかを分析するため、この考え方に従って CSS チュートリアルを作成します。スクリプトに従って ID セレクターから開始するのではなく。

この期間ブログを書いていないのは、実はもっと合理的で効率的なアイデアや枠組みを一生懸命考えているからです。自分が書いていることが他の人と同じだと面白くないと思います。

この一連の記事も、この考え方とフレームワークに従って段階的に開発されています。

3． CSS 読み込みプロセス

CSS??カスケード スタイル シート??カスケード スタイル シート。 「スタイルシート」は比較的わかりやすいですが、「カスケード」とは何でしょうか？文字通りの意味からすると、カスケードには間違いなく複数のレイヤーを積み重ねる必要があります。そして、この「多層 CSS」には何層あるのでしょうか? プログラマーはどの層を使用しますか?これらの問題が私たちの議論の焦点になります。

さらに、これほど多くの層が重なっている中で、対立が生じた場合にどのように対処すればよいのでしょうか?これも私たちの議論の焦点です。

最後に、これらのレイヤーの中には、各 HTML 要素のブラウザーのデフォルト スタイルである「ブラウザーのデフォルト スタイル」レイヤーがあります。今回はブラウザの「ロボット」から学び、それが記述する CSS がどのように役立つかを見ていきます。

4. CSS と HTML の組み合わせ

CSS と HTML を組み合わせるには、もちろんセレクターを使用します。 CSS はさまざまなセレクター タイプを提供しており、新しいセレクター タイプが各レベルで常に追加されているため、セレクターはより柔軟で使いやすくなっています。このシリーズでは、セレクターの説明に特化した記事を特集します。

賢い人間は、CSS が提供するセレクターを使用して、jquery や zen-coding などの他の隣接領域にも領域を拡大しています。

CSS セレクターには非常に重要なトピックがあります - レベル。ほとんどの Web フロントエンド面接の質問では、CSS セレクター レベルの判断に関する質問が表示されます。 「CSS デザインガイド」という本には、概念 - 具体性、計算式とルール、簡単な暗唱式が記載されています。とても思慮深いです。

最後に、擬似クラスと擬似要素はセレクターと密接に関係しています。また、擬似クラスと擬似要素、およびそれらの最も一般的な使用法を説明する記事も取り上げます。

5. ページのレンダリング

ページのレンダリングはテキストとブロックの 2 つのカテゴリに分類できます。

1. テキストの場合は、フォント、フォント サイズ、太字、斜体、背景色などを設定できます。
2. ブロックの場合は、ボックス モデル、フローティング、配置、表示、背景などを含むさまざまな状況があります

このシリーズでは、基本的な知識とその主要な応用例の説明に多くのスペースを割きます。

6. レイアウト

レイアウトは CSS のハイライトであり、各システムのレイアウトには独自の特徴があります。良いも悪いもありませんが、それぞれに長所と短所があります。代表的な例をいくつか挙げて一緒に分析してみましょう。例:

1. クラシックな 3 列レイアウト
2. Bootstrap グリッド レイアウト
3. Baidu ホームページ レイアウト
4. Weibo レイアウト
5. Renren レイアウト
6. ウォーターフォール フロー レイアウト
7. …

7． 次のステップ

次の記事では、例とコードから始めて、この記事の説明を段階的に詳しく説明します。引き続きお楽しみに！

------------------------------------------------ -------------------------------------------------- ----------

私のWeiboをフォローしていただきありがとうございます。

私のチュートリアルも歓迎します:

「デザインからパターンまで」「 JavaScript プロトタイプとクロージャ シリーズの深い理解」「Microsoft petshop4.0 ソース コード解釈ビデオ」「json2.js ソース コード解釈」動画

-------------------------------------- ---------------------------------------------------- ---- --------