ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS Journey (1): CSS_html/css_WEB-ITnose を使用する理由
CSS Journey (1): CSS_html/css_WEB-ITnose を使用する理由
- WBOYオリジナル
- 2016-06-21 09:11:081012ブラウズ
私と同じようなコーダーがどれだけいるかわかりません。CSS は、体全体がしびれるほど苦手なものです。 。 。弱点がここにある以上、それを解決する方法を見つけるしかないので、CSS Definitive Guide を見てみましょう。CSS Definitive Guide は比較的古いですが、内容はまだ比較的充実しています。基本的には同じです。とても快適です。テキストから始めましょう。
1: CSS を学ぶ理由
CSS の歴史を知ると非常に興味深いものになります。 昔、Web には CSS はなく、p、h1...h5... などの一部の HTML タグしかありませんでした。 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 の構造要素を装飾するためにルールを使用しており、ルールの構造は「タグ + コンテンツ宣言」という方法を採用しています。例:
<style type="text/css"> p { font-size: 20px; color: red; margin: auto 0; width: 50%; } </style> この定義についてはあまり言うことはないと思います。この場合、HTML 内のすべての装飾タグを取り出して、それらを特別な CSS ルールに入れます。誰もがその利点を見たことがあるでしょう。この「コンテンツ」と「表示」の分離、これでプログラマの最初の不満が解決します。
2. 装飾ラベルの再利用。
確かに、元の HTML 装飾タグは再利用できません。これにより、必然的にページ拡張が発生します。CSS はルール グループを使用して、最初にルールを記述し、次に使用するタグを適用します
セットをダウンロードするだけです。 css定義。この場合、再利用の問題は解決される。
3. ボリューム拡張の問題
1 番目と 2 番目の問題が解決されなければ、当然 3 番目の問題が発生し、さらに連鎖反応が起こると思います。解決しますか? はい、CSS の最終的な目的を強調するには、「コンテンツ」と「表示」を厳密に分離する必要があります。この場合、CSS を個別にカプセル化する必要があります。単一の HTML ページのタグを再利用できるだけでなく、複数のページや複数のサイトで再利用することもできます。次に、CSS ファイルを参照する方法は何でしょうか? ? ? 擁護する価値のないものはどれですか?
三: cssファイルを参照する方法
1. リンク参照
cssをvsにドラッグするとデフォルトではリンクモードになっており、リンクはもともとxhtmlのタグなのでjsを使って動的にすることもできると思います追加と制御については誰もが知っています。もう 1 つの興味深い点は、ブラウザで必要なスタイルを動的に選択して、ページを表示できることです。それぞれ赤と青の背景。
次に、ブラウザで必要な CSS スタイルを動的に切り替えることができます。これは非常に興味深い機能ですが、スクリーンショットを撮るのが難しいため、ツールバーの「表示」=を使用できます。 "スタイル"。
2.import リファレンス
同様に、このタグも以下のようにインポートできます。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> @import url(blue.css) </style></head><body> hello world;</body></html>
最後に、次のような "inline style" スタイルの使用を避けるようにしてください。この場合、font や Strong などのタグを使用するのとほとんど違いがありません。それを避けるために。
すごいです
さて、最初の記事はここまでです。続きの記事で詳しく説明します。良い週末をお過ごしください。