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 マスタースレーブレプリケーションの原理と注意点

前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル (Win10 Home バージョン 64)

超初心者の私は、MySQL を学び始めたばかりで、インストール プロセス中に多くの問題に遭遇しました...

Tomcat を設定して IntelliJ IDEA 2018 で最初の Java Web プロジェクトを実行する方法

1 Tomcatをダウンロードして起動する公式サイト http://tomcat.apache.or...

jQueryとCSSを組み合わせてトップに戻る機能を実現

CSS操作 CS $("").css(名前|プロ|[,値|関数]) 位置$(&q...

MySQLログに関する知識のまとめ

目次SQL実行順序ビンログ何ですかいつ生産されるのか何の役に立つんだディスクはいつドロップされますか...

WeChatアプレットAmapマルチポイントルート計画プロセス例の詳細な説明

電話Amap API を呼び出す方法は? Amap が https://lbs.amap.com/a...

基本構造、ドキュメント タイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...

JS でカルーセル効果を実現する 3 つの簡単な方法

この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...

Vueはシンプルなデータ双方向バインディングを実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。初心者...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

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

MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...

7つのMySQL JOINタイプのまとめ

始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...

JavaScript での AOP プログラミングの基本実装

AOP の紹介AOP (アスペクト指向プログラミング) の主な機能は、コアビジネスロジックモジュール...

MySQLでデータをエクスポートするいくつかの方法の詳細な説明

MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...

Linux で docker-compose を使用したソフトウェア構成の詳細な説明

序文この記事では、docker-compose の構成をいくつか紹介します。これらを参考にして、独自...