CSS(Cascading Style Sheets)の概要

4076 ワード

CSS(Cascading Style Sheets)の概要


当初、技術者たちはHTMLを考え出し、主に定義内容に重点を置いた.例えば、

は段落を表し、はタイトルを表し、HTMLのレイアウトやインタフェースの効果をあまり設計しなかった.
インターネットの急速な発展に伴い、HTMLが広く応用され、インターネットを利用する人々はもちろんホームページがきれいになることを望んでいるため、HTMLのレイアウトとインタフェース効果の限界がますます明らかになっている.この問題を解決するために、人々も多くの曲がり角を歩いて、いくつかの悪い方法を使って、例えばHTMLに多くの属性を増加して結果コードを肥大化させて、テキストをピクチャーに変えて、Tableを利用しすぎてレイアウトして、空白のピクチャーで白い空間を表します.CSSが現れるまで.
CSSはウェブデザインの突破と言える.それはウェブインタフェースのレイアウトの難題を解決した.このように、HTMLのTagは主にウェブページのコンテンツ(Content)を定義し、CSSはこれらのウェブページのコンテンツがどのように表示されるかを決定する.
CSSの英語はCascading Style Sheetsで、中国語はシリアルスタイル表に翻訳できます.
CSSはその位置によって三つに分けられる.

  • インラインスタイル
  • 内部スタイルシート(Internal Style Sheet)
  • 外部スタイルシート(External Style Sheet)
  •  

    インラインスタイル


    Inline StyleはTagに書いてあります.埋め込みスタイルは、あるTagにのみ有効です.
    <P style="font-size:20pt; color:red">  Style  </p>
    <p>      20pt  ,       。</p>

    例を表示

    内部スタイルシート(Internal Style Sheet)


    内部スタイルシートはHTMLのに書かれています.内部スタイルシートは、そのWebページにのみ有効です.
    <HTML>
    <HEAD>
    <STYLE type="text/css">
    H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
    </STYLE>
    </HEAD>
    <BODY>
    <H1 class="mylayout">        Style。</H1>
    <H1>        Style。</H1>
    </BODY>
    </HTML>

    例を表示
    内部スタイルシート(Internal Sytle Sheet)はStyleというTagを使います.書き方は以下の通りです.
    <STYLE type="text/css">
    ......
    </STYLE>

    外部スタイルシート(External Style Sheet)


    多くのページが同じスタイル(Styles)を使う必要がある場合、どのような方法を使いますか?
    スタイル(Styles)を1つに書きます.cssは接尾辞のCSSファイルにあり、これらのスタイル(Styles)が必要なページごとにこのCSSファイルを参照します.
    例えば、テキストエディタ(NotePad)でhomeというファイルを作成することができ、ファイル接尾辞は使用しないでください.txt,改成.css.ファイルの内容は次のとおりです.
    H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}

    次のようなWebページを作成します.
    <HTML>
    <HEAD>
    <link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">
    </HEAD>
    <BODY>
    <H1 class="mylayout">        Style。</H1>
    <H1>        Style。</H1>
    </BODY>
    </HTML>

    例を表示
    外部(Extenal)スタイルシートを使用すると、インライン(Inline)とイントラ(Internal)に対して、次のような利点があります.
  • スタイルコードは多重化可能である.1つの外部CSSファイルは、多くのページで共有できます.
  • は修正が容易です.スタイルを変更する場合は、CSSファイルを変更するだけで、各ページを変更する必要はありません.
  • Webページの表示速度を向上させます.スタイルがWebページに書かれていると、Webページの表示速度が低下します.WebページがCSSファイルを参照している場合、このCSSファイルの多くはキャッシュ領域(他のWebページはすでに参照されています)にあり、Webページの表示速度が速くなります.

  • タンデム


    CSSの最初のアルファベットは、Cascadingで、直列を意味します.これは、異なるソースのスタイル(Styles)を合わせて、スタイルを形成することができることを意味します.
    Cascadingの順序は次のとおりです.
  • ブラウザデフォルト(browser default)(優先度が最も低い)
  • 外部スタイルシート
  • 内部スタイルシート(Internal Style Sheet)
  • インラインスタイルシート(優先度が最も高い)
  • スタイル(Styles)の優先順位は、インライン(inline)、内部(internal)、外部(external)、ブラウザデフォルト(browser default)の順です.インライン(Inline)スタイルにfont-size:30 ptがあり、内部(Internal)スタイルにfont-size:12 ptがあると、インライン(Inline)スタイルが内部(Internal)スタイルを上書きします.
    例を表示