CSS 基礎チュートリアル

CSS 盒子モデル

CSS3基本チュートリアル

CSS 参考マニュアル

CSS @規則(RULES)

CSS文法 CSS紹介

CSS入門

CSSファイルは.css拡張子で保存された純テキストファイルです。

CSS入門

本チュートリアルでは、CSSを使ってウェブページにスタイルとフォーマット設定情報を追加するのがどれだけ簡単かを学びます。しかし、始める前に、HTMLの使用に関する知識があることを確認してください。

もしWeb開発の世界に初めて足を踏み入れたばかりの場合、ここから学び始めましょう»

早速、カascading Style Sheets（CSS）を使い始めましょう。

HTMLドキュメントにCSSを含める

CSSは独立したドキュメントとして付属することも、HTMLドキュメント自体に埋め込むこともできます。HTMLドキュメントにCSSを含める方法は以下の通りです：

内联スタイル -使用styleHTMLの開始タグの属性。
嵌入式スタイル -使用<style>ドキュメントのヘッダー要素。
外部スタイルシート -使用<link>要素に外部CSSファイルを指し示す。

本チュートリアルでは、CSSを插入するすべての三つの方法を一つずつ紹介します。

注意：内联スタイルの優先順位が最も高く、外部スタイルシートの優先順位が最も低い。これは、嵌入式スタイルシートと外部スタイルシート中で要素にスタイルを指定する場合、嵌入式スタイルシート内で衝突するスタイルルールは、外部スタイルシートをオーバーライドする。

内联スタイル

内联スタイルは、CSSルールを直接開始タグに挿入することで、要素に一つのスタイルルールを適用するために使用される。style属性を要素に付ける。

これは、style属性包括一系列CSS属性和値対。毎"property: value"の間で分号（;）の間で分号（

例

<h1　style="color:red;　font-size:30px;">This　is　a　heading</h1>
<p　style="color:green;　font-size:22px;">This　is　a　paragraph.</p>
<div　style="color:blue;　font-size:14px;">This　is　some　text　content.</div>

テストをしてみる‹/›

インラインスタイルを使用することは通常推奨されません。スタイルルールがHTMLタグ内に直接埋め込まれるため、デモンストレーションとドキュメントの内容が混ざり合い、コードのメンテナンスが難しくなり、CSSの使用目的を否定します。

注意：インラインスタイルで設定要素のおよびクラスのスタイルが不可能になるため、コード内でスタイル属性を使用することを避けるべきです。代わりに、外部スタイルシートHTMLドキュメントにスタイルを追加するための最も選ばれる方法です。

内側のスタイルシート

内側または内部のスタイルシートは、それらを内側に埋め込むドキュメントにのみ影響を与えます。

内側のスタイルシート<head>使用できます。<style>HTMLドキュメントの部分に<style>要素定義が<head>および</HTMLドキュメント内で任意の要素を定義できますが、それらはhead>

例

!DOCTYPE　html><html　lang="en"><head>
　　　　<title>My　HTML　Document</title>
　　　　<style>
　　　　　　　　タグの間に。以下の例を見てみましょう：-body　{　background
　　　　　　　　color:　YellowGreen;　}
　　　　</p　{　color:　#fff;　}/head><body>
　　　　<h1>This　is　a　heading</h1>
　　　　<p>This　is　a　paragraph　of　text.</p></body></html>

テストをしてみる‹/›

ヒント：style><とタグのtype5の標準スタイルシート言語とデフォルトスタイルシート言語ですので、この設定は無視できます。属性（即）はスタイルシートの言語を定義します。この属性は情報提供のみで、CSSがHTML<style><link>type="text/css"

外部スタイルシート

スタイルがウェブサイトの多くのページに適用される場合、外部スタイルシートは理想的な選択です。

外部スタイルシートはすべてのスタイルルールを1つの独立したドキュメントに保存しており、ウェブサイトのどのHTMLファイルからでもリンクできます。外部スタイルシートは最も柔軟で、外部スタイルシートがあると、1つのファイルを変更するだけでウェブサイト全体の外観を変更できます。

外部スタイルシートを追加する方法は2種類あります。- リンクおよびインポート

外部スタイルシートのリンク

リンク前に、まずスタイルシートを作成する必要があります。お好みのコードエディタを開いて新しいファイルを作成してください。そのファイルに以下のCSSコードを入力して、「style.css」と名付けます。

body　{
　　　　background:　lightyellow;
　　　　font:　18px　Arial,　sans-serif;}h1　}
　　　　color:　orange;}

を使用できます。<link>タグは外部スタイルシートをHTMLドキュメントにリンクします。これは、<link>タグを内部に<head>部分、以下の例で確認できます：

例

!DOCTYPE　html><html　lang="en"><head>
　　　　<title>My　HTML　Document</title>
　　　　<link　rel="stylesheet"　href="css/style.css"></head><body>
　　　　<h1>This　is　a　heading</h1>
　　　　<p>This　is　a　paragraph　of　text.</p></body></html>

テストをしてみる‹/›

ヒント：これらの3つの方法の中で、外部スタイルシートを使用することは、スタイルを定義し、HTMLドキュメントに適用する最良の方法です。外部スタイルシートを使用すると、影響を受けるHTMLファイルがマークアップの変更を受けないことが明確です。

外部スタイルシートのインポート

これは、@importルールは外部スタイルシートをロードする別の方法です。これは、@importこのステートメントは、ブラウザが外部スタイルシートをロードし、そのスタイルを使用するように指示します。

これを使用する方法は2種類あります。最も簡単なのはドキュメントのタイトル内で使用することです。他のCSSルールが含まれている可能性があることに注意してください。<style>要素中。以下はその例です：

例

<style>
　　　　@import　url("css/style.css");
　　　　p　{
　　　　　　　　color:　blue;
　　　　　　　　font-size:　16px;
　　　　}
　　</style>

テストをしてみる‹/›

同様に、以下を使用することもできます。@importルールは別のスタイルシートにスタイルシートをインポートします。

例

@import　url("css/layout.css");
@import　url("css/color.css");body　{
　　　　color:　blue;
　　　　font-size:　14px;}

テストをしてみる‹/›

注意：すべて@importすべてのルールはスタイルシートの先頭に表示する必要があります。スタイルシートで定義されたスタイルルールは、インポートされたスタイルシート内の競合ルールを上書きしますが、パフォーマンス問題のために、スタイルシートを別のスタイルシートにインポートすることは推奨されません。

CSS文法 CSS紹介