CSS 入門: Web ページのスタイルを設定する

CSS (Cascading Style Sheets) は Web デザインの基礎です。カラー フォントからレイアウト、アニメーションに至るまで、Web サイトの外観と雰囲気を制御できます。

1.CSSとは何ですか?

CSS は、HTML で書かれたドキュメントのプレゼンテーションを記述するために使用される言語です。 HTML 要素が画面、紙、またはその他のメディア上でどのように表示されるかを定義します。

2. 基本的な構文

CSS ルールはセレクターと宣言ブロックで構成されます。

selector {
  property: value;
}

例:

body {
  background-color: lightblue;
}

これにより、ページの背景色が水色に変わります。

3. セレクター

セレクターを使用すると、特定の HTML 要素をターゲットにしてスタイルを適用できます。次の方法で要素を選択できます:

• タイプ: p {} はすべての段落を対象とします。
• クラス: .my-class {} は、クラス「my-class」を持つ要素をターゲットとします。
• ID: #my-id {} は、ID「my-id」を持つ要素をターゲットとします。

4. ボックスモデル

すべての HTML 要素は、次のもので構成されるボックスとして考えることができます。

• コンテンツ: 内部にある実際のテキストまたはメディア。
• パディング: コンテンツと境界線の間のスペース。
• 境界線: 要素の周囲の輪郭。
• マージン: 要素を区切る境界線の外側のスペース。

5. 共通のプロパティ

色: 色: 赤;テキストの色を変更します。

• フォント: font-size: 16px;テキストのサイズを設定します。
• 背景: 背景色: ライトグレー;背景色を変更します。
• 幅/高さ: 幅: 100%;高さ: 200px;要素の寸法を定義します。

6.レスポンシブデザイン

メディア クエリを使用して、Web ページをすべてのデバイスで適切に表示できるようにします。例:

@media screen and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

画面幅が 600px 以下の場合、背景色が薄黄色に変わります。

以上がCSS 入門: Web ページのスタイルを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。