CSSの読み方-フロントエンドQ&A-php.cn

CSSの読み方

WBOY

リリース： 2023-05-14 22:16:07

オリジナル

545 人が閲覧しました

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 ピクセルに設定します。