[牛ブリスケットニュースリリースシステム]--CSS learning_html/css_WEB-ITnose

ビーフブリスケットの第 19 話では、実際の Web ページ制作に大きく近づく CSS 関連コンテンツについて話始めます。ここでは、CSS の基本コンテンツ

とコアコンテンツを簡単に紹介します。

Du Niang の声明

CSS は、HTML (標準一般化マークアップ言語のアプリケーション) や XML (標準一般化マークアップ言語のサブセット) などのファイルのスタイルを表現するために使用されるコンピューター言語です。従来の HTML のパフォーマンスと比較して、CSS は Web ページ内のオブジェクトの位置とレイアウトをピクセルレベルで正確に制御でき、

ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能があり、予備的なインタラクション デザインは、現在、テキスト表示に基づく最高のパフォーマンスのデザイン言語です。 CSSは、さまざまなユーザーの理解力に応じて記述方法を簡素化または最適化することができ、あらゆるタイプの人にとって非常に読みやすい

です。

私の理解

CSS 学習ビデオの 2 つのエピソードでは、次の 2 つの側面に焦点を当てます。

1.

まず CSS の特徴、つまり Web コンテンツとスタイルの分離の実現について話しましょう。目的は、大規模なプロジェクトで Web ページの主要なスタイルを CSS で記述することです

タイトルからコンテンツまでを個別に設定して、Web ページ全体の表示に一貫性を持たせることができます。私たちが現在開発しているITOOはそのわかりやすい例です。その理由

各機能のインターフェイスに一貫性があるのはもちろん、デザイン内容は CSS だけではありませんが、CSS も重要な役割を果たします。

次に、CSS の機能であるセレクターがあります。優先順位: ID セレクター > クラス セレクター > HTML タグ セレクター。それでは、それらは何ですか?そしてどのようなルールがあるのでしょうか?

ID セレクター

: CSS で

#aaa {    border :1px solid #100;    padding :5px;}

を設定することで、HTML ページで ID を aaa として呼び出すだけです。

<span id="aaa"> 栏目一</span>

クラスセレクター: CSS で設定します

.title {    color :#00f;  /*新闻标题样式*/    clear:left; /*清除浮动*/}

HTML Web ページで呼び出す

<span class="title" > 栏目一</span>

HTML タグセレクター: ID セレクターとクラスの選択に加えて、HTML で参照しますセレクター以外の設定は次のとおりです:

<pre name="code" class="html"> <span id="aaa">栏目一</span> <span class="title" > 栏目二</span> 栏目三

上記のコードでは、「3 列目」のみ特別なセレクター設定がないため、CSS の本文内にある限り、

ラベルセレクター

に属します。

対応するスタイルを設定すると、列 3 にも特別なスタイルを設定できるようになります。

body {    color:#f0f;}

注: 3 つの間の優先関係により、競合がある場合は、優先セレクターの内容が優先されます

。

コアコンテンツ

CSS のコアコンテンツは、標準フロー、ボックスモデル、フローティング、および位置決めです。拡張されたコンテンツには、ブロックレベルの要素とインライン要素が含まれます。

コアコンテンツの意味は次のとおりです: 1. 標準的なフロー: CSS のタグの順序です。

body {    color:#f0f;}.menu {    color :#f00; /* 文字颜色*/}.title {    color :#00f;  /*新闻标题样式*/    clear:left; /*清除浮动*/}

上記コンテンツと同様に、タイトルコンテンツはメニューの後に来るため、

<span class="title class=menu" > 栏目二</span>

が表示される場合は、メニュー内のコンテンツが最初にメインコンテンツになります。

2.

マージン
: 上、下、左、右;

コンテンツエリア

: 幅、高さ;

フレーム

: 幅。

図はボックス モデルを示しています:

それでは、CSS で関連する属性の値を設定するだけです。 3. フローティングと位置調整: 両方ともボックスの位置を調整します。 フローティング: ボックスの位置を左右に移動できます。 位置: ボックスの相対位置と絶対位置を変更できます。

4 (拡張)、ブロックレベルの要素と行レベルの要素。

ブロックレベル要素は排他的な行を占有し、その幅は親要素の幅を自動的に埋めます。

インライン要素は 1 行に収まりません。隣接するインライン要素は 1 行に収まらない限り折り返されません。

と行の Level 要素はブロック レベルの要素に変換できるため、これについては詳しく説明しません。

まとめ

CSSの勉強を通じて、その役割がとても強力であることを次のWebページ制作でゆっくりと体験していきます〜