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() 関数

推薦する

MySQL の連結で複数の一重引用符と三重引用符を使用する際の問題

文字列を動的に連結する場合、文字連結を使用することが多いです。次のような連結の引用符の意味がわかりま...

MacOS に MySQL 8.0 をインストールして MySQL にログインする方法

公式チュートリアルに従って、インストール パッケージをダウンロードし、[インストール] をクリックし...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

Vue スクロールダウンしてさらにデータを読み込む スクロールケースの詳細な説明

vue-無限スクロールインストール npm インストール vue-infinite-scroll -...

JSX を使用してマークアップ コンポーネント スタイルの開発を作成する例 (フロントエンドのコンポーネント化)

目次JSX環境の構築NPMを初期化するwebpackをインストールするBabelをインストールするw...

Nginx で https をアップグレードする方法

購入証明書Alibaba CloudのCloud Shield証明書サービスから購入できます。証明書...

EChartsマルチチャート連携機能の実装プロセス

表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャー...

JavaScriptはランダムコードの生成と検証を実現する

JavaScriptでのランダムコードの生成と検証は参考までに。具体的な内容は以下のとおりです。イベ...

MySQL の replace と replace into の詳細な例 into_Mysql

MySQL の replace と replace into はどちらも頻繁に使用される関数です。...

MySQL フラッシュバック ツール binlog2sql の詳細なインストールと設定のチュートリアル

概要binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...

Nginx アクセス ログとエラー ログ パラメータの説明

例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

MySQL 5.7.21 winx64 無料インストールバージョン設定方法グラフィックチュートリアル

MySQL 5.7.21 winx64無料インストールバージョンの設定方法、参考までに、具体的な内容...

図を使ってWeb2.0とは何かを説明する

最近はWeb2.0という言葉をよく耳にしますが、Web2.0とは何でしょうか? Web 1.0 とど...

MySQL での挿入効率のいくつかの例の比較

序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...