CSSの使い方

PHPz
リリース: 2023-04-24 09:23:50
オリジナル
633 人が閲覧しました
<p>CSSの使い方

<p>CSS(Cascading Style Sheet)はWebページのスタイルをデザインするための言語で、Webページの色やフォント、レイアウトなどを制御してWebページを作ることができます。より美しく、より読みやすく。この記事では、CSS を使用して Web ページのスタイルを設定する方法について説明します。

  1. CSS の基本文法
<p>CSS を使用する前に、いくつかの基本的な文法規則を習得する必要があります。 CSS は、以下に示すように、セレクターと宣言の 2 つの主要な部分で構成されます。

选择器 {
    声明1;
    声明2;
    ...
}
ログイン後にコピー
<p> このうち、セレクターはスタイルを設定する HTML 要素を指定するために使用され、宣言は設定されるスタイルを指定するために使用されます。 。簡単な例は次のようになります。

<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>
ログイン後にコピー
<p> この例では、すべての <p> 要素スタイルの値を指定する p セレクターを設定します。 color ステートメントはテキストの色を青として指定するために使用され、font-size ステートメントはテキスト サイズを 20 ピクセルとして指定するために使用されます。

  1. CSS セレクター
<p>CSS では、スタイルを設定する HTML 要素を指定するためにセレクターが使用されます。

  • タグ セレクター: 同じタグ名を持つすべての要素を指定します (例: p はすべての <p> ## を意味します) #要素。
  • ID セレクター:
  • #my-id などの特定の ID を持つ要素を指定します。ID my-id を持つ要素を指定します。
  • クラス セレクター:
  • .my-class などの特定のクラスで要素を指定します。my-class クラスですべての要素を指定します。
  • 結合セレクター: さまざまなタイプのセレクターを結合して、スタイル設定する要素を絞り込みます。
  • 子孫セレクター: 指定された要素のすべての子孫要素を選択します。たとえば、
  • div p は、<div> 内のすべての 要素。
  • 子要素セレクター: 指定された要素の直接の子要素を選択します。たとえば、
  • div > p は、<div>## のすべての直接の子要素を選択します。 # 要素。<p>要素。
  • たとえば、次の CSS コードは、ID
my-div<p> を持つ <div> 要素内のすべての段落要素のスタイルを設定します。 CSS ボックス モデル

  1. CSS ボックス モデルは、Web ページのレイアウトを設計するために使用されるモデルです。任意の HTML 要素は、コンテンツ領域、内側 マージン領域、ボーダー領域、外側マージン領域で構成されます。ボックス モデルのさまざまな部分を以下に示します。
<p>コンテンツ領域: テキスト、画像、ビデオなどの要素の実際のコンテンツが含まれます。

    パディング領域: コンテンツ領域の外側にあり、コンテンツと境界線の間の間隔を制御するために使用されます。
  • 境界領域: 要素を囲み、要素のサイズと形状を定義する境界線。
  • マージン領域: 境界領域の外側に位置し、隣接する要素間の間隔を制御するために使用されます。
  • 以下は CSS ボックス モデルの概略図です:
#my-div p {
    color: red;
}
ログイン後にコピー
CSS ボックス モデルを使用する場合、次のスタイルを通じて要素の 4 つの領域を制御できます。 ##
+----------------------------------+
|               Margin             |
|    +------------------------+    |
|    |        Border          |    |
|    |    +---------------+   |    |
|    |    |   Padding    |   |    |
|    |    |               |   |    |
|    |    +---------------+   |    |
|    |       Content          |    |
|    +------------------------+    |
|               Margin             |
+----------------------------------+
ログイン後にコピー
<p>たとえば、次の CSS コードは、赤い境界線、青のパディング、緑のマージンを持つ要素を定義します。

选择器 {
    margin: 上 右 下 左;
    border: 厚度 样式 颜色;
    padding: 上 右 下 左;
    width: 宽度;
    height: 高度;
}
ログイン後にコピー
<p>

CSS レイアウト<p>

    CSSレイアウトとは、CSS を介して Web ページ要素の位置とサイズを制御し、目的の Web ページ レイアウト効果を実現することを指します。以下に、一般的に使用される CSS レイアウト手法をいくつか示します。
流動的なレイアウト: 相対サイズとパーセント レイアウトを使用して、ページ レイアウトのサイズとコンテンツを調整します。たとえば、<p><div>

要素の幅を 50% に設定すると、要素は画面の半分に広がります。
  • 固定レイアウト: 固定サイズと絶対位置を使用して、ページ上の要素を配置します。たとえば、要素を左上隅に配置するには、position:Absolute; left: 0; top: 0; を使用します。
  • 柔軟なレイアウト: フレキシブル ボックス モデルを使用して要素間の関係を定義します。flex-direction、justify-content、align-items などの属性を使用して、要素の配置と配置を制御できます。 グリッド レイアウト: グリッド システムを使用して、コンテンツを配置および整列します。たとえば、ブートストラップ フレームワークを使用すると、応答性の高いグリッド レイアウトを簡単に構築できます。
  • これは、グリッド レイアウトを使用して複数の要素を 2 列と 3 列に分割するサンプル CSS レイアウト コードです:
  • .box {
        margin: 10px;
        border: 2px solid red;
        padding: 20px;
        background-color: blue;
    }
    ログイン後にコピー
CSS アニメーション<p>

    CSS アニメーションは、HTML 要素にアニメーション効果を適用することで、HTML 要素の外観と動作を変更します。一般的に使用される CSS アニメーション プロパティの一部を以下に示します。
transition: マウスをロールオーバーしたときの色の変更など、要素の状態間の遷移効果を設定するために使用されます。たとえば、<p>transition:background-color 0.5s easy;

を使用すると、背景色の遷移を 0.5 秒でスムーズに行うことができます。
  • transform: 要素の形状、サイズ、位置を変換するために使用されます。たとえば、要素を 90 度回転するには、transform:rotate(90deg); を使用します。
  • animation: カスタム CSS アニメーション効果を作成するために使用されます。たとえば、次のコードを使用して単純な瞬きアニメーションを作成できます:
    .row {
        display: flex;
        flex-wrap: wrap;
    }
    .col-2 {
        width: calc(50% - 20px);
        margin-right: 20px;
    }
    .col-3 {
        width: calc(33.33% - 20px);
        margin-right: 20px;
    }
    ログイン後にコピー
  • 上記の例を使用すると、上記の瞬きアニメーションを要素に適用できます:
  • .blink {
        animation: blink 1s infinite;
    }
    ログイン後にコピー
    <p>总的来说,CSS是一门非常强大的语言,可以用于实现各种网页设计效果。通过掌握CSS的基本语法和常用技巧,您可以创建出优美、灵活、易于维护的网页样式,并提高您的网页设计水平。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート