最新のWeb開発のチュートリアル

HTMLスタイル - CSS

❮前 次の章❯

CSS =スタイルや色

テキストを操作します
色、 ボックス

CSSとHTMLのスタイル設定

CSSはカスケーディングスタイルシートの略

スタイリングは、3通りの方法でHTML要素に追加することができます。

  • インライン- HTML要素にスタイル属性を使用して
  • 内部-使用して<style> HTMLの要素 <head>セクションを
  • 外部- 1つ以上の外部CSSファイルを使用して

スタイリングを追加するための最も一般的な方法は、個別のCSSファイルでスタイルを維持することです。 あなたはそれを自分で試してみることが立証しやすく、かつ簡単ですので、しかし、このチュートリアルでは、我々は、内部のスタイリングを使用しています。

あなたは私たちにCSSについて多くを学ぶことができるCSSチュートリアル 。

インラインスタイリング(Inline CSS)

インラインスタイリングは 、単一のHTML要素にユニークなスタイルを適用するために使用されます。

インラインスタイリングが使用するstyle属性を。

この例では、テキストの色変化<h1>ブルーの要素。

例

<h1 style="color:blue;">This is a Blue Heading</h1>
»それを自分で試してみてください

内部スタイリング(Internal CSS)

内部のスタイリングは、1つのHTMLページのスタイルを定義するために使用されます。

内部スタイリングを定義した<head> HTMLページのセクション内<style>要素：

例

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
»それを自分で試してみてください

外部スタイリング(External CSS)

外部スタイルシートは、多くのページのスタイルを定義するために使用されます。

外部スタイルシートを使用すると、1つのファイルを変更することにより、Webサイト全体の外観を変更することができます！

、外部スタイルシートを使用して、それへのリンクを追加するには<head> HTMLページのセクション：

例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
»それを自分で試してみてください

外部スタイルシートは、任意のテキストエディタで記述することができます。 ファイルには、任意のHTMLタグを含めることはできません。 スタイルシートファイルを一緒に保存しなければならない.css拡張子。

ここで、「どのようにあるstyles.css 」になります。

body {
    background-color: lightgrey;
}

h1 {
    color: blue;
}

p {
    color:green;
}

CSSフォント

CSSのcolorプロパティは、HTML要素に使用するテキストの色を定義します。

CSS font-familyプロパティは、HTML要素に使用するフォントを定義します。

CSS font-sizeプロパティは、HTML要素に使用するテキストサイズを定義します。

例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
»それを自分で試してみてください

CSSボックスモデル

あなたがそれを見ることができない場合でも、すべてのHTML要素には、その周りのボックスを持っています。

CSSのborderプロパティは、HTML要素の周りに見える境界線を定義しています。

例

p {
    border: 1px solid black;
}
»それを自分で試してみてください

CSSのpaddingプロパティは、パディングを定義(space)の境界線の内側：

例

p {
    border: 1px solid black;
    padding: 10px;
}
»それを自分で試してみてください

CSSのmarginプロパティは、マージンを定義(space)境界の外：

例

p {
    border: 1px solid black;
    padding: 10px;
    margin: 30px;
}
»それを自分で試してみてください

使用上CSS例pxピクセルサイズを定義します。

id属性

使用のCSS上のすべての例は、一般的な方法でHTML要素をスタイルに。

1つの特別な要素のための特別なスタイルを定義するには、最初の要素にid属性を追加します。

<p id="p01">I am different</p>

その後、特定の持つ要素のスタイルを定義しますid ：

例

#p01 {
    color: blue;
}
»それを自分で試してみてください

class属性

特殊なタイプのスタイルを定義するには( class ) 、要素の追加class要素に属性を：

<p class="error">I am different</p>

今、あなたは特定のクラスを持つ要素のために別のスタイルを定義することができます。

例

p.error {
    color: red;
}
»それを自分で試してみてください

使用するid対処するためのsingleの要素を。 使用するclass解決するためにgroupsの要素を。

章のまとめ

  • HTMLの使用styleインラインスタイリングのための属性を
  • HTMLを使用し<style>内部CSSを定義する要素を
  • HTMLを使用して<link>要素は、外部CSSファイルを参照します
  • HTMLを使用して<head>要素を格納する<style>と<link>要素
  • CSSの使用colorテキストの色のプロパティを
  • CSSの使用font-familyテキストフォントのプロパティを
  • CSSを使用しfont-sizeテキストサイズのプロパティを
  • CSSの使用border目に見える要素のボーダーのプロパティを
  • CSSの使用paddingの境界線内の空間のプロパティを
  • CSSの使用margin境界の外スペースのプロパティを

練習で自分自身をテストします！

演習1» 運動2» 運動3» 運動4» 運動5» 運動6»

HTMLスタイルタグ

タグ 説明
<style> HTML文書のスタイル情報を定義します
<link> 文書と外部リソースとの間のリンクを定義します

❮前 次の章❯