ホームページ > 記事 > ウェブフロントエンド > CSS の旅 -- 最初の目的地 CSS_html/css_WEB-ITnose を使用する理由
CSS の旅 -- 最初の目的地 CSS_html/css_WEB-ITnose を使用する理由
- WBOYオリジナル
- 2016-06-24 11:45:001048ブラウズ
私と同じように、CSS が苦手なプログラマーがどれだけいるかわかりません。 。 。弱点が現れたので、それを解決する方法を見つけるしかないので、CSS 権威ガイドを見てみましょう
CSS 権威ガイドは比較的古いですが、内容はまだ比較的充実しています。内容は基本的に「あなたと話すのはとても快適です」と同じです。では、本文から始めましょう。
1: CSS を学ぶべき理由
CSS の歴史を知ると非常に興味深いです。 昔、Web には CSS はなく、p、h1 などの一部の HTML タグしかありませんでした。 h5. .. div span、ul など、これらの HTML タグ
はすべて特定の意味を持つ HTML タグであり、コンテンツが無味乾燥であれば、人々はレイアウトに注意を払いませんでした。現在のブログ ガーデンのレイアウトと同じで、簡潔で美しいです。記事が有益である限り、私たちプログラマーもこれを気にしません。 Web ユーザーはプログラマーではありません。彼らは見た目、かっこよさ、性格を重視します。この場合、HTML では満足できません。 W3C 組織は、strong、font、b、u など、HTML タグを装飾するいくつかのタグを提供します。 。 。ちょうどこのような。
<body> <font size="20" color="red"><b>你好</b></font></body>
すると、プログラマーからは次のような不満がありました。 。 。
まず、テキストを装飾するためだけに無数のタグを書かなければなりません。 。 。なんて面倒なことでしょう。 。 。
2 番目: マダン、現在、私たちのページ構造はますます複雑になってきています。これらのフォントと b はまったく再利用できず、完全に台無しになっています。 。 。 。背が高くて毛深い。 。 。
3 番目: 現在、この国は非常に貧しく、帯域幅が非常に高価です。私の HTML のサイズは非常に大きく、コンテンツは実際には HTML の 1/10 未満しか占めていません。 。 。クライアントが開くまでに数分かかることがあります。 。 。これが続く場合、
。 。
その結果、W3C はオンライン プログラマから多くの批判を集めました。当初のアイデアは、HTML タグのいくつかのスタイルを通じて HTML の構造コンテンツを変更することでした。その結果、ページ構造は混乱してしまいました。バランス
の。 。 。 3 つの大きな問題に直面した W3C は、HTML を装飾するためのカスケード スタイル シートである CSS の立ち上げを開始しました。プログラマーの3大課題を完全解決。 。 。
2: 3つの大きな問題を解決する方法
1. 無数のタグの問題
CSSは各HTMLの構成要素をルールを使って装飾します。ルールの構造は「タグ+コンテンツ宣言」という方式を採用しています。 "、たとえば:
1 <style type="text/css">2 p {3 font-size: 20px;4 color: red;5 margin: auto 0;6 width: 50%;7 }8 </style> この定義については、あまり言うことはないと思います。この場合、HTML 内のすべての装飾タグを取り出し、特別な CSS ルールに入れます。誰もがこの利点を目にしたことがあります。これ、「コンテンツ」と「表示」の分離
これでプログラマーの最初の不満が解決されます。
2. 装飾ラベルの再利用の問題。
確かに、元の HTML 装飾タグは再利用できません。これにより、必然的にページ拡張が発生します。CSS はルール グループを使用して、最初にルールを記述し、次に使用するタグを適用します
セットをダウンロードするだけです。 css定義。この場合、再利用の問題は解決される。
3. 量拡大の問題
1 番目と 2 番目の問題が解決されなければ、当然 3 番目の問題が発生し、さらなる連鎖反応が起こると思います。 CSS この問題を解決するには、CSS の最終的な目的を強調するために、「コンテンツ」と「表示」を厳密に分離する必要があります。「分離」を実現するには、CSS を特別な CSS ファイルに個別にカプセル化する必要があります。再利用できるのは 1 つの HTML ページのタグのみですが、複数のページや複数のサイトで再利用することもできます。次に、CSS ファイルを参照する方法は何でしょうか? ? ? 擁護する価値のないものはどれですか?
3: css ファイルの参照方法
1. リンク参照
vs に CSS をドラッグすると、デフォルトはリンクモードになります、リンクは元々 xhtml のタグなので、js を使用して動的に追加することもできますコントロールについては誰もが知っていると思いますが、もう 1 つの興味深い点は、「候補スタイル シート」を作成して、ブラウザ内で必要なスタイルを動的に選択できることです。たとえば、以下ではページを表示するために 2 つの CSS ファイルを定義します。それぞれ赤と青の背景。
すると、ブラウザで必要な CSS スタイルを動的に切り替えることができます。これは非常に興味深い機能ですが、スクリーンショットを撮るのが難しいため、ツールバーの「表示」を使用できます。 =>「スタイル」。
2.インポートリファレンス
以下のように同じタグをインポートすることもできます。
れーい
最后值得一提的是，尽量避免使用“内联样式”的style，如果这样的话，跟使用font，strong这样的标记几乎没有什么区别，就比如下面这样，所以我们尽量避免。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 </head> 7 <body style="color: red; margin: 0 auto"> 8 hello world; 9 </body>10 </html>
好了，第一篇大概就这么说了，后续的我们再延伸，周末愉快。