CSSの紹介

CSSは、ブラウザでのHTMLページの外観を定義する言語です。それは急速に進化しており、最新の機能のおかげで、CSSはかつてないほど使いやすくなっています

CSSとは

CSS(の略語カスケードスタイルシート)は、HTMLファイルのスタイルを設定するために使用する言語であり、ページ上の要素をどのようにレンダリングするかをブラウザに指示します。

それはウェブページのスタイリングの必要性から成長しました。 CSSが導入される前は、人々はWebページのスタイルを設定する方法を望んでいました。これは、当時は非常によく似ていて「学術的」に見えました。パーソナライズに関しては、多くのことを行うことができませんでした。

HTML 3.2では、HTML要素属性としてインラインで色を定義するオプションと、次のようなプレゼンテーションタグが導入されました。centerそしてfont、しかしそれはすぐに理想的な状況からはほど遠いものにエスカレートしました😱。

CSSを使用すると、プレゼンテーションに関連するすべてのものをHTMLからCSSに移動できるため、HTMLは、ブラウザーでの外観ではなく、ドキュメントの構造を定義する形式に戻ることができます。

CSSは絶えず進化しており、5年前に使用したCSSは、新しい慣用的なCSS手法が登場し、ブラウザーが変更されたため、時代遅れになっている可能性があります。

CSSの簡単な歴史

先に進む前に、CSSの歴史について簡単に要約しておきたいと思います。

CSSは、Webページのスタイル設定の必要性から生まれました。 CSSが導入される前は、人々はWebページのスタイルを設定する方法を望んでいました。これは、当時は非常によく似ていて「学術的」に見えました。パーソナライズに関しては、多くのことを行うことができませんでした。

HTML 3.2では、HTML要素属性としてインラインで色を定義するオプションと、次のようなプレゼンテーションタグが導入されました。centerそしてfont、しかしそれは理想的な状況からは程遠い状況に急速にエスカレートしました。

CSSを使用すると、プレゼンテーションに関連するすべてのものをHTMLからCSSに移動できるため、HTMLは、ブラウザーでの外観ではなく、ドキュメントの構造を定義する形式に戻ることができます。

CSSは絶えず進化しており、5年前に使用したCSSは、新しい慣用的なCSS手法が登場し、ブラウザーが変更されたため、時代遅れになっている可能性があります。

CSSが生まれた時代と、Webがどれほど異なっていたかを想像するのは難しいです。

当時、競合するブラウザがいくつかありました。主なものはInternetExplorerまたはNetscapeNavigatorです。

ページはHTMLを使用してスタイル設定され、次のような特別な表示タグが付けられています。boldおよび特別な属性。これらのほとんどは現在非推奨です。

これは、カスタマイズの機会が限られていることを意味します。

スタイリングの決定の大部分はブラウザに任されていました。

また、それぞれがより多くのパワーと機会を与えるために異なる非標準タグを導入したため、それらの1つ専用のサイトを構築しました。

すぐに人々は、すべてのブラウザで機能する方法で、ページのスタイルを設定する方法の必要性に気づきました。

1994年に提案された最初のアイデアの後、CSSは1996年に最初のリリースを取得し、CSSレベル1(「CSS1」)の推奨事項が公開されました。

CSSレベル2(「CSS2」)は1998年に公開されました。

それ以来、CSSレベル3で作業が開始されました。CSSワーキンググループは、すべての機能を分割し、モジュールで個別に作業することを決定しました。

ブラウザはCSSの実装に特に高速ではありませんでした。このCSSTricksの投稿でうまく説明されているように、最初のブラウザーに完全なCSS仕様であるIE forMacが実装されるまで2002年まで待たなければなりませんでした。https://css-tricks.com/look-back-history-css/

Internet Explorerは、最初からボックスモデルを誤って実装していたため、同じスタイルをブラウザー間で一貫して適用しようとすると、何年にもわたる苦痛が生じました。ブラウザーに希望どおりにレンダリングさせるには、さまざまなトリックやハックを使用する必要がありました。

今日、物事ははるかに良くなっています。ほとんどの場合、癖を気にせずにCSS標準を使用でき、CSSはかつてないほど強力になっています。

CSSの正式なリリース番号はもうありませんが、CSSワーキンググループは、現在安定していてブラウザに含める準備ができていると見なされているモジュールの「スナップショット」をリリースします。これは2018年からの最新のスナップショットです:https://www.w3.org/TR/css-2018/

CSSレベル2は、現在でも私たちが作成するCSSのベースであり、その上にさらに多くの機能が構築されています。

CSSはどのように見えますか

CSSルールセットと呼ばれる部分がありますセレクタ、および他の部分は宣言。宣言にはさまざまなものが含まれていますルール、それぞれがプロパティ、および

この例では、pはセレクターであり、値を設定する1つのルールを適用します20pxfont-sizeプロパティ:

p {
  font-size: 20px;
}

複数のルールが次々にスタックされます。

p {
  font-size: 20px;
}

a { color: blue; }

セレクターは、1つ以上のアイテムをターゲットにできます。

p, a {
  font-size: 20px;
}

上記のようなHTMLタグ、または特定のクラス属性を含むHTML要素をターゲットにすることができます。.my-class、または特定のHTML要素idを持つ属性#my-id

より高度なセレクターを使用すると、属性が特定の値に一致するアイテム、または疑似クラスに応答するアイテムを選択できます(詳細は後で説明します)。

セミコロン

すべてのCSSルールはセミコロンで終了します。セミコロンはない最後のルールの後を除いてオプションですが、一貫性を保ち、別のプロパティを追加して前の行にセミコロンを追加し忘れた場合のエラーを回避するために、常にそれらを使用することをお勧めします。

フォーマットとインデント

フォーマットに関する決まったルールはありません。このCSSは有効です:

      p
      {
  font-size:           20px   ;
                      }

a{color:blue;}

しかし、見るのは苦痛です。上記の例に見られるようないくつかの規則に従ってください。セレクターと左の閉じ括弧をスティックし、各ルールに2つのスペースをインデントし、セレクターの同じ行に1つのスペースで区切られた開き括弧を置きます。

間隔とインデントを正しく一貫して使用することは、コードを理解する上で視覚的に役立ちます。

WebページにCSSをどのようにロードしますか

CSSは、次の3つの方法でページに読み込むことができます。styleページ内のタグhead、外部CSSファイルを使用し、タグをインライン化します。 CSSはさまざまな方法でHTMLページに添付されます。

ザ・linkタグはCSSファイルを含める方法です。これは、CSSを使用するための推奨される方法です。つまり、1つのCSSファイルがサイトのすべてのページに含まれ、そのファイルの1行を変更すると、サイトのすべてのページの表示に影響します。

この方法を使用するには、linkのタグhref含めるCSSファイルを指す属性。あなたはそれを中に追加しますheadサイトのタグ(内部ではないbody鬼ごっこ):

<link rel="stylesheet" type="text/css" href="myfile.css">

ザ・relそしてtypeリンク先のファイルの種類をブラウザに通知するため、属性も必要です。

2:を使用してstyle鬼ごっこ

を使用する代わりにlinkCSSを含む別のスタイルシートを指すタグ。CSSを直接内部に追加できます。style鬼ごっこ。構文は次のとおりです。

<style>
...our CSS...
</style>

この方法を使用すると、個別のCSSファイルの作成を回避できます。これは、CSSを別のファイルに「形式化」する前に実験したり、CSSの特別な行をファイルだけに追加したりするのに適した方法だと思います。

3:インラインスタイル

インラインスタイルは、CSSをページに追加する3番目の方法です。追加できますstyle任意のHTMLタグに属性を付け、CSSを追加します。

<div style="">...</div>

例:

<div style="background-color: yellow">...</div>

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: