CSSスタイルの書き方-フロントエンドQ&A-php.cn

CSSスタイルの書き方

WBOY

リリース： 2023-05-27 11:02:37

オリジナル

899 人が閲覧しました

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 スタイルを記述する一般的な方法です。もちろん、実際の開発では、異なるスタイルを異なるスタイルシート（印刷スタイル、モバイルスタイルなど）に記述する必要がある場合も多く、スタイルシート間の関係にも注意が必要です。同時に、過剰なネストや過度に複雑なセレクターを避けるために、CSS スタイルのパフォーマンスの問題も考慮する必要があります。この記事がお役に立てば幸いです。
以上がCSSスタイルの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。