简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

CSSの使い方

WBOY
リリース： 2023-05-29 09:42:37
オリジナル
658 人が閲覧しました

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

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

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

  1. CSS スタイル シートの作成

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

例: 

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
ログイン後にコピー
  1. セレクター

セレクターは、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;
}
ログイン後にコピー
  1. 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;
}
ログイン後にコピー
  1. 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;
}
ログイン後にコピー
  1. 継承

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

例: 

/* 字体 */
body {
  font-family: Arial, sans-serif;
}
ログイン後にコピー
  1. カスケード

複数の 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>
ログイン後にコピー
  1. 外部スタイルシート

一般的に、

  • キャッシュ可能: ブラウザは、次回ロードするために 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;
}
ログイン後にコピー
  1. 内部スタイルシート

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