CSSの使い方

WBOYオリジナル: 2023-05-29 09:42:37711ブラウズ

CSS (Cascading Style Sheets) は、HTML (Hypertext Markup Language、ハイパーテキストマークアップ言語) ドキュメントに使用されるスタイルシート言語です。 CSS は、Web ページの外観をより美しく明確にし、Web ページの読みやすさと保守性を向上させることができます。

CSS スタイルシートには通常、セレクター、属性、値の 3 つの部分が含まれます。セレクターはスタイルを適用する HTML 要素を指定し、属性は要素に適用するスタイルを定義し、値は属性の特定の値を指定します。

CSS の使用方法について詳しく学びましょう。

CSS スタイルシートの作成

まず、HTML ドキュメントの CSS スタイルシートを作成する必要があります。通常、CSS スタイルシートを別の .css ファイルに保存し、HTML ドキュメントの 93f0f5c25f18dab9d176bd4f6de5d30e タグ内の 2cdf5bf648cf2f33323966d7f58a7f3f タグを通じて導入します。

例:

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

セレクター

セレクターは、CSS ルールが適用される HTML 要素を指定する識別子です。一般的なセレクターは次のとおりです。

タグ名セレクター: HTML 要素のタグ名を使用して要素を指定します。例: p、h1、div など。
クラスセレクター: 「.」で始まり、その後にクラス名が続きます。例: .class1、.class2。
ID セレクター: 「#」で始まり、その後に ID 名が続きます。例: #id1、#id2。
属性セレクター: HTML 要素の属性に基づいて要素を指定します。例: [属性]、[属性=値] など。
疑似クラスセレクター: 特定の特殊な要素の状態を指定するために使用されます。例: :hover、:focus など。

例:

/* 标签名选择器 */
p {
  color: blue;
}

/* 类选择器 */
.red {
  color: red;
}

/* ID选择器 */
#green {
  color: green;
}

/* 属性选择器 */
[class="yellow"] {
  color: yellow;
}

/* 伪类选择器 */
a:hover {
  color: purple;
}

Attributes

属性は、CSS ルールが適用される HTML 要素のスタイルを指定します。共通の属性は次のとおりです。

color: テキストの色。
background-color: 背景色。
font-size: フォントサイズ。
font-family: フォントの種類。
font-weight: フォントの太さ。
text-align: テキストの配置。
マージン: マージン。
パディング: パディング。
境界線: 境界線。

例:

/* 文本颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

Value

値は、属性の特定の値です。プロパティの可能な値の範囲は、プロパティのタイプによって異なります。たとえば、色には事前定義された色名 (「赤」、「青」など) を使用したり、16 進数または RGB 値 (「#ff0000」、「rgb(255,0,0)」など) を使用したりできます。）。

例:

/* 颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

継承

CSS のスタイルは継承できます。たとえば、HTML ドキュメント内のすべての段落にフォントプロパティを設定し、これらのプロパティの値を各段落に含まれるテキストに自動的に継承できます。

例:

/* 字体 */
body {
  font-family: Arial, sans-serif;
}

カスケード

複数の CSS ルールが同じ HTML 要素に適用される場合、それらはカスケードされます。これは、一部のルールの優先順位が高く、他のルールよりも優先されることを意味します。 CSS で使用されるカスケード原則は次のとおりです。

スタイルの特異性: 簡単に言うと、セレクターの複雑さです。
ファイルの順序: 後のルールは前のルールをオーバーライドします。

例:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 优先级为1，文件顺序为1 */
    p {
      color: red;
    }
  </style>
  <style>
    /* 优先级为10，文件顺序为2 */
    .green {
      color: green;
    }
  </style>
  <style>
    /* 优先级为100，文件顺序为3 */
    #blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p class="green" id="blue">This text is blue.</p>
</body>
</html>

外部スタイルシート

一般的に、

キャッシュ可能: ブラウザは、次回ロードするために CSS スタイルシートをキャッシュできます。
保守性: スタイルは別のファイルで編集および保守できます。
クロスブラウザのサポート: 外部スタイルシートを使用すると、異なるブラウザ間でスタイルの一貫性を確保できます。
適用性: 一貫性を確保するために、同じスタイルを複数のページに適用できます。

例:



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

  This text is red.
  This text is blue.
  This text is green.

/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

内部スタイルシート

CSS スタイルシートを HTML ドキュメントに保存すると、ページの読み込み速度が向上する場合があります。スタイルシートが現在のページにのみ適用される場合は、スタイルシートを 93f0f5c25f18dab9d176bd4f6de5d30e タグ内の c9ccee2e6ea535a969eb3f532ad9fe89 タグに配置できます。

例:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内部样式表 */
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>
</html>

インラインスタイル

インラインスタイルは、CSS ルールを HTML 要素に直接適用する方法です。 CSSを入力する場所として、HTMLタグの「style」属性を使用します。

例:

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Example</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">This text is red and 20px font size.</p>
</body>
</html>

CSS ボックスモデル

CSS ボックスモデルは、HTML ドキュメント内にボックスを作成してレイアウトする方法です。ボックスは、他の HTML 要素を含めることができる HTML 要素の長方形の領域です。

CSS ボックスモデルは次の部分で構成されます:

Content
Padding
Border
Margin

例:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      padding: 20px;
      border: 10px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box">This is a box.</div>
</body>
</html>

概要

CSS は Web ページ作成の重要な部分です。CSS を使用すると、HTML 要素のスタイルとレイアウトを簡単に制御できます。セレクター、プロパティ、値、継承、カスケード、外部スタイルシート、内部スタイルシート、インラインスタイルを使用して CSS ルールを定義し、CSS ボックスモデルを使用してボックスを作成およびレイアウトできます。 CSS の使用に習熟すると、Web 開発の効率が向上するだけでなく、見栄えが良く、読みやすく、保守しやすい Web ページを作成できます。

以上がCSSの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html 标识符继承 Attribute 选择器样式表外边距内边距 margin padding border 伪类 background

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSとは何ですか次の記事：CSSとは何ですか

続きを見る