国产色在线视频-国产色综合一区二区三区-国产身材极品喷水 在线播放-国产深夜福利视频观看-国产深夜福利视频在线-国产深夜福利视频在线播放

HTML/CSS從零開(kāi)始-常用屬性

2016/10/17 8:43:37   閱讀:1593    發(fā)布者:1593

 

一、css文本屬性

 (1)文本大小{font-size:value;}

    單位:pt:9pt=12px;瀏覽器默認(rèn)字體大小為16px
          em:1em=16px;
    在CSS2.0中
    xx-small:9px
     x-small:11px
       small:13px
       medium:16px
       large:19px
     x-large:23px
    xx-large:27px

(2)字體顏色

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

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

  瀏覽器按字體解讀
  注意:字體名為中文時(shí)加雙引號(hào):“微軟雅黑”;單個(gè)英文單詞可不加:Arial;
英文有空格加引號(hào):“Times New Romen”;

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

  屬性值:normal/500(常規(guī));bold/600-900(加粗);bolder(更粗);

(5)文字傾斜

{font-style:itatic(斜體字)/oblique(傾斜的文字)/normal(取消傾斜)}

(6)水平對(duì)齊方式

{text-align:left/center/right/justify(兩端對(duì)齊);}

(7)垂直對(duì)齊方式

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

(8)文本行高

{line-height:normal/value;}

測(cè)量行高:本行文字的頂部到下一行文字的頂部;
單行文本:行高=容器高時(shí),垂直居中;行高<容器高時(shí)垂直偏上;

說(shuō)明:font簡(jiǎn)寫(xiě)順序: font-style font-weight font-size/line-height font-family;
                  {normal 600 16px "微軟雅黑";}

(9)文本修飾

{text-decoration:none/underline(下劃線(xiàn))/overline(下劃線(xiàn))/line-through(添加刪除線(xiàn))}

擴(kuò)展:<del>添加刪除線(xiàn)</del>

(10)首行縮進(jìn)

{text-indent:value;}
    value是字的個(gè)數(shù)單位為:em;
    text-indent為負(fù)值,往前退
    只對(duì)文本首行起作用

(11)字間距

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

擴(kuò)展:{word-break:break-all;}=<br/>換行

二、邊框

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

三、CSS列表屬性

(1)列表符號(hào)樣式

{list-style-type:disc(實(shí)心圓)/circle(空心圓)/squrare(空心方寬)/none(去掉列表符號(hào));}
     {list-style-type:none}同等于{list-style;none;}

(2)圖片作為列表符號(hào)

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

(3)定義列表符號(hào)位置

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

(4)去掉列表符號(hào)

{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(滾動(dòng))/fixed(固定);}
(5)背景圖位置{background-position:x y(數(shù)值:50px 50px;方向:right bottom;)}
     方向位置有:水平(left/center/right)垂直(top/center/bottom)
(6)簡(jiǎn)寫(xiě):{background:url() no-repeat center top fixed  #f00;}
           {background:url() no-repeat center 100px #f00 scroll;}

五、網(wǎng)頁(yè)常用的圖片格式

(1)jpg:有損壓縮 損失質(zhì)量 適用顏色豐富的圖像
(2)gif:有損壓縮 損失色彩 支持透明、動(dòng)畫(huà) 適用顏色較少的圖像
(3)png:損失圖片色彩較少,不支持動(dòng)畫(huà),支持透明,是fireworks;
說(shuō)明:要求高存png,要求更高存gif,兼容時(shí)使用gif;

六、浮動(dòng)(讓豎立的元素橫著排)

  {float:left/right/none}
(1)清除浮動(dòng){clear:left/right/both;}
說(shuō)明:浮動(dòng)之后的元素是脫離文檔流是懸浮在上面的,當(dāng)你浮動(dòng)元素的
前面那個(gè)元素是標(biāo)準(zhǔn)流中的元素時(shí)(沒(méi)有浮動(dòng)) 浮動(dòng)之后的元素的位置是靠瀏覽器的,
浮動(dòng)元素后面的沒(méi)有浮動(dòng)的元素會(huì)擠進(jìn)浮動(dòng)元素原來(lái)的位置。
(2)解決高度塌陷
高度塌陷:產(chǎn)生的條件父級(jí)元素沒(méi)有寫(xiě)高度,子元素浮動(dòng);
解決辦法:(1)在浮動(dòng)元素的最后加一個(gè)空的<div></div>,給這個(gè)div
寫(xiě)上聲明div{clear:both;}          
(2)在css中給父級(jí)元素添加一個(gè)聲明,div{overflow:hidden;}

七、盒模型

1、定義:網(wǎng)頁(yè)元素如何顯示以及相互關(guān)系。
 邊框 邊界  補(bǔ)白 內(nèi)容區(qū)

2、padding(補(bǔ)白)
(1)填充:padding在設(shè)定頁(yè)面中的一個(gè)元素中一個(gè)元素內(nèi)容到元素的邊緣(邊框)之間的距離,補(bǔ)白;
(2)用來(lái)調(diào)整內(nèi)容在容器中的位置關(guān)系
(3)用來(lái)調(diào)整子元素在父級(jí)元素中的位置
(4)padding屬性加在父級(jí)元素上面
關(guān)于padding值減不減問(wèn)題?
1、減:父級(jí)元素有寬高
2、不減:父級(jí)元素沒(méi)有寬高;
(5)如何減?
高-(top+bottom);寬-(left+right);       
3、語(yǔ)法:
四個(gè)值:{padding:top right bottom left;}
一個(gè)值:{padding:20px}={padding:20px 20px 20px 20px;}
二個(gè)值:{padding:20px 30px;}={padding:20px 30px 20px 30px;}
二個(gè)值:{padding:20px 30px 40px;}={padding:20px 30px 40px 30px;}
拆分:{padding-top/right/bottom/left:value;}

2、margin
(1)邊際:margin在設(shè)定頁(yè)面中元素外邊的空白區(qū);
(2)margin屬性加在子級(jí)元素上面     
(3)語(yǔ)法:
四個(gè)值:{margin:top right bottom left;}
一個(gè)值:{margin:20px}={padding:20px 20px 20px 20px;}
二個(gè)值:{margin:20px 30px;}={padding:20px 30px 20px 30px;}
二個(gè)值:{margin:20px 30px 40px;}={padding:20px 30px 40px 30px;}
拆分:{margin-top/right/bottom/left:value;}