ホームページ > 記事 > ウェブフロントエンド > CSSの読み方
CSSの読み方
- WBOYオリジナル
- 2023-05-14 22:16:07484ブラウズ
CSS (Cascading Style Sheets) は、Web デザインで一般的に使用されるマークアップ言語で、Web ページのスタイル、レイアウト、インタラクティブな効果を制御できます。 CSS はもともと World Wide Web Consortium (W3C) によって導入され、現在は標準の一部となっています。 CSS を学習するときは、まず CSS の基本構文と共通プロパティを理解してから、CSS を Web デザインに適用する方法を学ぶ必要があります。
まず、CSS の基本的な構文を見てみましょう。 CSS はセレクターと属性で構成され、HTML 内の要素はセレクターに従って選択され、要素のスタイルは属性によって定義されます。簡単な CSS 構文の例を次に示します。
h1 {
color: red;
font-size: 24px;
}この CSS コード ブロックは、HTML 内の h1 要素を選択し、そのフォントの色を赤に、フォント サイズを 24 ピクセルに設定します。このコード ブロックでは、h1 がセレクター、color と font-size が属性、red と 24px が属性値です。
CSS を学習するときは、一般的に使用されるいくつかの CSS プロパティと値も理解する必要があります。一般的に使用される CSS プロパティとその機能を以下に示します。
- color: テキストの色を設定します。
- font-size: テキストのフォント サイズを設定します。
- background-color: 要素の背景色を設定します。
- margin: 要素の余白を設定します。
- padding: 要素の内側のマージンを設定します。
- border: 要素の境界線を設定します。
- width/height: 要素の幅と高さを設定します。
- display: 要素の表示モードを設定します。
CSS を適用する場合は、CSS コードを HTML に埋め込むか、別の CSS ファイルとして保存して HTML 内で参照する必要があります。一般的に使用される CSS 適用方法は次のとおりです。
- HTML に CSS コードを埋め込む
次に示すように、HTML の head タグ内の style タグを使用して CSS コードを埋め込みます。以下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<style>
h1 {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>この例では、CSS コードを HTML に埋め込み、h1 要素のフォントの色を赤、フォント サイズを 24 ピクセルに設定します。
- CSS コードを別の CSS ファイルとして保存します
CSS コードを別の CSS ファイルとして保存し、次のように HTML 内で参照します。
別の CSS ファイルですべてのスタイルを定義し、HTML でこのファイルを参照することでスタイルを適用できます。
CSS は Web デザインの非常に重要な部分です。CSS 構文と共通のプロパティをマスターすることで、モダンで美しく、使いやすい Web ページを作成できます。
以上がCSSの読み方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。