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

推薦する

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

NGINXがウェブサイトのPV、UV、独立IPをカウントする方法の詳細な説明

Nginx: PV、UV、独立IPウェブサイトを作成する人なら誰でも、ウェブサイトのPV、UV、その...

Vueユーザーが長時間操作せずにログインページからログアウトするように実装する2つの方法

目次問題の説明フロントエンド制御(方法1)アイデアコードバックエンド制御(方法2)アイデアコード要約...

ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...

IOSデータベースアップグレードデータ移行の詳細な例

IOSデータベースアップグレードデータ移行の詳細な例まとめ:昔、データベースのバージョン アップグレ...

英語の単語の出現頻度を数えるtrコマンドの魔法

置換を削除したり文字列を削除したりできる tr コマンドは、誰もがよく知っています。 英語では、英語...

jQueryで大画面スクロール再生効果を実現

この記事では、大画面スクロール効果を実現するためのjQueryの具体的なコードを参考までに紹介します...

MySQL で重複レコードをクエリして削除する方法の完全なガイド

序文この記事では主に、MySQL で重複レコードをクエリして削除する方法を紹介します。参考と学習のた...

Linux で Golang をインストールする方法

Go は、シンプルで信頼性が高く、効率的なソフトウェアを簡単に構築できるオープンソース プログラミン...

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

MySQL で遅いファジークエリを最適化する方法

目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...

Vueにおけるキーの役割と原理の詳細な説明

目次1. 結論から始めましょう2. キーの役割2.1 例2.2 上記の例を修正する2.3 例を再度修...

MySQL のスロークエリの方法と例

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

MySQLとSpringの自動コミットの詳細な説明

1 MySQLの自動コミット設定MySQL はデフォルトで自動的にコミットします。つまり、各 DML...