HTML/CSS從零開始-常用屬性

一、css文字屬性

 （1）文字大小{font-size:value;}

    單位：pt:9pt=12px;瀏覽器預設字體大小為16px
中
    xx-small:9px
     x-small:11px
       small:13px
      x-large:23px
    xx-large:27px

(2)字體顏色

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

(3)文字字體{font-family:"字體1","字體2","字體三";}

  瀏覽器按字體解讀

  注意：字體名為

  瀏覽器按字體解讀
  注意：字體名為

  瀏覽器按字體解讀

  注意：字體名為

  瀏覽器以字體解讀

  注意：字體名為中文時加雙引號:「微軟雅黑」；單字單字可不加:Arial;英文有空格加引號：「Times New Romen」;

(4）字體加粗{font-weight:;}

  屬性值：normal/500(常規);bold/600-900(加粗)；bolder(更粗)；

(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簡寫順序： font-style font-weight font-size/line-height font-family;       16px "微軟雅黑";}

(9)文字修飾

{text-decoration:none/underline（底線）/overline（底線）/line-through(新增刪除線)}

擴充刪除：
新增刪除線

🎜🎜(10)首行縮排🎜🎜{text-indent:value;}🎜    value是字的個數單位為：em;🎜   起作用🎜

（11）字間距

{letter-spacing:value;}
控制英文字母與漢字之間的距離

延伸：{word-break：break-all;}=
換行

二、邊框框{border-top/bottom/right/left:1px solid/dotted/dashed/double;}

三、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;}

四、背景屬性

（1）背景顏色{background-color:value;}

（2）背景圖片{background-image:url(路徑);}

（3）背景圖平鋪{background-repeat:no-repeat(不平鋪)/repeat(平鋪)/repeat-x(水平鋪)/repeat-y(垂直平鋪);}
（4）背景圖固定{background-attachment :scroll(滾動)/fixed(固定);}
（5）背景圖位置{background-position:x y(數值：50px 50px;方向：right bottom;)}
     方向位置有：水平（left/center/right ）垂直(top/center/bottom)
（6）簡寫：{background:url() no-repeat center top fixed  #f00;}
           {background:url() no-eateatdenter 100ppeatx #falsroll;五、網頁常用的圖片格式

（1）jpg:有損壓縮損失品質適用色彩豐富的圖片

（2）gif:有損壓縮損失色彩支援透明、動畫適用顏色較少的圖片

（3）png :損失圖片色彩較少，不支援動畫，支援透明，是fireworks;

說明：要求高存png,要求更高存gif,相容時使用gif;

六、浮動（讓豎立的元素橫著排）

  {float:left/right/none}

（1）清除浮動{clear:left/right/both;}

說明：浮動之後的元素是脫離文檔流是懸浮在上面的，當你浮動元素的前面那個元素是標準流中的元素時（沒有浮動）

浮動之後的元素的位置是靠瀏覽器的，浮動元素後面的沒有浮動的元素會擠進浮動元素原來的位置。

（2）解決高度塌陷
高度塌陷：產生的條件父級元素沒有寫高度，子元素浮動；
解決方法：(1)在浮動元素的最後加一個空的

,給這個div寫上聲明div{clear:both;}
          (2)在css中加上父級元素聲明，div{overflow:hidden;}

七、盒模型

1、定義：網頁元素如何顯示以及相互關係。
 邊框邊界  補白內容區

2、padding(補白)
(1)填滿：padding在設定頁中的一個元素中一個元素內容到元素的邊緣（邊框）之間的距離，補白；
(2 )用來調整內容在容器中的位置關係
(3)用來調整子元素在父級元素中的位置
(4)padding屬性加在父級元素上面
關於padding值減不減問題？
1、減：父級元素有寬高
2、不減：父級元素沒有寬高;
(5)如何減？
高-（top+bottom）；寬-（left+right）；       
3、語法：
四個值：{padding：top right bottom left；}
一個值：{padding：20px}={padding:20px}={padding:20px}={padding 20px 20px 20px;}
二個值：{padding：20px 30px；}={padding：20px 30px 20px 30px;}
二個值：{padding：20px 30px 40px;
拆分：{padding-top/right/bottom/left:value；}

2、margin
(1)邊際：margin在設定頁中元素外邊的空白區；
(2)margin屬性加在子級元素上面      
(3)語法：
四個值：{margin：top right bottom left；}
一個值：{margin：20px}={padding:20px 20px 20px 20px}={padding:20px 20px 20px 20px; 20px 30px;}={padding：20px 30px 20px 30px;}
二個值：{margin：20px 30px 40px;}={padding：20px 30px 40px 30px;}={padup/topdpx 30px 40px 30pbotx; left:value；}