HTML の基礎必読 - CSS スタイルシートの包括的な理解

CSS (カスケーディング スタイル シート) は、HTML Web ページを美しくするために使用されます。

/*コメントエリア*/これはコメント構文です

1. スタイルシート

1. スタイルシートの分類

1.インラインスタイルシート

HTML と共同で表示され、制御は正確ですが、再利用性が低く、冗長性が多くなります。

例: <p style="font-size:14px;">インライン スタイル シート</p>

2.埋め込みスタイルシート

ウェブページに埋め込まれた独立した領域なので、headタグ内に記述する必要があります。

<スタイル タイプ="text/css">

p //このフォーマットはpタグで機能します

{

スタイル;

}

</スタイル>

3.外部スタイルシート

スタイルシートを保存するための新しい CSS ファイルを作成します。 HTML ファイルでスタイルシートを呼び出す場合は、HTML ファイル内で右クリック → CSS スタイルシート → スタイルシートの添付 を選択する必要があります。一般的にはリンク接続方式が用いられます。

注: CSSファイルにスタイルタグを書く必要はありません。

一部のタグにはデフォルトのマージンがあり、通常はスタイルシート コードを記述するときに削除されます (他のスタイルも設定できます)。次に例を示します。

注: 上の図では、最初に余白と間隔が削除されています。

(ii) セレクタ

1.タグセレクター。タグ名をセレクターとして使用します。

2.クラスセレクター。それらはすべて「.」で始まります。

注: クラス セレクターをタグ セレクターと重ね合わせると、さまざまな効果を表示できます。

3.IDセレクター。 「#」で始まります。

注: ID セレクターをタグ セレクターと重ねて、さまざまな効果を表示できます。

<div id="スタイル名">

4.複合セレクタ

（１）２つの項目を区切って並列順序を示すには、「,」を使用します。

（２）スペースで区切られ、子孫を示す。

（３）フィルター「。」

2. スタイル属性

1. 背景と展望

1.背景:

2.前景フォント:

2. 境界と国境

境界線（表の境界線、スタイルなど）、余白（表の間隔）。パディング（コンテンツとセルの間隔）。

3. リストとブロック

width 、 height 、 ( top 、 bottom 、 left 、 right ) は絶対座標の場合にのみ役立ちます。

CSS スタイルシート コードは次のようになります。

CSS ファイルコード:

HTML ファイルコード:

実行効果は次のようになります:

上記記事「HTML 基礎必読 - CSS スタイルシートの総合理解」は、編集者が皆さんにシェアする内容の全てです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658628.html