CSSスタイルの書き方

WBOYオリジナル: 2023-05-27 11:02:37807ブラウズ

CSS (Cascading Style Sheets) は、Web ページのスタイルを記述するために使用される言語です。 CSS は、Web ページのスタイルをより柔軟に制御できるようにする豊富なスタイル属性を提供します。この記事では、スタイル制御をより良くマスターするために役立ついくつかの CSS スタイルの記述方法を紹介します。

1. インラインスタイル

インラインスタイルとは、以下のようにHTMLタグのstyle属性にstyle属性を設定することです。直感的ですが、HTML コードが冗長になり保守が困難になるため、頻繁に使用することはお勧めできません。

2. 埋め込みスタイル

埋め込みスタイルは、HTML ファイルの先頭にスタイルタグを使用し、その中に CSS コードを記述します。以下に示すように:

<p style="color: red;">这是一段红色的文字。</p>

この書き方は、すべてのスタイルコードを先頭に置き、ページ内のコードの量を減らすことができるため、インラインスタイルよりも優れています。ただし、複数の HTML ファイルで同じスタイルを使用する必要がある場合、スタイルコードを再度コピーする必要があり、メンテナンスコストが増加します。

3. 外部スタイル

外部スタイルは、スタイルコードを別の CSS ファイルに配置し、それを HTML ファイルに導入します。以下に示すように:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>嵌入式样式</title>
  <style type="text/css">
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>
</html>

スタイルコードは、以下に示すように、スタイルファイル style.css に配置されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部样式</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>这是一段蓝色的文字。</p>
</body>
</html>

この記述方法は、スタイルコードとスタイルコードを分離するため、最適です。 HTML コードの削減冗長な HTML コードが削除され、ページ全体のレイアウトがより明確になります。同時に、複数の HTML ファイルでこのスタイルを使用する必要がある場合、スタイルファイルを変更するだけで、このスタイルを参照するすべてのページが自動的に更新されます。

さらに、実際の開発で非常に一般的な CSS スタイルの記述方法がいくつかあります:

4. セレクター

セレクターは、アプリケーションスタイルを指定するために使用されます。 HTML要素。 CSS はさまざまなセレクターをサポートします。一般的なセレクターは次のとおりです。

要素セレクター: 指定されたタイプの HTML 要素を選択します。

```
p {
  color: blue;
}
```

ID セレクター: 特定の ID を持つ HTML 要素を選択するために使用されます。

```
p {
  color: red;
}
```

クラスセレクター: 特定のクラス名を持つ HTML 要素を選択するために使用されます。

```
#myId {
  color: blue;
}
```

属性セレクター: 特定の属性を持つ HTML 要素を選択します。

```
.myClass {
  color: green;
}
```

スタイル属性は、要素のスタイルを記述するために使用されます。 CSS は多くのスタイル属性をサポートしています。一般的なものをいくつか挙げます:

color: テキストの色。

input[type="text"] {
  border: 1px solid red;
}

font-size: フォントサイズ。

```
p {
  color: red;
}
```

font-family: フォントの種類。

```
p {
  font-size: 14px;
}
```

background-color: 背景色。

```
p {
  font-family: Arial, sans-serif;
}
```

境界線: 境界線。

```
p {
  background-color: yellow;
}
```

マージン: マージン。

```
p {
  border: 1px solid black;
}
```

パディング: パディング。

```
p {
  margin: 10px;
}
```

疑似クラスと疑似要素は、要素の特定の状態または部分にスタイルを追加するために使用されます。

疑似クラス: 要素の特別な状態を記述するために使用されます。

```
p {
  padding: 5px;
}
```

疑似要素: 要素の特別な部分を説明するために使用されます。

```
a:hover {
  color: red;
}
```

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

css html 选择器样式表外边距内边距 margin padding border 伪类伪元素 background

声明：

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

前の記事：CSS 要素を非表示にする次の記事：CSS 要素を非表示にする

続きを見る