ホームページ  >  記事  >  ウェブフロントエンド  >  CSS 宣言ステートメントは常に何で終わりますか?

CSS 宣言ステートメントは常に何で終わりますか?

青灯夜游
青灯夜游オリジナル
2021-07-07 15:09:583080ブラウズ

CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。セレクターは、スタイルを変更する必要がある HTML 要素です。各宣言は属性と値で構成されます。CSS 宣言ステートメントは常にセミコロン「;」で終わり、宣言グループは中括弧「{...」で囲まれます。 }"。

CSS 宣言ステートメントは常に何で終わりますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS ルールは、セレクターと 1 つ以上の宣言という 2 つの主要な部分で構成されます。

  • セレクターは、スタイルを変更する必要がある HTML 要素です。

  • 各宣言は属性と値で構成されます。属性はセット スタイル属性です。各属性には値があります。属性と値はコロンで区切られます。

CSS 宣言は常にセミコロン ; で終わり、宣言のグループは中かっこ {…} で囲まれます。 CSS を読みやすくするには、1 行に 1 つのプロパティのみを記述します。

例:

 p
 /*选择器*/
 {
     color:red;/*属性+值*/
     text-indent:2em;
 }

CSS ID セレクターとクラス セレクター

id ​​セレクター

/* 注意:id选择器前有 # 号。 */
#sky{
  color: blue;
}
<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>

このルールは、次の要素を見つけることを示します。ページ上の空のIDを入力して青にすると、以下のようなページでは「青空」の文字が青になります。 ID セレクターは 1 つの要素にのみ適用されます。

クラスセレクター

/* 注意:class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}
<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

要素のクラス値は複数の値を持つことも、繰り返すこともできます。クラスセレクターは非常に一般的です。

css コメント

どの言語でもコメントが必要です。HTML では <!- コメント ステートメント -> を使用してコメントを作成し、CSS では ## を使用します。 #/* コメントステートメント*/ コメントします。

body {  /*页面基本属性*/
    font-size: 12px;
    color: #CCCCCC;
}
/*段落文本基础属性*/
p {
    background-color: #FF00FF;
}

コメントの機能:

CSS コメントは注釈に使用されます。CSS コードまたはレイアウト CSS スタイルに特別なコメントを作成するために、CSS 注釈をよく使用します。機能的に使用するための条件付きコメントもあります。

css アノテーション (css アノテーション) は、CSS コードの特定の部分の位置、機能、スタイルなどを説明するなど、作成する CSS ファイルを説明するのに役立ちます。便利であると同時に、チームが Web ページを開発しているときに、合理的で適切な注釈は、CSS スタイルが HTML に対応する場所をチームが理解するのに役立ちます。スムーズかつ迅速に開発できます。

(学習ビデオ共有:

css ビデオ チュートリアル)

以上がCSS 宣言ステートメントは常に何で終わりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。