最後のスタイルを除いた CSS について話しましょう-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-24 09:26:01

オリジナル

1201 人が閲覧しました

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

1. CSS セレクター

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

タグセレクター

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

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

ログイン後にコピー

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

クラスセレクター

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

.text-red {
    color: red;
}

ログイン後にコピー

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

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

ログイン後にコピー

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

ID セレクター

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

属性セレクター

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

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

ログイン後にコピー

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

子孫セレクター

子孫セレクターは、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

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

.container {
    width: 80%;
}

ログイン後にコピー

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

em と rem

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

h1 {
    font-size: 2.5em;
}

.container {
    width: 40rem;
}

ログイン後にコピー

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

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

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

例:

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

ログイン後にコピー

上記のコードでは、

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

4. CSS プロパティ

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

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

h1 {
    color: red;
}

ログイン後にコピー

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

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

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

.container {
    background-color: #f8f8f8;
}

ログイン後にコピー

上記のコードは、

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

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

.container {
    border: 2px solid black;
}

ログイン後にコピー

上記のコードは、

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

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

p {
    font-size: 16px;
}

ログイン後にコピー

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

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

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

h1 {
    text-align: center;
}

ログイン後にコピー

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

五、CSS框架

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

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

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