CSSスタイルシートとフォーマットレイアウトの詳細な説明

CSSスタイルシートとフォーマットレイアウトの詳細な説明

スタイルシート

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

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

インラインスタイルシート: ヘッドタグ内に記述する必要があります

例: <style type="text/css">

p

{ スタイル;}

</style>ヘイ

外部スタイルシート: スタイルシートを配置するための新しい CSS ファイルを作成します。HTML を右クリック - CSS スタイル - スタイルシートを添付

例: <style type="text/css">

*

{ margin:0px; padding:0px;} //ウェブページの余白は0ピクセル、フォント間隔は0ピクセルです

.mian //クラスセレクター <div class="mian"></div>// クラススタイルシートを呼び出す

{

高さ:40px;

幅:100ピクセル;

テキスト配置:中央;

背景色:赤;

}

#mian//IDセレクター <div id="mian"></div> //コールIDセレクター

{

高さ:40px;

幅:100ピクセル;

テキスト配置:中央;

背景色:赤;

}

</スタイル>

複合セレクター: (1) P、span、同じスタイルの2つのタグを区切るために使用されます。

(2)ミアンPはスペースで区切られ子孫を示す

(3)mian.pは「.」で区切られ、mianタグ内のpタグを示す。

スタイル属性で、たとえば margin: 20px 0px 20px 0px は、境界線の幅が上側で 20 ピクセル、右側で 0 ピクセル、下側で 20 ピクセル、左側で 0 ピクセルであることを意味します。順序は時計回りで、上、右、下、左です。

フォーマットレイアウト

位置をロックします (ブラウザに対する相対的な位置。つまり、ブラウザがどのようにスクロールしても、ブラウザに対する相対的な位置は変わりません) position:fixed;

絶対配置と相対配置(1)外側のレイヤーに絶対(または相対)がない場合、divはブラウザに対して相対的に配置されます。

(2)外側のレイヤーが絶対(相対)の場合、divはposition:absolut;(絶対位置)position:rel;(相対位置)を使用して外側の境界線に対して相対的に配置されます。

レイヤー化: ページ上のラベルを常に一番上に表示したい場合は、次のように z 値を設定する必要があります: z-index:2; // z 値が 2 の場合、上のレイヤーに表示されます。変更しない場合は、デフォルト値は 1 で、すべて同じレイヤー上に表示されます。

一般的なハイパーリンクスタイル定義の順序は、L --v--h--aです。

a:link クリックされる前のハイパーリンクの状態

a:visited ハイパーリンクがクリックされた後の状態

a:hover マウスがハイパーリンク上に移動したとき

a:active ハイパーリンクをクリックしたとき

以上がエディターがお届けするCSSスタイルシートとフォーマットレイアウトの詳細な説明の内容です。123WORDPRESS.COMを応援していただければ幸いです~

オリジナルURL: http://www.cnblogs.com/ouyangtangfeng99/p/5377983.html

<<:  HTML でよく使用されるエスケープ文字の概要

>>:  MySQL プロセス制御 IF()、IFNULL()、NULLIF()、ISNULL() 関数

推薦する

three.js を使って立体的な矢印線を描く詳細な手順

需要: この需要は緊急に必要です!地下鉄のシーンでは、脱出経路を示す矢印を描かなければなりません。こ...

高品質なJavaScriptコードの書き方

目次1. 読みやすいコード1. 統一コード形式2. マジックナンバーを削除する3. 単一機能原則2....

vue 要素 el-transfer にドラッグ機能を追加

コア資産管理プロジェクトでは、el-transfer にドラッグ アンド ドロップによる並べ替えと、...

適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析

<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

主軸上のFlex子要素の比率を制御する方法

背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...

スパンの最小高さを定義するソリューションは効果がありません

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

個人履歴書を作成するための HTML の簡単な実装

履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...

将来的に人気のあるウェブサイトのナビゲーションの方向

<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...

CentOS 6 または CentOS 7 でディスク領域をクリアする方法

以下は、CentOS 6 または CentOS 7 サーバーのディスク領域をクリアするための簡単なコ...

CSS を使用して 3 つのステップでショッピング モールのカード クーポンを作成する

今日は618日、主要なショッピングモールはすべてプロモーション活動を行っています。今日は、次のように...

Linux で開いているポートへのリモート アクセスを許可する方法

1. ファイアウォール設定ファイルを変更する # vi /etc/sysconfig/iptable...

LinuxにKafkaをインストールする

目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...

js配列のfind、some、filter、reduceの違いの詳細な説明

Array の filter、find、some、reduce メソッドの違いを区別し、使用シナリオ...