ゼロからの HTML/CSS - 共通属性

1. CSSテキスト属性

(1) テキストサイズ{font-size:value;}

単位: pt:9pt=12px; ブラウザのデフォルトのフォントサイズは16pxです
em:1em=16px;
CSS2.0中
xx-small:9px
x-small:11px
small:13px
Medium:16px
large:19px
x-large:23px
)フォントカラー

{color: rbg250 ,250,250/#000000/red;}

(3)Text font{font-family:"Font 1","Font 2","Font 3";}

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

注: フォント名は中国語で二重引用符を追加します: "Microsoft Yahei "; 単一の英単語を追加する必要はありません: Arial; 英語にスペースがある場合は、引用符を追加します: "Times New Romen";

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

プロパティ値: 通常/500 (標準); 太字 (太字);

(5) テキストの傾き

{フォント スタイル: イタリック (斜体)/斜体 (斜体) )/標準 (傾きをキャンセル) )}

(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(取り消し線追加)}

拡張子:

追加と削除行の1行目

(10) はインデントされています

{text-indent:value;}

値は単語の数です。単位は em;

text-indent は負の値であり、元に戻ります。

の最初の行のみです。テキスト うまくいきます

(11) 単語の間隔

{letter-spacing:value;}
英字と漢字の間隔を制御

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

2. 境界線

{border-top/bottom/right/left:1px Solid/dotted/dashed/double;}

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

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

{list-style-type:disc (実線の円) ) /circle(中空円)/squrare(中空四角幅)/none(リスト記号を削除);}
{list-style-type:none} は {list-style;none;} と同等です

(2) 画像リストシンボルとして

{list-style-image:url();}

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

{list-style-position:ouside/inside;}

(4) リストを削除シンボル

{list -style:none;}

IV. 背景属性

(1) 背景色 {background-color:value;}
(2) 背景画像 {background-image:url(path);}
(3) 背景画像タイル {background-repeat: no-repeat (非タイル)/repeat (タイル)/repeat-x (水平タイル)/repeat-y (垂直タイル);}
(4) 背景画像固定 {背景-添付 ：scroll(スクロール)/fixed(固定);}
(5) 背景-位置:x y(値: 50px 50px; 方向: 右下;)}
方向位置: 水平 (左/中央/右)縦 (上/中央/下)
(6) 略語: {background:url() リピートなし中央上固定 #f00;}
5. Web ページで一般的に使用される画像形式

(1) jpg: 非可逆圧縮は失われます品質が高く、色の豊かな画像に適しています

(2) gif: 非可逆圧縮は色を失い、透明度をサポートします。アニメーションは、色の少ない画像に適しています

(3) png : 画像の損失は色が少なく、アニメーションをサポートしません。透明度をサポートし、花火です
注: png ストレージの要件が高く、gif ストレージの要件が高くなります。互換性がある場合は gif を使用してください

{float:left/right/none }

(1) float のクリア {clear:left/right/both;}

説明: フローティング後の要素がドキュメント フローから外れ、上に保留されている場合 要素を前にフローティングした場合、その要素が 内の要素である場合。標準フロー（フローティングなし）

フローティング後の要素の位置はブラウザに依存し、フローティング要素の後ろにある非フローティング要素はフローティング要素の元の位置に押し込まれます。

(2) 高さの崩壊を解決する
高さの崩壊: 結果として生じる条件は、親要素が高さを書き込まず、子要素がフローティングであることです。
解決策: (1) フローティング要素の最後に空の

を追加します。, div{clear:both;}というステートメントを書きます
(2) の親要素にステートメントを追加しますcss, div{overflow:hidden;}

7. ボックスモデル

1. 定義: Web ページ要素の表示方法と相互の関連付け方法。
境界線 フィラーコンテンツエリア

2. パディング (パディング)
(1) パディング: パディングは、設定されたページ上の要素のコンテンツと要素の端 (境界線) の間の距離です。 (2)はコンテナ内のコンテンツの位置関係を調整するために使用します
(3)は親要素内の子要素の位置を調整するために使用します
(4)親要素に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;}
分割: {padding-top/right/bottom/left:value;}

2. Margin

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

(2) margin 属性が子に追加されます。レベル要素の上
(3) 構文:
4 つの値: {margin: top rightbottom left;}
1 つの値: {margin: 20px}={padding:20px 20px 20px 20px;}
2 つの値: {margin: 20px 30px;}={パディング: 20px 30px 20px 30px;}
2 つの値: {margin: 20px 30px 40px;}={padding: 20px 30px 40px 30px;}
分割: {margin-top/right/bottom/ left:value ;}