<p>CSSの使い方
<p>CSS(Cascading Style Sheet)はWebページのスタイルをデザインするための言語で、Webページの色やフォント、レイアウトなどを制御してWebページを作ることができます。より美しく、より読みやすく。この記事では、CSS を使用して Web ページのスタイルを設定する方法について説明します。
- 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 ピクセルとして指定するために使用されます。
- 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 ボックス モデル
- 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 サイトの他の関連記事を参照してください。