最後のスタイルを除いた CSS について話しましょう

CSS は Web ページのスタイルを記述するために使用される言語で、Web ページ内のさまざまな要素のスタイルを設定して、Web ページを美しく改善することができます。 CSS の最後のスタイルは、CSS スタイル シートの最後のスタイルを指しますが、実際には、CSS には最後のスタイル以外にも検討する価値のあるものがたくさんあります。

1. CSS セレクター

CSS セレクターは、HTML 要素を選択するために使用されます。要素の属性、関係、位置に基づいて選択を行います。

1. タグ セレクター

タグ セレクターは、スタイルを設定するために HTML 要素のタグを選択する、最も一般的に使用されるセレクターです。例:

h1 {
    color: red;
    font-size: 24px;
}

上記のコードは、タグ セレクターを使用して、すべての <h1> 要素を選択します。

2. クラス セレクター

クラス セレクターは、HTML 要素を選択し、class 属性を設定してスタイルを設定します。例:

.text-red {
    color: red;
}

次に、HTML でこのクラスを使用します:

<p class="text-red">这里的文字是红色的。</p>

クラス セレクターを使用すると、同じページ内でスタイルを均一に設定できます。

3. ID セレクター

ID セレクターは、一意の ID 属性を持つ HTML 要素を選択し、そのスタイルを設定します。例:

#my-title {
    font-size: 36px;
}

HTML でこの ID を使用します:

<h1 id="my-title">这是我的标题</h1>

HTML ドキュメント内には同じ ID 値が 1 つだけ存在できることに注意してください。

4. 属性セレクター

属性セレクターは、HTML 要素の属性に基づいてスタイルを選択および設定します。例:

input[type="submit"] {
    background-color: blue;
}

上記のコードは、type 属性が submit であるすべての <input> 要素に青色の背景を設定します。

5. 子孫セレクター

子孫セレクターは、HTML 要素の子孫要素 (子要素、孫要素、曾孫要素など) を選択します。例:

.container .title {
    font-size: 24px;
}

上記のコードは、クラス container の要素内のクラス title のすべての子孫要素を選択し、それらのフォント サイズを 24 ピクセルに設定することを意味します。

6. 擬似クラス セレクター

擬似クラス セレクターは、セレクターのコロンの後に定義されるキーワードで、特定の状態の要素を選択するために使用されます。例:

a:hover {
   color: red;
}

上記のコードは、マウスがホバーしているときにリンクの色を赤に設定することを意味します。

2. CSS ボックス モデル

CSS ボックス モデルは、コンテンツ領域、パディング領域、境界領域、マージン領域を含む、HTML 要素の各部分が「ボックス」であることを意味します。このモデルは、HTML 要素の全体的な構造とスタイルを理解するために重要です。

3. CSS ユニット

CSS にはさまざまなユニットがあり、さまざまなスタイル属性を表現してさまざまな効果を実現するために使用できます。一般的な単位は次のとおりです。

1. ピクセル (ピクセル)

ピクセルは長さの基本単位であり、通常は画面上の要素のサイズを指定するために使用されます。例:

p {
    font-size: 14px;
}

2. Percentage

Percentage は、親要素に対する相対的な長さの単位です。例:

.container {
    width: 80%;
}

上記のコードは、.container の幅を親要素の幅の 80% に設定することを意味します。

3. em と rem

em と rem は、現在の要素のフォント サイズを基準とした長さの単位です。 em はその要素自体に対する相対的なフォント サイズであり、rem はルート要素 (通常は HTML 要素) に対する相対的なフォント サイズです。例:

h1 {
    font-size: 2.5em;
}

.container {
    width: 40rem;
}

上記のコードでは、h1 要素のフォント サイズは、それ自体の要素のフォント サイズの 2.5 倍であり、.container# の幅です。 ##要素はルート要素のフォントサイズの40倍です。

ビューポートの単位

ビューポートの単位は、ビューポートのサイズに対する長さの単位であり、レスポンシブ デザインでよく使用されます。一般的なビューポート単位は次のとおりです:

vw/vh: ビューポートの幅と高さの 1% に対する相対値;
• vmin/vmax: ビューポートの幅と高さの大きい方に対する相対値 1小さい値または大きい値の %。

例:

.container {
    width: 80vw;
    height: 50vmin;
}

上記のコードでは、

.container 要素の幅はビューポートの幅の 80%、高さはビューポートの幅の 80% です。ビューポートの幅と高さの大きい値、最小値の 50%。

4. CSS プロパティ

CSS プロパティは、要素のスタイルを設定するために使用されるさまざまなプロパティです。共通プロパティには次のようなものがあります。

color

color プロパティは、テキストの色を設定するために使用されます。

h1 {
    color: red;
}

上記のコードは、すべての

<h1> 要素のテキストの色を赤に設定します。

background-color

background-color プロパティは、要素の背景色を設定するために使用されます。

.container {
    background-color: #f8f8f8;
}

上記のコードは、

.container 要素の背景色を明るい灰色に設定します。

border

border プロパティは、要素の境界線を設定するために使用されます。

.container {
    border: 2px solid black;
}

上記のコードは、

.container 要素の境界線の幅を 2 ​​ピクセル、色を黒、境界線のスタイルを実線に設定します。

font-size

font-size プロパティは、フォント サイズの設定に使用されます。

p {
    font-size: 16px;
}

上記のコードは、すべての

要素のフォント サイズを 16 ピクセルに設定します。

text-align

text-align プロパティは、テキストの配置を設定するために使用されます。

h1 {
    text-align: center;
}

上述代码将所有的<h1>元素的文本居中对齐。

五、CSS框架

CSS框架是指提供一组预定义的CSS样式和JavaScript交互，可以快速搭建网页的开发工具。常见的CSS框架有Bootstrap、Foundation、Materialize等。它们提供了大量的预设样式和交互组件，可以极大地加速开发的进度和提升用户体验。

以上就是CSS的一些基本内容和重要性，虽然CSS的最后一个很重要，但我们也要关注其它内容，以了解并掌握CSS的全部知识，从而开发出更为优秀的网页。

以上が最後のスタイルを除いた CSS について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。