スクラッチから作るHTML/CSS - 共通属性 (3)

1. CSS テキスト属性

(1) 文字サイズ {font-size:value;}

単位: pt:9pt=12px; ブラウザのデフォルトのフォントサイズは 16px です
em: 1em=16px
large:19px
x-large:23px
xx​​-large:27px


(2)文字の色

{カラー: rbg250,250,250/#000000/レッド;}

(3)テキストフォント{font-family:"フォント 1","フォント 2","フォント 3";}

ブラウザはフォントに従って解釈します

注: フォント名が中国語の場合は、二重引用符を追加します。「Microsoft Yahei」を追加する必要はありません。英語にスペースがある場合は、Arial を追加します。引用: 「タイムズ ニュー ローメン」;

(4) 太字のフォント {font-weight:;}

属性値: 通常/500 (標準)、太字 (太字);

(5)文字の傾き

{font-style:itatic(イタリック)/oblique(傾いたテキスト)/normal(イタリックをキャンセル)}

(6) 水平方向の配置

{text-align:left/center/right/justify(両端揃え);}

(7)垂直方向の配置

{vertical-align:top/bottom/middle;}

(8) テキスト行の高さ

{line-height:normal/value;}

行の高さを測定します: このテキスト行の先頭から次のテキスト行の先頭まで 単一行のテキスト: 行の高さ = コンテナーの高さの場合、垂直方向の中央に配置されます。 ; 行の高さ

説明: フォントの省略順序: font-style font-weight font-size/line-height font-family;

(9) テキストの修正


{text-decoration:none/underline(下線)/overline(下線)/line-through(取り消し線を追加)}

拡張子: 取り消し線を追加

(10) 1行目のインデント

{text-indent:value;}
値は単語の数です。単位は em;
text-indent は負の値であり、前に進みます

テキストの最初の行でのみ機能します

(11) 単語の間隔

{letter-spacing:value;}
英語の文字と中国語の文字の間の距離を制御します

拡張子: {word-break: Break-all;}=
改行

2. ボーダー

{ボーダー上/下/右/左:1px 実線/点線/破線/二重;}

3. CSS リストのプロパティ

(1) リストシンボルのスタイル

{list-style-type:disc(黒丸)/circle(白丸)/squrare(中空四角幅)/none(リスト記号を削除);} {list-style-type:none} は {list と同等です。 - スタイル;なし;}

(2) リストシンボルとしての写真

{リストスタイル画像:url();}

(3) リストシンボルの位置を定義します

{リストスタイルの位置:外側/内側;}

(4)リスト記号を削除

{リストスタイル:なし;}

4. 背景属性

(1) 背景色 {background-color: value;}

(2) 背景画像 {background-image: url (path);}

(3) 背景画像タイル {background-repeat: no-repeat (not tile ) /repeat (タイル)/repeat-x (水平タイル)/repeat-y (垂直タイル);}

(4) 背景画像固定 {background-attachment:scroll (スクロール)/fixed (固定);}

(5)背景画像の位置 {background-position: x y (value: 50px 50px; 方向: 右下;)} 方向の位置は: 水平 (左/中央/右) 垂直 (上/中央/下) です (6) 略語: {background:url() リピートなし中央上部固定 #f00;}

{background:url() リピートなし中央上部 100px #f00 スクロール;}

5. Web ページで一般的に使用される画像形式


(1) jpg: 非可逆圧縮による品質の損失は、豊かな色の画像に適しています
(2) gif: 非可逆圧縮による色の損失は透明度をサポートし、アニメーションは色の少ない画像に適しています
(3) png: 色の損失のある画像色が少なく、アニメーションはサポートされておらず、透明度はサポートされていません。これは花火です。

注: PNG の大量のストレージが必要であり、GIF の保存には高い要件が必要です。互換性がある場合は GIF を使用してください。

6. フローティング（垂直要素を水平に配置）

{float:left/right/none}
(1) float をクリアします {clear:left/right/both;}
説明: フローティング後の要素はドキュメント フローの外にあり、要素をフロートインすると上に保留されます。フロント 要素が標準フロー内の要素の場合（フローティングなし）
フローティング後の要素の位置はブラウザに依存し、フローティング要素の背後にある非フローティング要素はフローティング要素の元の位置に押し込まれます。
(2) 高さの崩壊を解決します
高さの崩壊: 結果として生じる条件は、親要素に高さがなく、子要素が浮動していることです。
解決策: (1) 空の

を追加します。フローティング要素の最後に、ステートメント div{clear:both;} を書きます
) (2) CSSの親要素にdiv{overflow:hidden;}という文を追加します

セブン、ボックスモデル

1. 定義: Web ページ要素の表示方法とそれらの要素間の関係。
枠線 枠線フィラー コンテンツエリア

2. パディング
(1) パディング: パディングは、ページ上の要素のコンテンツと要素の端 (境界線) との間の距離を設定するために使用され、パディングは、要素の境界を調整するために使用されます。コンテナ内の内容
(3)の位置関係を利用して、親要素内での子要素の位置を調整します
(4)親要素にpadding属性を追加します
padding値を付けるかどうかの問題について減ったのか減っていないのか？
1. 減算: 親要素には幅と高さがあります。
2. 縮小なし: 親要素には幅と高さがありません。
(5) 縮小する方法は?
高さ - (上+下); 幅 - (左+右);
4つの値: {padding: 右上下左;}
1つの値: {padding: 20px}={padding:20px 20px 20px 20px;}
2 つの値: {padding: 20px 30px;}={padding: 20px 30px 20px 30px;}
2 つの値: {padding: 20px 30px 40px;}={padding: 20px 30px 40px 30px;}
分割: {パディング-上/右/下/左:値;}

2. Margin

(1) Margin: margin は設定ページの要素の外側の空白領域です

(2) margin 属性は子要素に追加されます
(3) 構文:
4 つの値: {margin: top右下左;}
1 つの値: {margin: 20px}={padding:20px 20px 20px 20px;}
2 つの値: {margin: 20px 30px;}={padding: 20px 30px 20px 30px;}
2 つの値: {マージン: 20px 30px 40px;}={パディング: 20px 30px 40px 30px;}
分割: {margin-top/right/bottom/left:value;}