CSS は Web ページのスタイルを記述するために使用される言語で、Web ページ内のさまざまな要素のスタイルを設定して、Web ページを美しく改善することができます。 CSS の最後のスタイルは、CSS スタイル シートの最後のスタイルを指しますが、実際には、CSS には最後のスタイル以外にも検討する価値のあるものがたくさんあります。
1. CSS セレクター
CSS セレクターは、HTML 要素を選択するために使用されます。要素の属性、関係、位置に基づいて選択を行います。
タグ セレクターは、スタイルを設定するために HTML 要素のタグを選択する、最も一般的に使用されるセレクターです。例:
h1 { color: red; font-size: 24px; }
上記のコードは、タグ セレクターを使用して、すべての要素を選択します。
クラス セレクターは、HTML 要素を選択し、class 属性を設定してスタイルを設定します。例:
.text-red { color: red; }
次に、HTML でこのクラスを使用します:
这里的文字是红色的。
クラス セレクターを使用すると、同じページ内でスタイルを均一に設定できます。
ID セレクターは、一意の ID 属性を持つ HTML 要素を選択し、そのスタイルを設定します。例:
#my-title { font-size: 36px; }
HTML でこの ID を使用します:
这是我的标题
HTML ドキュメント内には同じ ID 値が 1 つだけ存在できることに注意してください。
属性セレクターは、HTML 要素の属性に基づいてスタイルを選択および設定します。例:
input[type="submit"] { background-color: blue; }
上記のコードは、type 属性がsubmit
であるすべての要素に青色の背景を設定します。
子孫セレクターは、HTML 要素の子孫要素 (子要素、孫要素、曾孫要素など) を選択します。例:
.container .title { font-size: 24px; }
上記のコードは、クラスcontainer
の要素内のクラスtitle
のすべての子孫要素を選択し、それらのフォント サイズを 24 ピクセルに設定することを意味します。
擬似クラス セレクターは、セレクターのコロンの後に定義されるキーワードで、特定の状態の要素を選択するために使用されます。例:
a:hover { color: red; }
上記のコードは、マウスがホバーしているときにリンクの色を赤に設定することを意味します。
2. CSS ボックス モデル
CSS ボックス モデルは、コンテンツ領域、パディング領域、境界領域、マージン領域を含む、HTML 要素の各部分が「ボックス」であることを意味します。このモデルは、HTML 要素の全体的な構造とスタイルを理解するために重要です。
3. CSS ユニット
CSS にはさまざまなユニットがあり、さまざまなスタイル属性を表現してさまざまな効果を実現するために使用できます。一般的な単位は次のとおりです。
ピクセルは長さの基本単位であり、通常は画面上の要素のサイズを指定するために使用されます。例:
p { font-size: 14px; }
Percentage は、親要素に対する相対的な長さの単位です。例:
.container { width: 80%; }
上記のコードは、.container
の幅を親要素の幅の 80% に設定することを意味します。
em と rem は、現在の要素のフォント サイズを基準とした長さの単位です。em
はその要素自体に対する相対的なフォント サイズであり、rem
はルート要素 (通常は HTML 要素) に対する相対的なフォント サイズです。例:
h1 { font-size: 2.5em; } .container { width: 40rem; }
上記のコードでは、h1
要素のフォント サイズは、それ自体の要素のフォント サイズの 2.5 倍であり、.container# の幅です。 ##要素はルート要素のフォントサイズの40倍です。
.container { width: 80vw; height: 50vmin; }
.container要素の幅はビューポートの幅の 80%、高さはビューポートの幅の 80% です。ビューポートの幅と高さの大きい値、最小値の 50%。
h1 { color: red; }
要素のテキストの色を赤に設定します。
.container { background-color: #f8f8f8; }
.container要素の背景色を明るい灰色に設定します。
.container { border: 2px solid black; }
.container要素の境界線の幅を 2 ピクセル、色を黒、境界線のスタイルを実線に設定します。
p { font-size: 16px; }
要素のフォント サイズを 16 ピクセルに設定します。
h1 { text-align: center; }
上述代码将所有的元素的文本居中对齐。
五、CSS框架
CSS框架是指提供一组预定义的CSS样式和JavaScript交互,可以快速搭建网页的开发工具。常见的CSS框架有Bootstrap、Foundation、Materialize等。它们提供了大量的预设样式和交互组件,可以极大地加速开发的进度和提升用户体验。
以上就是CSS的一些基本内容和重要性,虽然CSS的最后一个很重要,但我们也要关注其它内容,以了解并掌握CSS的全部知识,从而开发出更为优秀的网页。
以上が最後のスタイルを除いた CSS について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。