HTML詳細シリアル化(5)

コラムリンクlink

次のコラムで紹介します

このコラムはフロントエンドを独学で学ぶ旅であり、コードは純粋に手作業で作成され、ダークホースコースに従って学習し、私自身の理解をいくつか加え、コードとメモに適切な変更を加えました
皆さんのお役に立てれば幸いです。同時に、私を監督し、私が書いたコードに提案を与え、お互いに学び合ってください。

始める

ここに画像の説明を挿入

行の高さ: 複数行のテキストの間隔を設定します。

属性名

行の高さ

属性値

数値 + ピクセル
数 (現在のラベルの font-size 属性値の倍数)

列高さの測定方法

1 行のテキストの上(下)から次のテキスト行の上(下)までを測定します。

行の高さ - 垂直方向の中央

スキル

行の高さのプロパティ値はボックスの高さのプロパティ値と同じです

フォントファミリー

属性名

フォントファミリー

属性値

フォント名

font-family:楷体;

拡大する


font-family 属性値には複数のフォント名を記述することができ、各フォントはカンマで区切られ、実行順序は左から右に font-family 属性を検索し、最後にフォント ファミリー名を設定することを使用することをお勧めします。 Web開発用のサンセリフフォント

フォント複合プロパティ

使用するシーン

Web ページのテキストの共通スタイルを設定する

複合属性

属性の省略形。1 つの属性が複数の値に対応し、各属性値はスペースで区切られます

div {
 font:italic 700 30px/2 楷体;
}

知らせ

フォント サイズとフォント値を記述する必要があります。そうしないと、フォント属性は有効になりません。

テキストのインデント

属性名

テキストインデックス

属性値

数値+px
数値+em (1em=現在のラベルのフォント サイズ)

テキストの配置

役割: コンテンツの水平方向の配置を制御します。

属性名: text-aline

属性値

左右揃え(デフォルト)
中央揃え
左右揃え

水平方向の配置 - 画像

text-alin の本質はコンテンツの配置を制御することであり、属性はコンテンツの親に設定する必要があります。

文字飾り線

属性名

テキスト装飾

属性値

属性 属性値
なし なし
下線 下線
ラインスルー 取り消し線
上線 下線

色の文字の色

属性名

属性値

色の表現

色のキーワード - 色の英単語

rgb表記 - rgb (r, g, b) - rgb三原色値 0~255
rgba表記 - rgba (r, g, b, a) aは透明度値0~1を意味します

16 進表記 - #RRGGBB
ヒント

属性値が color である限り、上記の 4 つの色の表現方法 (例: 背景色) を使用できます。

デバッグツール - Google Chrome

効果

コードをチェックしてデバッグし、プログラマーがコードの問題を見つけて問題を解決できるようにします。

デバッガーを開く

F12
ここに画像の説明を挿入

デバッグツールの詳細

1. 属性が間違っている場合は、黄色の感嘆符が表示されます。
2. CSS 属性の前に複数のチェック ボックスがあり、チェックすると、その属性が有効になります。

複合セレクター

意味

さまざまな方法で組み合わせた 2 つ以上の基本セレクターで構成されます

効果

ターゲット要素(ラベル)のより正確かつ効率的な選択

子孫セレクター

要素の子孫を選択する

言葉遣い

親セレクター、子セレクター {CSS プロパティ}、親セレクターと子セレクターはスペースで区切られます。

子セレクター

要素の子要素(最も近い子)を選択します

セレクターの文言

親セレクター > 子セレクター {CSS プロパティ}、親セレクターと子セレクターを > で区切ります。

ユニオンセレクター

複数のラベルのセットを選択して同じスタイルを設定します

言葉遣い

セレクター 1、セレクター 2、... セレクター N {CSS 属性}、セレクター間で使用、分離

交差点セレクター

複数の条件を同時に満たす要素を選択する

言葉遣い

セレクター 1 セレクター 2 {CSS 属性}、セレクターは記号なしで接続されます

知らせ

交差セレクターにラベル セレクターがある場合は、ラベル セレクターを先頭に記述する必要があります

ここに画像の説明を挿入

疑似クラスセレクター

疑似クラスは要素の状態を表し、選択された要素の特定の状態がスタイルを設定します。

マウスオーバー状態

セレクタ

hover{CSS属性}

強調する

どのラベルでもマウスホバー状態を設定できます

疑似クラスハイパーリンク

:link	访问前
:visited访问后
:hover	鼠标悬停
:action 点击时(激活)
知らせ

ハイパーリンクに上記の 4 つの状態を設定したい場合は、LVHA の順序で記述する必要があります。

おすすめ

転載: blog.csdn.net/weixin_74888502/article/details/132259149