CSS文字属性

長さ単位:・px:画素で、デバイス(ディスプレイ)の長さ単位に相当します.相対単位・em:文字長の数倍、デフォルト1 em=16 px.相対位置決め・{in(インチ),cm(センチメートル),mm(ミリメートル),pt(点数),pc(印刷単位)}ぜったいいち
rgb制御色:・パーセンテージ:color:rgb(100%,100%,100%);0-255:color:rgb(0-255,0-255,0-255); ·16進法:color:#00 ff 00;
rgba制御透明度・パーセンテージ:color:rgba(100%,100%,100%,0-1);0-255:color:rgb(0-255,0-255,0-255,0-1);
フォント
・フォントfont-familyの設定:フォント;複数のフォントをカンマで区切る

p{
   font-family: Arial, "Times New Roman";
}

・フォントサイズfont-size:px;(emデフォルトフォントの数倍);

p{
    font-size: 12px;
}

・文字傾斜font-style:normal正常/oblique偏斜体/italic斜体

p{
    font-style: italic；
}

・フォントの太さfont-weight:normal正常/boldは正常フォントより太い/bolderはblodフォントより太い/lighterは正常フォントより細い;100〜900は9つの階層があり、数字が大きいほど太い.

p{
    font-weight:  bold；
}

・文字色color:red;

p{
   color:red;
}

・背景色background:red;

p{
   background:red;
}

・単語間隔word-spacing:-1 px;

p{
   word-spacing:-1px; 
}

・アルファベット間隔letter-spacing:10 px;

p{
   letter-spacing:10px; 
}

・段落の最初の行のインデントtext-indent:数値px/2 em(2文字の間隔)

p{
  text-indent: 2em;
}

・文字装飾text-decoration:none;正常表示/underline;オフライン/line-through;線/overlineを削除します.てんじょうせん

p{
   text-decoration:underline;
}

・英字大文字小文字変換text-transform:capitalize;頭文字大文字/uppercase;すべて大文字/lowercase;すべて小文字

p{
    text-transform: capitalize;
}

・vertical-align:topトップ/bottomボトム/middle中央揃え;現在のブラウザでは、テーブルのセル内のオブジェクトに対して垂直方向の位置合わせしかできませんが、divなどの一般的なブロックレベル要素では機能しません.

td{
   vertical-align:top;
}

・文字を垂直に中央に位置合わせするline-height:heightは同じ;

p{
    height:30px;
    line-height:30px;
}

・文字の水平揃えtext-align:left左揃え、デフォルト/right右揃え/center中央揃え/justify両端揃え

p{
    text-align:center;
}

CSS背景とリスト属性

・背景画像background-image:url(経路);背景画像がある要素は必ず幅と高さを設定します.

div{
   background-image:url(img/1.jpg);
}

・バックグラウンド繰り返しbackground-repeat:repeatタイルがいっぱい、デフォルト//repeat-x水平方向タイル/repeat-y垂直方向タイル/no-repeatタイル

div{
   background-repeat: no-repeat；
}

・背景画像位置background-position:水平方向垂直方向;水平方向:left center right;垂直方向:top center bottom;数字を使うことができます.

div{
  // background-position: right top;
  background-position: right 20px;
}

・背景画像複合属性background:経路舗装方式位置情報;

div{
   background：url(img/1.jpg)  no-repeat  left 200px; 
}

・背景画像位置固定background-attachment:scrollスクロール/fixed固定不変;

div{
  background-attachment: scroll;
}

・ulリストスタイルlist-style-type:noneスタイル/discソリッド円/circle中空円square正方形なし;

ul{
   list-style-type:none;
}

・olリストスタイルlist-style-type:decimal 1,2,3.../upper-alphaA,B,C.../lower-alpha a,b,c.../upper-roman I,II,III,IV.../lower-roman i,ii,iii,iv,v.../none非表示

ol{
   list-style-type:none;
}

・リスト項目タグの位置list-style-position:inside/outside;Insideリストのアイテムタグはテキスト内に配置され、周囲のテキストはタグに従って整列します.outsideデフォルト.テキストの左側にタグを保持します.リスト項目タグはテキストの外に配置され、折り返しテキストはタグに基づいて整列しません.

ul{
   list-style-position: inside;
}

・リスト項目タグの画像list-style-image:url(経路)/noneなし;

ul{
  list-style-image:url(img/1.jpg)
}

・ボーダーborder-width:(太い線)border-color:(色)border-style:solid実線/dashed破線/dotted点線(線型)border-left、(左ボーダー)border-right、(右ボーダー)border-top、(上ボーダー)border-bottom、(下ボーダー)border-right-color(右ボーダー色)

div{
 // border: 1px solid  red;
 border-right-color:1px solid  red;
}

・アスペクトwidth:パーセント/ピクセル(px)height:パーセント/ピクセル(px)の設定

div{
  width:100px;
  height:100px;
  border: 1px solid  red;
}

・画像と文字の整列方式text-align:left/right/center画像の水平整列は、通常、画像のtext-align属性を直接設定するのではなく、その親要素のこの属性値を設定することによって実現される.
縦揃えvertical-align:top/bottom/middleデフォルトでは、行内の画像は最下端で、同行する文字のベースラインと揃えられます.画像の上下はデフォルトでベースラインに位置合わせされません

div{
  text-align: right;
}
img{
  vertical-align: middle;
}