Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

CSSを作成します。

スタイルシートを読み込む際に、ブラウザは、HTML形式の文書に基づいて説明します。


スタイルシートを挿入する方法

3つの方法でスタイルシートを挿入します。

  • 外部スタイルシート
  • 内部スタイルシート
  • インラインスタイル

外部スタイルシート

スタイルが必要な多くのページに適用した場合、外部スタイルシートは、理想的な選択であろう。 外部スタイルシートの場合には、サイト全体の外観を変更するファイルを変更することができます。 各ページには、スタイルシートにリンクするには、<link>タグを使用しています。 (文書)ヘッドの<link>タグ:

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

ブラウザは、文書の書式を設定するために、それに応じてファイルmystyle.cssスタイル宣言から読み込まれます。

外部スタイルシートは、任意のテキストエディタで編集することができます。 ファイルは任意のHTMLタグを含めることはできません。 スタイルシートは、拡張子の.cssで保存する必要があります。 ここでは、スタイルシートファイルの例です。

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

発言 プロパティ値と単位の間にスペースを残さないでください。 代わりに、「余白左:20ピクセル」:あなたが「20ピクセルのマージン左 "を使用している場合、それはIE 6でのみ有効であるが、それは中のMozilla / FirefoxやNetscapeで動作しません。


内部スタイルシート

単一のドキュメントは特別なスタイルを必要とする場合、内部スタイルシートを使用する必要があります。 あなたはこのように、内部スタイルシートを定義するために、文書の頭の中の<style>タグを使用することができます。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>


インラインスタイル

原因を一緒に混合性能およびコンテンツに、インラインスタイルは、スタイルシートの利点の多くを失うことになります。 スタイルは、一つの要素に一度だけ適用する必要があるとき、例えば、この方法を警告してください。

インラインスタイルを使用するには、関連するタグにスタイル(スタイル)属性を使用する必要があります。 style属性は、任意のCSSプロパティを含めることができます。 この例では、段落と左余白の色を変更する方法を示しています。

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>


複数のスタイル

いくつかの属性が異なるスタイルシート内の同じセレクタを定義されている場合は、より具体的なスタイルシートのプロパティ値は継承されています。

例えば、外部スタイルシートは、H3セレクタのための3つのプロパティがあります。

h3
{
color:red;
text-align:left;
font-size:8pt;
}

内部スタイルシートは、H3セレクタのための2つのプロパティがあります。

h3
{
text-align:right;
font-size:20pt;
}

スタイルは内部スタイルシートと外部スタイルシートが同時にこのページにリンクしている場合は、H3のgetは、次のとおりです。

color:red;
text-align:right;
font-size:20pt;

つまり、プロパティが外部スタイルシートから継承され、テキストの配置(テキストアライメント)とフォントサイズ(フォントサイズ)は、内部スタイルシートルールに置き換えられます色です。


複数のスタイルは、1を積層されています

スタイルシートは、様々な方法で指定されたスタイル情報を可能にします。 スタイルは、単一のHTML要素、HTMLページの最初の要素、または外部CSSファイル内で指定することができます。 偶数倍外部スタイルシートは、単一のHTML文書内で参照することができます。

スタッキング順序

同じHTML要素が複数のスタイルで定義されている場合、どのスタイルを使うのだろうか?

一般的には、すべてのスタイルは、数4が最も高い優先順位を持って、次の規則に従って新しい仮想スタイルシートに積層されます。

  1. デフォルトブラウザ
  2. 外部スタイルシート
  3. (内側の<head>タグ内の)内部スタイルシート
  4. インラインスタイル(内側のHTML要素)

だから、(HTML要素の内側)インラインスタイルは、それが次のスタイル宣言よりも優先されることを意味最も高い優先度を持っている:ラベルスタイルステートメント、外部スタイルシートのスタイルステートメント、またはブラウザのスタイルステートメント(デフォルト値)。

発言ヒント:あなたは<head>の中に外部のスタイルファイルを使用する場合も、スタイルを定義した場合、スタイルシートは内部スタイル外部ファイルを置き換えます。