カスケードCSSスタイルテーブル例
お互いに相対的なページ上のオブジェクトの正確な場所は、おそらくウェブマスターのための最も難しいタスクの1つです。 すべてのグラフィックイメージとテキストブロックがWebマスターコンピュータだけでなく、すべてのサイト訪問者の場所にある場所にあるようにHTMLページコードを書きます。 彼のブラウザでユーザーによって展示されている最も主要なケルは、生地と写真の厄介な旅に壮大な創造を変えることができます。
HTMLマークアップを完全に制御する手段として宣言されているカスケードスタイルシート（カスケードスタイルシート）は、考慮中の問題に照らして表示されます。 良いツール ページ上のオブジェクトの正確な場所を整理するには。 CSSでは、デフォルトのタグのすべてのプロパティを上書きできます。 テキストブロックをページやその他のテキストブロックに合わせて揃えることが可能になります。
CSSを使用すると、標準のHTMLでは使用できない新しい特定の機能が開きます。 たとえば、テキストのための逆の距離と貨物の距離を確立し、文書全体を通してモザイク出力なしでパターンの位置を正確に指定することができます。
一般に、カスケードスタイルシートでは、ユーザーによる情報認識の審美的な側、そして功利主義者だけではなく、Webページの設計について考えることができます。
CSSを使用すると作成速度が速くなります 新しいページ。 一度定義されたスタイルは、ドキュメントの任意の場所で無制限の番号を使用できます。 重要な詳細は、カスタムスタイルのタグとカスタムスタイルの作成にさまざまなプロパティを割り当てる形式で別のファイルにスタイルを設定する機能です。 このようなファイルのスタイルをオーバーライドすると、変更されたスタイルが適用されたすべてのオブジェクトの表示スタイルの自動変更が発生します。
私たちはCSSの使用を守りましょう。 スタイルを適用する方法は4つあります。
- マークアップ要素のオーバーライドスタイル
- スタイルタグを使用して文書ヘッダーにスタイルの説明を配置する
- リンクタグを介して外部の説明への参照を配置する
- 文書内のインポートスタイル
このマークアップ要素にCSSスタイルで利用可能です。 この方法では、変更の変化は、このタグが責任がある要素のみに影響を与え、他の場所にはこのタグで撤回されず、このタグによっても廃止されません。 文書の特定のセクションに目的のスタイルを適用することができます。
ボディタグの前にドキュメントヘッダーのペアタグスタイルを使用して標準のマークアップ要素を上書きすることも、独自のディスプレイプロパティを作成できます。 スタイルタグを使用すると、任意のクラスが作成されます。 それらの使用は、タグが異なるのと同じ表示プロパティを指定できます。 たとえば、便利なもの、テキストとハイパーリンクに同じフォントを設定します。 下線の色とスタイルが指定されていない場合、これらのパラメータは同じにハイパーリンクのままになり、通常のテキスト間で専用のままです。
サイトの複数ページまたはすべてのページで同じスタイルが使用されている場合は、各HTML文書でそれらを判断する必要はありません。 それらを別のファイルに保存するのに十分で、ヘッドエレメントのリンクタグを使用して（ボディタグの前に）それを参照するのに十分です。 rel属性には「スタイルシート」の値が必要です。
スタイルスタイルをインポートすることも可能です。 外部記述への参照との違いは、Linkタグで指定されたスタイルの説明を持つスタイル要素内部または外部ファイル内のスタイルのインポートを行うことができるということです。 このようにして、外部ファイル用の外部ファイルを作成できます。 スタイルインポート指示は他のすべてのスタイル記述子の前に置かれます。これにより、インポートされたスタイルを簡単に上書きできます。
しかし、どんな技術でもその欠点があります。 両方のCSS技術があります。 より正確には、ほとんどの欠点がCSSの使用に見られる。 これはさまざまなブラウザでのCSSの不完全な互換性によるものです。 最近のバージョン ページ表示のCSSの精度でのPRAGANAMANAMEの欠如のために生じる さまざまなブラウザ。 たとえば、インポートスタイルはすべてのブラウザからは遠くにサポートされています。 このため、多くのウェブマスターはまだ一部のCSS機能を適用することを恐れています。
フォントKegをロックするブラウザにテキストを表示するときは、ユーザーのコンピュータ上のすべてのページアイテムの正確な場所に自信を得ることができますが、ユーザーのユーザーのユーザーのユーザーのユーザーの能力を自分で選択できます。 このアプローチは、本質的にサイトの訪問者を失望させることです。
多くの場合、CSSについては、援助ですぐにサイト全体の設計を変更するのが簡単です。 これを行うには、スタイルファイル内のスタイルを上書きするのに十分です。 しかし、現実のデザイナーは、サイトの設計を変更した結果、フォントの表示の変更だけでは停止しません。
カスケードスタイルシート - 有望な技術。 しかし、マウスポインタが接続されているときにハイパーリンクの色を変更するためのCSSの使用に限定されています。
良し悪し
CSSスタイルテーブル、定義自体を取得すると、これは説明言語です。 外観 資料。 つまり、HTMLはページ構造、およびCSSスタイルのすべてのデザインの責任があります。 私はここに情報を集めました、それはあなたがスタイルシートを自由に使うことを可能にするでしょう。 それが理解できるので、それが理解できるので、それを知る必要があるのか\u200b\u200bについて書くことはできません - それなしでサイトを通常の見解に持っていくことができないでしょう。 誰かがCSSスタイルを勉強し始めている場合、これらの資料はCSSの学習を開始するのに十分です。
1.基本的なものです
私は非常に基本的なものから始めます。 私がこのサイトを実行し始めたとき、私はCSSスタイルを勉強するための小さなレッスンを書きました。 レッスンは始まった人や彼らの知識を更新するための何かを知っている人々にとって、レッスンがよく適しています。 すべてが写真で、実際の例ではすべてが装飾されています。
小さな隠れ家： 私自身がサイトの建物の話題を学ぶことを始めたとき、私はほとんどすべてのHTMLタグを学びました、そして、彼らは私をあまり刺激的ではありませんでした。 しかし、私がCSSスタイルテーブルの研究を開始し、それぞれのプロパティを適用しようとした後 - 私はそれがそれほど好きだった（私はそれを好きではなかったなら私は作成しません）。 私はあなたがCSSだけで素晴らしいことをすることができることを見ました。 これは数ヶ月間リーリングするプログラミング言語ではありません。 スタイルのテーブルは1週間で1週間で習得できます。
もちろん、あなたは絶対にすべての財産とその意味を学びませんが、必要ありません！ あなたはあなたのプロジェクトで申請して使用するように基本だけを知っている必要があります。 1つの重要なニュアンスは、実際の例で学んだばかりの財産を直ちに適用する必要があるということです。 それをあなた自身のウェブサイトにする 単純なHTML ウェブサイト - 違いはありません。 結果を書いて見ようとすることが重要です。
私はCSSが使用されている例がたくさんあります。 100以上のレッスンしか含まれていません！ あなたが少なくとも基礎を知っているとき、あなたは安全に授業からすべての例を変更して適用することができます。
CSSカスケードスタイルに関する私のレッスン
2.ベビーベッドCSSとCSS3
さて、あなたは基本を学びました、そして、「成功」を伴うすべての日々すべてを忘れて、おそらくあなたはこれがあなたのものではなく、すべてが難しいと思います。 私はすぐにあなたを迎えに行きたい - 私自身はみんなを知りません cSSのプロパティ。 しかし、インターネット上でそれらを見ることを違反するのは何ですか？
あなたがyandexやGoogleに行きながらtrue、あなたはあなたが必要とする要求を得ます。 また、必要なものにも発行されていない場合。 だからあなたは多くの時間を過ごすことができますが、それは本当に探していたものを見つけることではありません。
幸いなことに、良い人たちは私を複数回逆にした非常に便利なベビーカーに渡った。 ある場所に対処するのに十分であり、それから所望の特性の検索は難しくありません。
CSSとCSS3ベビーベッド
サイトデザインを敷設して開発する際には、単に不可欠な材料です。 気を取られる時間とインターネットの説明プロパティを検索する時間は何度も減少します。
あなたが理解しているように、あなたがより多くのあなたがより多くのサイトを絞り込むこと、またはあなたがデザインをしているほど、必要なプロパティはすべてメモリ内に残っているので、このプロンプトを調べる必要があります。 しかし、まだこのセットのチートシートを手に持っていることは余分なものではありません。
それは学校のようです： たとえあなたがベビーベッドを使わないとしても、それはまだシャワーの穏やかなものであることがどういうわけか。
私たちのコースでは、CSSレッスンを検討します - すなわち テクノロジのレッスン、敷設時に最も重要なWebページの1つ。
このレッスンでは、私たちはそれがより多色になるようにウェブページを置きます（図1）。
写真1.
デザインページに進む前に、Webの色がどのように設定されているかを調べます。
色を定義します。 CSSレッスン
HTML文書の色を定義するときは、色の名前、またはそれらの16進コードを使用できます。 これらの色の最初の文字によると、16進符号化のシステムは、ここから赤（赤）、緑（緑）、青（青）、およびその名前のRGBに基づいています。 各構成要素は、00からFFまでの16進数（0および255Vに対応させる）に対応する。 10進システム 数）。 これら3つの値は、次に、符号が先行する1つの値に結合され、例えばビオレタ色に対応する＃800080。
表には、いくつかの色とそのコードの名前を示します。 もっと フルテーブル 色とそのコードはフォルダ内で表示できます 色。フォルダにあります cd.
|
色 |
色 |
||
|
ブラック（ブラック） |
シルバー（シルバー） |
||
|
マルーン（ダークブルゴーニュ） |
赤（赤） |
||
|
グリーン（緑） |
ライム（ライム） |
||
|
オリーブ（オリーブ） |
黄色（黄色） |
||
|
海軍（海軍ブルー） |
青（青） |
||
|
紫色（紫） |
フシア（フクシア） |
||
|
ティール（ダークグリーン） |
|||
|
グレー（グレー） |
白（白） |
サイト設計開発のための安全な色のテーブル
安全な色のパレットは、さまざまなモニターのディスプレイの最も正確なマッチングを提供します。
安全なパレットは216色で構成されています。 2つのブラウザから別のブラウザへ、またはあるプラットフォームから別のプラットフォームへ移動すると、色の可用性と権限が異なる場合は、常に変更されません。
3人のうちのどれでも 16進値 それは00,33,66,99、SSまたはFFとは異なり、色は安全ではありません。
セーフティテーブルはフォルダ内で表示できます。 cd/ 色。.
CSSの定義
私たちのWebページはまだ設計されていません。これは2つの方法で実行できます。
- 最初の意味です スタイルテーブル CSS （よりプログレッシブと正しい方法）
- 第二 - tagov.の属性 html .
よりプログレッシブな方法からすぐに始めましょう。
CSS - カスケードスタイルシート （階層型の仕様またはカスケードスタイルシート）マークアップ言語を置き換えないでください。これはHTMLタグに適用される独立したテクノロジです。
目的： サイトのすべてのページで項目のHTMLスタイルを自動的に変更できます。 たとえば、緑色になるはずの10個のWebページにH1ヘッダーを使用します。 スタイルテーブルを使用するときは、緑色を指定するために一度だけ持ち、すぐに10ページに適用されます。
逆の状況： すべてのH1ヘッダーグリーンに10個のWebページに設定されているHTML属性を使用して、すなわち それを10回処方しました。 それから彼らは赤のヘッダーの色を変えることにしました、そして我々は緑色を赤に直しなければならないでしょう。
同じスタイルシートを使用する場合は、スタイルのスタイルの赤色の緑色のカラーヘッダーを変更することで、これを行うために一度だけ、自動的に10個のWebページで自動的に変更されます。
スタイルテーブルは、一連のCSS要素を含み、その構造はHTML要素の構造とは異なる。
構文CSS- 要素
セレクタ（プロパティ1：値;プロパティ2：値; ...プロパティn：value）
最初に、セレクタの名前が書き込まれます（たとえば、H1）、これはすべてのスタイルのプロパティがタグに適用されることを意味します。
そして、スタイルプロパティが書き込まれている巻き括弧とその値がコロンの後に表示されます。 値を持つスタイルプロパティは、セミコロンを持つスタイルの間に分離されます。最後に、このシンボルは省略できます。
値を持つスタイルのプロパティは、多くの多くになりますが、それらのシーケンスは持っていません。
CSSはレジスタ、転送文字列、ギャップ、タブに敏感ではありません。 したがって、記録の形は現像剤の欲求によって異なります。
例えば:
h1（フォントファミリー：アリア;フォントサイズ：14pt）
または同じように記録することができます。
フォントファミリー：アリア;
フォントサイズ：14pt
この例では：
- h1 - セレクタ、この場合はHTML要素、
- フォントファミリとフォントサイズ - スタイルのプロパティ、
- Arial - フォントファミリプロパティの値、
- 14pt - フォントサイズプロパティの値。
HTML文書でスタイルシートを有効にする方法
- 外部スタイルシート（関連スタイル）。
- スタイルシート（グローバルスタイル）を実装しました。
- 内部スタイル
外部CSSスタイルテーブル（関連スタイル）
サイト全体のスタイルを決定します。
それは拡張子CSSを持つテキストファイルです。
この例では、スタイルシートはテキストファイルに書き込まれます。style.css
実用的なタスク1。
1. Notepad ++のNET文書を開き、フォルダに保存します。 public_html 名前の下 スタイル。. cSS。 フィールドではそれに注意してください ファイルの種類 発見された いろんなタイプ。 （図2）。
図2。
2. CSSは別のテクノロジであるため、ファイル.CSSのHTMLタグはまったく書き込まれません。 このファイルに「アーキテクチャプロジェクトのディレクトリ」を発行します。 メイン。. hTML。 中心部、Blue、Verdanaフォント、20 Ptフォントの背が高い。 これを行うには、CSSファイルで、次のエントリを作成します（図3）。
図3。
私たちのCSSレッスンでは、このレッスンで上で話したCSS要素構文に従ってここで書かれているのだろうか。
- h1 - セレクタ、すなわち スタイルが適用されるHTML要素。
- テキスト整列：中央; - テキスト整列（テキストを位置合わせ）のStyleプロパティ（中央値）。
- カラー：＃0000ff; - 青い色＃0000ff値を持つスタイルのカラープロパティ（テキストカラー）（色テーブルからの値）。
- フォントファミリー：Verdana; - Verdana値を持つスタイルのプロパティフォントファミリフォントヘッドセット。
- 値を持つスタイルのプロパティは、自分の間で分割されています。
- など、構文に従ってすべて。
WebページがSTYLSシートと適用されたプロパティをHTML要素に "SAW"さて、ファイル間にバンドルをインストールする必要があります。 メイン。. hTML。 そして スタイル。. cSS。 これを行うには、main.htmlファイルとタグ間を開きます < 頭。> そして 頭。> デザインを挿入します , なので 図4
図4
ブラウザの結果を確認してください。 彼は図5と一致しなければなりません。
図5
このクラスでは、CSS私たちはスタイルのプロパティとその値の名前をどこに行くかを見ますか？ このために、特別な参照書と仕様（フォルダCSSハンドブック）もあります。 まず、参考として小規約の小規則を使用してください。 sprav_css.doc。.
4.右端、ブルゴーニュカラー、Verdanaフォント、16 PTフォントを調整して、スタイルヘッダーH2 "Projects"を指定します。 ファイルでこれを行うには スタイル。. cSS h2 （図6）。
図6
5.ブラウザの結果を確認し、それは図7と一致する必要があります。
図7。
6.段階を幅、濃い青、アリアルフォント、12 Ptフォントで整列させます。 ファイルでこれを行うには スタイル。. cSS セレクタの録音を次のようにします p （図8）。
図8
7. Webページ全体の淡い青い色の背景を作ります。 セレクターのためにこれについて 体。 エントリを追加する（図9）
図9
ブラウザの結果を確認します。 彼は図10と一致しなければなりません。
図10。
このレッスンCSSから、外部スタイルシートを使用する原則がわかります。 簡単に色と色のために ウェブ。-RExtricters、ディレクトリに関する勉強して実際に試してみるためにスタイルの特性とその意味を研究する必要があります。 ディレクトリに連絡せずにそのようなプロパティと値を覚えておくと、プロフェッショナリズムが高くなります。
研究課題
- 参照帳を使う sprav_css.doc、 タイトルスタイルを購読します < h3> main.htmlファイルに。 から選ぶスタイルのプロパティ。
- スタイルを使用して、「House Projects」のリストについては、Romanにアラビア数を変更してください。 残りのパラメータはオプションです。
- マーカーとしての「家」のリストについては、画像を適用してください spisok_1.gif。 フォルダから hTML_CSS_2。。 残りのパラメータはオプションです。
- Webページの背景として、スタイルを通してイメージを適用します。 fon9.jpg。 フォルダから hTML_CSS_2。.
- スタイルを使用して、段落のフォントを大胆にします。
図11のおおよその結果。
図11。
スタイル仕様のクラス
CSSレッスンでは、1つの要素のスタイルのいくつかの種を決定する必要がある場合、スタイル仕様のクラスが適用されます。 クラスを目的のタグに決定するときは、ポイントで区切られたクラスの任意の一意の名前が追加されます。
たとえば、テキストにいくつかの見出しがいくつかあります。 h1 そして私達は彼らが異なる色であることが必要です。 それからスタイルを次のように分割します
h1.Golub（カラー：ブルー）
h1.KRASN（色：赤）
h1.Zelen（カラー：グリーン）
ポイントの後にクラス名があります。これは一意であるべきであり、数字からのみ構成できません。
タグを使うときに今 < h1> 文書内で属性をインストールする必要があります クラス適用する必要があるスタイルを指定するには
< h1 クラス=" ゴーブ。"> これは青いタイトルです h1>
< h1 クラス=" krasn。"> これは赤い見出しです h1>
< h1 クラス=" ゼレン。"> これは緑色の見出しです h1>
実用的なタスク2。
1.ファイルを開きます。 シャブン. hTML。。 新しい名前で保存してください plohady。. hTML。フォルダの中で public_html.
2.タグ間を書きます
内容で
ファイルからテキストをコピーします スクエアハウス.txt.フォルダから hTML。_ cCS_2 .4.同じファイルにスタイルを書きます。 スタイル。. cSSこれを前回のレッスンで作成しました。 したがって、ファイルで plohady。. hTML。タグを挿入することで、このスタイルシートにバンドルを設定します
そして （図12）
図12。
5.タイトルタグをフォーマットします
そして各ヘッダーにクラスを割り当てます（図13）。
図13。
あなたのファイル plohady。. hTML。今、このように見えるはずです（図14）。
図14。
スタイルシートで スタイル。. cSS 次のエントリを作成します（図15）
図15
7.ブラウザのWebページを確認してください。 結果は図16にあります。
図16。
あなたはおそらく私たちの中でそれに気づいた 新しい録音 ヘッダーのスタイルは繰り返しデザインです フォントファミリー：Verdana; テキスト整列：左; フォントサイズ：14pt。そのような構造は、それらが適用されるセレクタをグループ化することによって一度記録することができる。 これを行うには、カンマを介してセレクタを一覧表示し、次にカーリーブラケット内で一般的なプロパティを登録する必要があります。 その後、ヘッダーのための私たちのスタイルテーブルはこのようになります（図17）。
図17。
実用的なタスク3。
ファイル内の各見出しの下に plohady。. hTML。テキストがあります。 さまざまなクラスを使用して段落をフォーマットします。 異なる色、整列、およびヘッドセットのフォントを使用します。 クラス名は一意である必要があります。 セレクタに同じ名前を使用することは望ましくありません。 の一つ 可能なオプション 図18：
図18。
特定の要素のIDスタイル
CSSレッスンには、いわゆるIDスタイルの学習が含まれます。
任意の要素に識別子を割り当てることができます。 iD.そして、このアイテムに準拠しています iD..
例えば：
スタイルテーブルファイルのエントリは次のようになります。
# テスト { 色:#00 fFFF}
これで、このスタイルをHTMLドキュメントの任意の要素に沿って配置できます。
...
...
この例では、テストワードはスタイル名です。 名前はラテン文字から任意にすることができますが、それは一意であるべきです、すなわち スタイルシートには、そのような名前がなくなり、できません。
実用的なタスク4。
私たちのサイトの将来のメニューのためにワークを作ります。
1.ファイルを開きます。 シャブン. hTML。 そして新しい名前の下でそれを保存してください メニュー。. hTML。フォルダの中で public_html。
2.ファイルページの内容で メニュー。. hTML。ファイルからテキストを作る メニュー。. tXT。フォルダから hTML。_ cSS_2 .
3.ファイルを次のようにHTMLタグにフォーマットします。
- 「プロジェクトカテゴリ」、「建築プロジェクトのカタログ」と「ハウススクエア」のタイトルについてはタグを使用してください
;
- 「プロジェクトカテゴリ」のリストについては、番号付きリストを使用してください。
- ;
- リスト「建築プロジェクトのカタログ」と「ハウススクエア」のマーク付きリストを使用する
4. Webページの上部にロゴを挿入する（ファイル） logo_myhouse.gif。）。 結果は図19と一致するはずです。
図19。
5.このメニューの場合は、名前の下に別のスタイルシートを作成します。 スタイル。_ メニュー。. cSS. ファイル間にバンドルを設定します メニュー。. hTML。とスタイルのテーブル スタイル。_ メニュー。. cSS録音を挿入することによって タグ間 そして ファイルで メニュー。. hTML。.
6.クリーンドキュメントを作成して名前の下に保存します。 スタイル。_ メニュー。.css.あなたのフォルダに。
7.ヘッダーと番号付きリストとアーキテクチャプロジェクトカタロググループを含むプロジェクトカテゴリグループの場合は、ヘッドライン自体とラベル付きリストが名前IDスタイルを使用します。 青。 それら。 コードはこのようになります（図20）。
図20。
8.ファイル内の スタイル。_ メニュー。. cSSこれらの要素のためのスタイルのスタイルダークブルー、タホマフォントを作りましょう（図21）：
図21。
9.タイトルとマークされたリストを含む「ハウススクエア」グループの場合、IDスタイルの名前を使用します。 褐色。。 それら。 コードはこのようになります（図22）。
図22。
10.ファイル内の スタイル。_ メニュー。. cSSこれらの要素のスタイルはブラウン、タイムフォントを作ります（図23）。
図23。
11. Menu.htmlファイルを使用して背景の静止色を追加します（図24）。
図24。
12.その結果、次のWebページが表示されます（図25）
図25
このCSSレッスンの実行の結果として、次のファイルが必要です。
- スタイル。.
cSS
- スタイル。_ メニュー。. cSS
- plohady。.
hTML。
- メニュー。.
hTML。
インターネットのロシアの部分は日々育てられています。 過去1年間にわたり、ロシア語のページの総量は2回以上増加しました。 今日ロシアでは誰もフレーズを驚かせないでしょう<домашняя страничка> または英語の単語
。 早くWebページの作成がたくさんのお気に入りであり、Runetの広がりが認識されているだけ<киты> Webデザイン、今、彼の自由な時間の中で私の10歳の息子でさえもマスターティーティングのSather自身のページがあるでしょう。 無料のサーバー （narod.ruまたはboom.ruのような）、過去1年間にわたってルジテーションにはたくさん離婚しました。 Webデザイン今日は、ネットワークまたは怠惰にのみ接続されていないだけです。 インターネットのスペースを疑問に思う多くの人々は、彼らのページの作成について遅かれ早く、後で考えることを考えています。 それらのために、この記事が書かれています。 ここでのスピーチは約です<правильном> 初心者のためのHTML、すなわち、インターネットコンソーシアム（http://www.w3.org/）によって正式に承認されたいくつかの追加機能について。 特に、動的HTML（DHTML）によって提供されるいくつかの可能性について。 より正確に - CSSによって作成されたページ（カスケードスタイルシート、またはカスケードスタイルテーブル）よりも見栄えがよくなるページを作る方法について<классического> HTMLは、スペースが少なく、したがって、それに応じて迅速にロードされます。
最初に自分のWeb表現の創設、武装警備員の創造、武装衣類のような別のテキストエディタの作成を最初に決定した人は、通常、新参者は次のように考えています。<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>- MS PowerPointのMS PowerPointのMS Word、プレゼンテーションでテキストを作成します。そのため、Webページを作成するために同様のプログラムがあります。二度。
初めて - Webスペースの合理的な使用の意味で。 事実は、MS FrontPageが参照するWebページのすべてのビジュアルエディタが作成されたページに挿入されていることです。<отсебятину> - 多くの追加の不要なタグ。 例外は、おそらくMacromedia Dreamweaver（彼が初心者と専門家の間では人気に値する人気が得られました）です。 しかし、この点でさえ、それは理想的ではありません。 正義は、すべてのビジュアルエディタがソースコードを操作する機会をユーザーに提供することを注意する価値があります。 作成ページしかし、多くのFrontPageによるところに愛されているのは、再び自分の方法ですべてをやり直すでしょう、あなたは再び視覚的モードに再度切り替えるべきです。
これから、新参者が2回目が柔軟性とページのコンポーネントの管理の完全性の観点から正確に再生されることになります。ビジュアルエディタはそのような創造性の自由を提供しません。作成中のページの。
さて、今すぐケースに直接行きましょう - カスケードスタイルシートを使用して美しく小さなWebページを作成するために（将来的には、短縮した名前 - CSSを使用します）。 あなたの親愛なる読者は、エントリーを読んだ後、私に合意した後、視覚編集者を拒否した後、HTMLの本を獲得し、少なくとも少数のメインタグと属性を研究し、CSSが何であるかを知っておくべきことを拒否したと仮定されています。食べています。
論理的および物理的なフォーマット
ネットワーク上の現時点で最も一般的な古典的なHTMLバージョン3.2は、特別なタグがある物理的なフォーマットツールを提供します（たとえば、タグなど）。 , , ）そして、さまざまな属性（サイズ、色、高さ、幅など）。 Webフォーマットの機能は再び強制され、また新しい段落ごとにこれらのタグと属性を再び規定します。もちろん、ページコードのサイズを強く増やします。 また、この文書の構造を分析した場合のこのフォーマット方法では、この単語が脂肪デザインで強調表示されている理由は理解できません - 美しさやエンドユーザーに特別な注意を払うことができますか？ 生活者がまだ状態にある場合は、古典的なHTML上のページの論理的な建物が不十分であり、検索エンジン、または例えば音声ブラウザを言えない。 彼らはそれを取り出しますはい。ページ構造にクリーンロジックを置きます。 そのために正確に<неподвластности> 論理解析 この方法 フォーマットは物理フォーマットと呼ばれていました。 HTML 4.0の新しい仕様を作成するときに彼とは対照的に、コーナーの頭の下に論理的なフォーマット、つまり文書の構造と設計が明確に分離されるようなフォーマットの下で作成されました。 このフォーマット方法は、ネットワーク上のネットワーク情報から高度な情報を提供するため、インターネットコンソーシアムを適用することをお勧めし、検索エンジンを介して情報をより正確に構造化し分析することができ、ページのサイズとその時間を大幅に削減できます。彼らの完全荷重。 文書の構造と設計の分離は、CSSを使用して実装されています。
論理フォーマットの実際化が古典的なHTMLタグに存在していたという事実に注目する価値があります。
,
,
もちろん、いくつかの論理ブロックの文書の分離に貢献しました。 しかし、ページの著者の多くが使われていました、そしてこの日に彼らは宛先ごとにではなくこれらのタグを使い続けています。たとえば、タイトルタグページの登録のための資金の不足と関連して、ページは実際には見出しではありませんでした。 CSSは十分な量の設計ツールを提供します。これにより、論理フォーマットの規則をより正確に追跡し、その視覚的表現からページ構造を実際に区切ることができます。
スタイルの目的別のページ要素
CSSを使用すると、独自のスタイルを割り当てることができます。 ビジュアルプレゼンテーション タグを含む任意のHTMLタグ
。 タグにスタイルが指定されている場合 これらの要素の独自のスタイルがない場合は、このコンテナの内側に配置されているすべての要素（段落、見出しなど）によって継承されます。 だから私たちはもはやタグを処方する必要はありません そしてページ上の各段落の色、サイズなどの属性 - タグのためにいくつかのスタイルに尋ねるのに十分な そして、ページ上のすべての段落がこのスタイルに従って表示されます。 どうやるか？すべての段落が12濃緑点の新しいローマンフォントによって表示されることを想定しているとします。 これを行うには、スタイルタグ属性を登録する必要があります。
対応する値を彼に割り当てることによって。 構文は次のとおりです。したがって、ページ上のすべての段落が欲しかったときに表示され、コードはタグで詰まっていない そして彼らの属性 ページが構成されている場合は、どのような種類のファイルサイズの節約を想像してみてください。 多数 テキスト！
注 - 新しいローマの名前の後にフォント碑文を設定すると、SERIFの碑文を指摘しました。これはSERIFSのフォントを意味します。 新しいローマのフォントがエンドユーザーマシンにインストールされていない場合、ブラウザは代わりに利用可能なフォントのいずれかをSERIFSで置き換え、ページマッピングはあなたが考えたものにできるだけ近くになります。 また、この例は理解され、IE（4.0以上）、およびNn（4.0以上）であろう。 Netscape NavigatorがCSSとDHTMLによって提供されるすべての可能性をサポートしていることをすぐにすぐに予約する必要がありますが、これは確かに彼のファンの数を増やしていません。
スタイルの例は、ドキュメントタグ - いわゆるインラインスタイルに直接使用されます。 HTMLファイルを含むこのCSSバインディングメソッドは、絶縁型ケースで推奨されます。このスタイルが1つのサイトページにのみ1つの要素にのみ適用される予定の場合。 スタイルを1ページまたは複数のページの複数の項目に適用する必要がある場合は、他のCSSとHTMLバインディングメソッドをお勧めします。
スタイルの目的1ページのいくつかの要素への目的 - 組み込みスタイルシートを作成する
1つの要素に1つのスタイルのタスクについて話していましたが。 そして今、スタイルテーブルを作成する方法を学びます。
前の例では、ページ上のすべての段落が似ているようにしましょう。16ポイントのサイズで大胆な緑色のフォントに表示され、すべての2番目のレベルのヘッダーが表示されています - Helveticaフォントサイズ黄緑色の半緑色の体の14。 これを行うには、INを作成する必要があります<голове> ページ（タグ間のどこかで任意の場所に
そしていくつかの規則をすぐに推定する紹介されたスタイルのテーブル。 これを行うには、Discoveryタグから始めてスタイルのテーブルコンテナタグを作成します。。 このコンテナタグの中には、セレクタ（ルールが適用されるHTMLタグの名前）とその定義（直接）がカーリーブレースで囲まれた数のCSSルールを自由に設定できます。 。 上記の例の構文は次のとおりです。
... ...CSSとHTMLをバインドするこの方法は実装と呼ばれます。 サイトの1ページにのみフォーマット規則のセットを設定することにした場合に適用することをお勧めします。プランに従って他のすべてのページが異なるはずです。
サイトの複数ページのための同時スタイルの目的
埋め込みと実装に加えて、CSSおよびHTML通信はスタイルテーブルをインポートおよびバインドするためのメソッドを使用します。 これは間違いなくです 最善の方法 1つのサイトのいくつかのスタイルデザイン、いくつか（または全員でさえ）ページを与えるために。 同時に、スタイルシート全体が1つのファイルに保存されます（ファイル拡張子は標準 - .css）。
このようなファイルの内容の例（例えば、my.css）：
Body（Font-Family： "Times New Roman"、Serif; Font-Size：12pt; color：drashgreen;）H1（フォント面：アリア、Sans-Serif;フォントサイズ：16pt;色：緑;フォント重量：大胆;）H2（フォント面：arial、sans-serif; font-size：14pt; color：greenyellow;フォント - 重さ：太字：斜体;）
注：タグ ファイルテーブルファイルの内側には、拡張子。CSSは、ファイルがスタイルテーブルのブラウザを明示的に示します。 そのようなファイルの1つは、複数のページですぐに接続できます（またはすぐに複数のページでインポートされます）。 タグの間に登録する必要があるバインド用のHTMLファイルで
そして 次の文字列：
... ...この行は、ファイルリンクがスタイルテーブルであることを示します（rel \u003d "stylesheet"）、このファイルのフォーマットは.css（type \u003d "text / css"）で、それはHTMLファイルと同じディレクトリにあります。別のURL（href \u003d "my.css"）。 明らかに、我々はこの回線をHTMLファイルから（全体的に）登録することができます。 したがって、均一なスタイルはすぐに数ページの間に綴られます。
インラインスタイル（スタイル属性を使用している個々のページ要素に規定されているスタイル）と埋め込みスタイル（Styles）<голове> コンテナタグ内のページ ...
インポートされたスタイルシートのアドレスに加えて、タグコンテナに登録できます ...
...ジャーナリストの質問
インタビュール回答
...与えられた例では、ジャーナリストの質問は、ページの左端から15ピクセルのインデントを持つ、灰色、太字、身体検査のアリリアによって表示されます。 答えは、2つの黒点の新しいローマのフォントサイズで表示されます。 さまざまな段落の段落でクラスパラメータを直接処方することを忘れないことは重要です。 hTMLコード。 どのページ項目にも任意の数のクラスを作成できます。
セレクタID。
別のケースを取ります。 JavaScriptプログラムに連絡する予定の将来、ページ上に一意の要素を作成したいとします。 おそらくこれらの要素は他のページで繰り返され、あなたは彼らにCSSによって単一のデザインに尋ねたいと思います。 この場合、カスケードスタイルでは、一意の識別子要素（ID）を割り当てる機能があります。 ほとんどの頻繁に使用される識別子は、HTML 4.0仕様で完全なまたは制限されたCSSサポートがあるフォームの要素に使用されます（要素によって異なります）。 これは、識別子とCSS規則の割り当ての例です。
... ... ... ...同様に、一意の識別子をページの任意の要素に任意の数に割り当てることができます。 これは、JavaScriptプログラムからアイテムにアクセスし、ユーザーの操作に応答してその表示のスタイルに変更するのに役立ちます。これにより、さまざまな動的効果を作成できます。
コンテキストセレクタ
ページ上の最初のレベルのすべての見出しが灰色の背景に赤く表示されているスタイルシートを作成したとします。 段落の中の1つの単語 - 銀の背景に黒。 スタイルテーブルコード、あなたがすでに推測したように、このように見えます：
H1（色：赤;背景色：灰色;）P（色：緑、背景色：黄;）EM（色：黒;背景色：銀;）
同じタグを介してタイトル内の単語を強調したいとします。 しかし、私たちはタイトルの銀の背景に黒のテキストの外観に満足していません。 灰色の背景にブルゴーニュ色のタイトルの言葉を強調したいです。 このためには、コンテキストセレクタがあります。 これのスタイルテーブルに追加するルールを記録すると、次のようになります。
H1 EM（カラー：＃CC0000;背景色：グレー;）
ここでは、このコンテキストセレクタを使用したページコードの例です。
... ... ...これが最初のレベルのヘッダーです ひたむきな 要するに
そしてこれは通常の段落です 専用の言葉
...今日はすべてです。 次回は、CSSを使用して実装されている要素のポジショニングやその他の興味深く、便利な機能について、ページのブロック要素をフォーマットするための規則について説明します。
文書へのアプリケーションテーブルスタイル
文書にスタイルシートを埋め込む
別の文書フラグメントのタスクスタイル
スタイルテーブルをインポートする
複数のプロパティを同時に指定します
セレクタのグループ化
スタイルテーブルについてコメントする
スタイルの特性
プロパティの背景
要素のフレーミング
リストのプロパティ
テキストのプロパティ
スタイルの定義を単純化するためのグループ化プロパティ
継承特性
文脈セレクタの適用
スタイルテーブルはカスケードと呼ばれますスタイルの表は、W3Cの推奨事項によって提供されており、デスクトップ公開システムに特徴的なアプローチを使用してWebページをフォーマットするための標準的なツールです。 Microsoft Internet Explorer 3.0プログラムはスタイルシートをサポートする最初のブラウザになりました。 Netscape Navigatorブラウザは、1997年2月から入手可能なバージョン4.0v2（Beta 2）からスタイルシートをサポートしています。
W3Cの推奨事項の詳細は、以下の式で入手できます。 ttp：//www.w3.org/pub/www/tr/wd-cssl.html。 . W3C規格は「カスケードレベル1「スタイル1」（「カスケードスタイルシートレベル1、CSSI」）という用語を使用しています。
まず、「スタイルテーブル」という名前の意味を説明する必要があります。 最新のテキストエディタを使用すると、ユーザーは文書をフォーマットするために使用されるスタイルを決定できます。 特に、単一の間隙間隔、宅配便フォント、1インチ左フィールドの段落スタイルを選択できます。 このフォーマットスタイルは、この文書の任意の数の段落にさらに適用できます。 NTスタイルのテーブル
m 同じ方法で作動します。 以下は基本機能の簡単なリストです。行、単語と個別の文字の間の距離を変更します。
要素の左側、右、上下のフィールド（HTMLコンテナテキストブロック）を設定します。
要素の退職金の取り付け
サイズ、スタイル、その他の要素フォント属性を変更します。
要素の周囲にフレームを設定します。
背景画像と背景色をアイテムに入る。
HTMLスタイルの利点が高いほど、フォーマット操作を文書内容から分離する機能があります。 まず、ページの特定の場所でテキストがどのように見えるかを決定してから、テキスト自体を入力します。 たとえば、後で、青のヘッダーのフォントの色を置き換える場合は、このヘッドラインのスタイルを変更するのに十分です。 テキストを変更しないでください .
文書にスタイルシートを適用する方法は4つあります。
-
国境 - 要素から右側、上下にある左側にあるフレームを決定するために使用されます。 幅、色、およびフレームのスタイルを設定できます。
-
margin - 要素から右側、上下にある左側のフィールドを左側にあると判断するために使用されます。 フィールドの幅を設定することもできます。
-
パディング - フレームとアイテムの内容の間の空き容量を指定するために使用されます。
-
コンテナUL。
プロパティビューアのテキストを表示する方法を完全に制御します。 彼らの助けを借りて、色、サイズ、フォント、間隔の間隔などを制御することができます。以下の詳細については、テキストのすべてのプロパティを詳細に説明します。
上記の特性の多くは互いにグループ化することができる。 だから、ルールの代わりに
H1（フォントウェイト：大胆;フォントスタイル：ノーマル;フォントサイズ：12pt; font-face：serif）
あなたはより簡単な表現を書くことができます：
H1（フォント：太字通常12pt SERIF）
HTMLスタイルシートを使用すると、プロパティの枠線、背景、フォント、リスト、マージン、およびパディングをグループ化できます。 各グループを別々に検討してください。
ボーダープロパティグループ
グループプロパティは、5つの異なる方法で分類できます。 フレームの別々の側面のプロパティを使用してプロパティを定義できます。
b 注文上の、境界線、境界線下、罫線の左下、または境界線で直ちにフレーム全体を定義します。これらのプロパティごとに、フレームの幅、スタイル、色を指定できます。
bオーダートップ：薄い点線
プロパティのグループの背景
バックグラウンドプロパティグループでは、色、イメージ、繰り返し、添付ファイル、および位置の値を指定できます。
背景：白いURL（http://www.myserver.com/image/bg.gif）repeat-x固定左上
フォントプロパティグループ
フォントグループは、重量、スタイル、サイズ、ファミリーを与えることができます。
フォント：太字の通常12pt回、セリフ
グループプロパティリスト
プロパティはList-Styleプロパティを使用してグループ化されています。 マーカーのマーカー、タイプと位置の画像を指定することができます。
リストスタイル：Square URL（http://www.myserver.com/images/marker.gif）内部
マージンプロパティグループ
マージングループは、上位、右、左右の各フィールドごとに幅を決定できます。
マージン：.5in 1インチ
値が1つだけ指定されていれば、表示プログラムは他のフィールドの幅を同じにします。 1つまたは2つの値を指定しないと、指定されていない値を持つフィールドは、逆のフィールドと同じ幅になります。 たとえば、最後の値（左）を小さくすると、左側のフィールドの幅は右側のフィールドの幅、すなわち1インチに等しくなります。
パディングプロパティグループ
パディンググループでは、上位、右、左下の値を指定できます。たとえば、次のようにします。
パディング：.25in .25in.25in.25in.25in.25in.25in.25in.25in.25in
値が1つだけ指定されていれば、ビューアは同じ値をプレゼンスに割り当てます。 1つまたは2つの値を指定しないと、指定されていない値の空きスペースは、それらが反対のものと同じ幅になります。 たとえば、最後の値（左）を小さくすると、フレームの左側と要素の内容との間の空き容量が右側のスペースと同じになります。
HTMLの下位タグでは、親タグのプロパティを継承します。 たとえば、すべてのコンテナタグのタグ
(< P > そして- ）タグの特性がいくつかあります 。 タグも
- タグのプロパティを継承します
- 。 次のコードを考慮してください。
- ：彼がタグに従属している場合のもの
- このタグが下位タグの場合のみ
-
:
- タグへの従属の場合にのみ別のスタイルを定義できます。
-
:
UL LI（リストスタイルタイプ：スクエア）
セレクタのリストはコンマで分割されていないことに注意してください。 それ以外の場合は、リストのすべてのタグに同じスタイルが割り当てられます。
W3Cスタイルシートの推奨事項では、「カスケードスタイルテーブル」と呼ばれます。 " Webページのレイバックには、1つずつ適用できますが、一度にいくつかのテーブルを適用できます。 同時に、表示プログラム自体はテーブルを使用するシーケンスを決定し、カスケードの原理でそれらの間の競合を可能にします。 たとえば、ページのスタイルシートは、その著者だけでなく、読者によっても決定でき、その後カスケード規則はどのスタイルが強力になるかを決定します。
それはうまくいきますか？ 各ルールブラウザは重み係数を属性にします。 各タグ解釈を解釈するとき、プログラムはこのタグのすべての規則をスキャンし、それらを重み係数の大きさでソートします。 最も「重い」規則に勝ちます。
スタイルシート間の競合を解決するための次の一般的な原則があります。
スタイルタイプ文書のスタイルタイプ（降順）：現在のスタイル設定（インライン）、埋め込み（埋め込み）、リンク（リンク）。
サービスワードを使用してルールの重み比率を変更することもできます。 次の例では、赤いプロパティの値
OL LI（リストスタイルタイプ：10進数）
同じタグのために
- タグへの従属の場合にのみ別のスタイルを定義できます。
こんにちは。 これはテキストの段落です。 これは強調されています。
このドキュメントのスタイルのテーブルタグの色を設定します
< P > ただし、タグの色 それは明らかに定義されていません（デフォルトでは黒い色です）。 このタグが親コンテナにあるので、心配することは何もありません。したがって青を継承します。
時には1つのタグに2つの（またはそれ以上の）スタイルを決定する必要がある場合があります。 たとえば、タグに2つのスタイルを指定する必要があるかもしれません
-
彼がタグに従属しているとき
- 。 コンテキストセレクタを使用して作成することが可能です。
コンテキストセレクタは、1つまたは別のスタイルが適用されるタグの正確なシーケンスを定義します。 言い換えれば、たとえばタグ内にあるスタイルを適用するように指定できます。
H1（色：赤！重要なフォント - 重さ：大胆なフォントファミリ：Sans-Serif！重要）
クラスは、1つの要素のいくつかのスタイルの定義であり、それぞれがページの正しい場所で使用できます。 たとえば、H1タイトルスタイルの3つのバリエーションを定義できます。 バリエーションの決定はスタイルの表示と似ていますが、タグの名前のみが、ポイントで区切られたクラスの任意の名前を追加されます。
H1 BLUE（カラー：ブルー）H1。RED（カラー：赤）H1。黒色（カラー：ブラック）
今、TEG文書を含めてください
クラス属性を使用して、特定のスタイルを指定できます。
赤い見出し
- タグのプロパティを継承します
リンク - HTML - Aドキュメントを別のファイルに保存されているスタイルテーブルと接続できます。
埋め込み（埋め込み） - コンテナを使用してHTML文書のスタイルシートを統合できます。
鬼ごっこ
前述のように、スタイルシートはに保存されています テキストファイル編集するのに便利です。 手動で作成するのは簡単ですが、Microsoft FrontPageの一般的なプログラムなどのスタイルテーブルの特別な編集者があります。
スタイルテーブルを使用すると、1つ以上のタグのスタイルを判断できます。 たとえば、タグのスタイルを定義するスタイルテーブルを作成できます。
,
,
そして 。 各定義は呼び出されます ルール （rue. e）。 ルールに含まれています セレクタ （HTML TEG）、続いて 宣言 （スタイル定義） セレクタは定義とタグの間のリンクです。 以下は、各タイトルタグのスタイルを示す規則の例です。
:
H1（カラー：ブルー）
宣言はカーリーブラケットにあります。 各宣言には2つの部分があります。プロパティ名とそれに割り当てられた値は、コロンによって区切ります。 HTMLは、何十枚のプロパティ（フォントサイズ、フォントスタイル、カラー、マージン右など）を含みます。これについては後述します。 各プロパティはいくつかの値を取ることができ、そのうちの1つはデフォルトで彼に起因しています。
前の例では、1つのカラープロパティだけが指定されていました。 ただし、1つのタグ内のプロパティの数を識別し、セミコロンから分離していることを省略していません。
こんにちは（色：青、フォントサイズ：12pt;テキストライン：中央）
この例では、視聴プログラムは、各第1レベルのヘッダを12ポイントの青いフォントサイズで表示し、それらをウィンドウの中央に配線します。 他のすべてのプロパティについては、デフォルト値が使用されます（たとえば、font-styleプロパティは通常に割り当てられます）。
複数のタグに同じスタイルを定義する必要がある場合は、それらを別のリストに一覧表示できます。
P（フォントサイズ：12pt）
UL（フォントサイズ：12pt）
Li（フォントサイズ：12pt）HTMLでは、よりコンパクトなフォームで同じことができます。
P、UL、LI（フォントサイズ：12pt）
こちらのカンマは必須の要素です。 省略した場合、ルールの意味が変わります（この章の下記の項「」を参照）。
スタイルシートが複雑になるにつれて、それらは特定の規則の任命に関する追加情報を含める必要があるでしょう。 コメントは文字/ *と* / *の間に位置し、次のようにプログラムを表示することによって無視されます。
ボディ（マージン左：LIN）/ * 1.インデント* /
H1（Margin-Left：-Lin）/ * 1インチの左側にシフト* /
H2（Margin-Left：-Lin）/ *シフト1インチ* /HTMLは、幅広いスタイルテーブルプロパティを定義できます。 プロパティ名は、ハイフンで区切られた2つか3つの単語から、 困難な名前では、最初の単語は通常カテゴリを表し、同時にプロパティ名の縮小オプション（短縮）です（セクション "を参照）。
この表は、HTMLスタイルのプロパティの概要を示しています。カテゴリ列では、このプロパティまたは他のプロパティが他のプロパティを持つグループに組み合わされているかどうかが示されます。 3番目の列では、（プロパティを継承するための）下位タグのプロパティが継承されているかどうかにかかわらず情報が表示されます。
継承
HTMLスタイルテーブルを使用すると、Page要素の背景を色や画像で飾ることができます。 ここでは、ページ全体ではなく、別の項目のプロパティの使用方法について説明します。 たとえば、タグにバックグラウンドが定義されている場合
- 、これはタグでのみ背景になります
- すべてのページ：
u l（background-image：url（http://www.myserver.com/images/watermark.gif））
W3Cの推奨事項は、ページ要素のフレーム、フィールド、および空き容量を定義することを可能にします。 たとえば、フレームに見出しを入力することも、段落タグのフィールドを変更することもできます。<Р> そのため、すべてのテキスト段落のインデントを整理する。 これらの目的のために、次のプロパティグループを使用できます。
これらのプロパティは、リストを出力する方法を指定するために適用されます。 彼らの助けを借りて、マーカー位置（リストスタイル位置プロパティ）、スタイルまたはマーカーのイメージを変更することができます（list-style-type-type-imageプロパティ）。
リストのプロパティは継承されます。すなわち、プロパティがタグに定義されている場合
- それはすべてのタグのために本当にあろう
- スタイル。.
cSS
