CSS文字屬性

長度單位：
· px：像素，相當于設備（顯示器）的長度單位。相對單位
· em：文字長度的幾倍，默認1em=16px。相對定位
· { in(英寸)，cm(厘米)，mm(毫米)，pt(點數)，pc(印刷單位)}。絕對定位

rgb控制顏色：
· 百分比：color:rgb(100%,100%,100%);
· 0-255：color:rgb(0-255,0-255,0-255);
·16進制：color:#00ff00;

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:-1px;

p{
   word-spacing:-1px; 
}

·字母間距 letter-spacing:10px;

p{
   letter-spacing:10px; 
}

·段落首行縮進 text-indent: 數值px/2em（兩個字的間距）

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:decimal1,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;
}