~

,

,

,

,
銆?li>绛夛紝鍏朵腑
鏍囩鏄渶鍏稿瀷鐨勫潡鍏冪礌銆傚潡绾у厓绱犵殑鐗圭偣(1)姣旇緝闇搁亾锛岃嚜宸卞崰涓€琛岎煋?2)楂樺害銆佸搴︺€佸杈硅窛鍜屽杈硅窛閮藉彲浠ユ帶鍒躲€?3)榛樿瀹藉害涓哄鍣ㄧ殑100%锛堢埗瀹藉害锛夈€?4)鏄鍣ㄥ拰鐩掑瓙锛屽彲浠ラ噴鏀惧唴閮ㄦ垨鍧楃骇鍏冪礌銆傛敞鎰忥細鍙湁鏂囨湰鎵嶈兘缁勬垚娈佃惤锛屾墍浠ュ潡绾у厓绱犱笉鑳芥斁鍦╬涓紝灏ゅ叾鏄痯涓嶈兘鏀惧湪div涓€傚悓鐞嗭紝h1,h2,h3,h4,h5,h6,dt杩欏嚑涓爣绛鹃兘鏄枃鏈潡绾х殑Label锛岄噷闈笉鑳芥斁鍏朵粬鍧楃骇鍏冪礌銆?銆佸唴鑱斿厓绱犲父瑙佺殑鍐呰仈鍏冪礌鏈?a>銆?strong>銆?b>銆?em>銆?i>銆?del>銆?s>銆?ins>銆?u>銆?span>绛夈€傚叾涓紝鏍囩鏄渶鍏稿瀷鐨勫唴鑱斿厓绱犮€傛湁浜涘湴鏂逛篃鎴愪负鍐呰仈鍏冪礌銆傚唴鑱斿厓绱犵殑鐗圭偣锛?1)鐩搁偦鐨勫唴鑱斿厓绱犲湪涓€琛岋紝涓€琛屽彲浠ユ樉绀哄涓€?2)鐩存帴璁剧疆楂樺鏃犳晥銆?3)榛樿瀹藉害涓鸿嚜韬唴瀹圭殑瀹藉害銆?4)鍐呰仈鍏冪礌鍙兘瀹圭撼鏂囨湰鎴栧叾浠栧唴鑱斿厓绱犮€傞摼鎺ヤ笉鑳芥斁鍦ㄩ摼鎺ュ唴銆傚湪鐗规畩鎯呭喌涓嬶紝鍧楃骇鍏冪礌鍙互鏀惧湪a涓紝浣嗘槸灏嗗潡绾фā寮忚浆鎹负a鏄渶瀹夊叏鐨勩€?銆佽鍐呭潡鍏冪礌琛屽唴鍏冪礌涓湁鍑犱釜鐗规畩鐨勬爣绛锯€斺€?img/>銆?input/>銆?td>锛屼綘鍙互涓哄畠浠缃搴︺€侀珮搴﹀拰瀵归綈灞炴€э紝鏈変簺绱犳潗鍙兘浼氱О瀹冧滑涓鸿鍐呭潡鍏冪礌銆傚唴鑱斿潡鍏冪礌鐨勭壒鐐癸細锛?锛変笌鐩搁偦鐨勫唴鑱斿厓绱狅紙鍐呰仈鍧楋級鍦ㄤ竴鏉＄嚎涓婏紝浣嗗畠浠箣闂翠細鏈夌┖鐧介棿闅欍€備竴琛屽彲浠ユ樉绀哄涓紙2锛夐粯璁ゅ搴︽槸鍏惰嚜韬唴瀹圭殑瀹藉害銆?3)楂樺害銆佽楂樸€佸杈硅窛鍜屽唴杈硅窛閮藉彲浠ユ帶鍒躲€?銆佹爣绛炬樉绀烘柟寮忚浆鎹isplayblocktoinline:display:inline;鍐呰仈鍧楋細鏄剧ず锛氬潡锛涘潡鍜屽唴鑱斿厓绱犲埌鍐呰仈鍧楋細鏄剧ず锛氬唴鑱斿潡锛?a>鍏冪礌涓€鑸娇鐢╠isplay杞崲涓篸isplay:inline-block8,cssbackgroundbackground-color:transparent;灏嗚儗鏅缃负閫忔槑鑹层€傚鍏ュ浘鐗囷細background-image:url(../img/index.png);涓嶈鍦╱rl鍚庨潰鍔犲紩鍙枫€?.css鑳屾櫙浣嶇疆瀹氫綅background-position锛歺鍧愭爣y鍧愭爣锛涗竴鑸秴澶ц儗鏅殑鍥剧墖閮芥槸姘村钩瀵归綈灞呬腑锛屼笉闇€瑕佸瀭鐩村榻愩€傚馃憞浠ｇ爜鎵€绀猴細body{background-image:url(../img/sms.jpg);鑳屾櫙閲嶅锛氫笉閲嶅锛涜儗鏅綅缃細灞呬腑锛泒鐩掑瓙閲屽皬鍥炬爣鐨勫畾浣嶏細瀹炵幇鏁堟灉鍥撅細杩欓噷鏈€閲嶈鐨勪竴鍙ユ槸鍥炬爣瀹氫綅浠ｇ爜background-position:10pxcenter;x杞磋窛绂讳负10px锛寉杞磋窛绂诲瀭鐩村眳涓?0銆傝儗鏅檮浠惰儗鏅檮浠惰鏄庤儗鏅槸婊氬姩杩樻槸鍥哄畾锛岄粯璁や负婊氬姩fixedparameterfunctionscrollbackgroundimageisscrollingwithobjectcontentfixedbackgroundimagefixed11銆佽儗鏅缉鍐欒儗鏅細鑳屾櫙棰滆壊鑳屾櫙鍥剧墖鍦板潃鑳屾櫙骞抽摵鑳屾櫙婊氬姩鑳屾櫙浣嶇疆鑳屾櫙锛氶€忔槑url(image.jpg)repeat-yscrollcentertop;12锛巄ackgroundtranslucencyalpha鏄€忔槑搴﹀弬鏁帮紝鍙栧€艰寖鍥村湪0-1涔嬮棿锛岄€傜敤鑼冨洿骞匡紝闇€瑕佺墷璁?divclass="alpha">
.alpha{瀹藉害锛?00鍍忕礌锛涢珮搴︼細200px锛涜儗鏅細rgba锛?,0,0,0.2锛夛紱}13銆丆SS涓夊ぇ鐗规€у眰鍙?div>闀挎睙鍚庢氮鎺ㄥ墠娴紝鍓嶆氮姝诲湪娌欐哗涓?/div>璁剧疆涓婇潰鐨勬枃瀛椾袱绉嶉鑹叉牱寮忥細姝ゆ椂鏄剧ず鐨勫睘鎬ф槸榛戣壊灞炴€э紝绮夌孩鑹蹭細琚鐩栥€侷nheritance缁ф壙灏辨槸瀛愮户鎵跨埗鐨勪笟鍔★紝瀛愭爣绛句細缁ф壙鐖舵爣绛剧殑鏍峰紡

CSS缁ф壙

div{color:pink;}濡傚浘馃憜锛屾垜浠病鏈夎缃甦iv涓媝鐨勬牱寮忥紝鍙缃簡鐖舵爣绛綿iv鐨勯鑹蹭负绮夎壊銆傛鏃秔缁ф壙浜嗙埗鍏冪礌div鐨勬牱寮忥紝棰滆壊涔熶細鍑虹幇涓虹矇绾㈣壊prioritykeylabelselectorcalculationweightformulainheritanceor*0,0,0,0perelement(labelselector)0,0,0,1姣忎釜绫伙紝浼被0,0,1,0姣忎釜ID姣忎釜鍐呰仈鏍峰紡0,1,0,0style=""1,0,0,0姣忎釜锛乮mportant鈭瀒nfinityweightcalculationexample:divulli------>0,0,0,3.navulli------>0,0,1,2a:hover-------->0,0,1,1.nava------>0,0,1,1杩欓噷闇€瑕佹敞鎰忕殑鏄細缁ф壙鐨勬潈閲嶄负0瑕佷慨鏀规牱寮忥紝涓€瀹氳妫€鏌ユ槸鍚abelisselectedhinimportant1锛夊鏋滈€夋嫨浜嗭紝閭ｄ箞鐢ㄤ笂闈㈢殑鍏紡璁＄畻鏉冮噸銆傝皝鍚皝鐨勩€?锛夊鏋滄病鏈夐€変腑锛岄偅涔堟潈閲嶄负0锛屽洜涓虹户鎵跨殑鏉冮噸涓?锛岃繖涓湅浼肩畝鍗曪紝鍏跺疄寰堝鏄撴悶娣枫€傛垜浠湅涓嬮潰鐨勪緥瀛愶細馃槃杩欎釜鏃跺€欐垜浠渶瑕佸垽鏂殑鏄痯鍏冪礌Style鐨勫唴瀹规槸浠€涔堬紝p浼氱户鎵跨埗鍏冪礌鐨勬牱寮忥紝浣嗘槸缁ф壙鐨勬潈閲嶄负0锛岃€宲鍏冪礌鐨勬潈閲峫abel涓?銆傚彟澶栵紝鐢变簬娌℃湁閫夋嫨p鏍囩锛屾墍浠ヤ細鏄剧ず鏍囩鐨勬牱寮忋€傚鏋滈€夋嫨浜唒鏍囩锛宨d+tag閫夋嫨鍣ㄧ殑鏉冮噸涓猴細0101锛屽ぇ浜巔鏍囩鐨勬潈閲嶏細0001锛屾墍浠ヤ細鏄剧ず涓虹矇鑹叉牱寮忋€備笅闈㈡湁涓€缁勭患鍚堥锛屽彲浠ョ湅鐪嬩綘鏄惁鎺屾彙浜嗚繖涓煡璇嗙偣haru馃憜濡傚浘锛屾枃瀛椾細鏄剧ず浠€涔堥鑹诧紵css鏉冮噸涓猴細0021銆?101銆?101锛屽垯鎺掗櫎钃濊壊銆傚鏋滅浜屼釜鍜岀涓変釜鏉冮噸鐩稿悓锛屾垜浠細閲囩敤灏辫繎鍘熷垯锛岀矇绾㈣壊濡傛灉闈犲緱杩戯紝涓婂浘涓殑鏍峰紡浼氬憟鐜颁负绮夌孩鑹诧紝濡傛灉璋冩崲榛勮壊鍜岀矇绾㈣壊鐨刢ss鏍峰紡浣嶇疆锛屽垯浼氭樉绀轰负榛勮壊銆傝繕鏈変竴涓棶棰樼壒鍒糠鎯戙€傚緢澶氭椂鍊欙紝鎴戜滑鐪嬪埌涓€涓紒important鑷劧浼氳寰楁潈閲嶆渶楂橈紝鎵€浠ヤ笂闈㈢殑鏂囧瓧浼氭樉绀虹豢鑹诧紝鍏跺疄鏄敊璇殑銆傜涓€姝ユ垜浠渶瑕佹煡鐪嬫枃鏈槸鍚﹁閫変腑銆傚鏋滀笉閫夋嫨锛屽垯缁ф壙銆傜户鎵跨殑鏉冮噸涓?锛屾垜浠彲浠ョ湅鍒板墠涓夐」閮芥槸閫変腑鐨勬枃鏈紝鑰屾渶鍚庝竴椤规病鏈夐€変腑锛屾墍浠ユ帓闄や簡缁胯壊green锛屽墠涓夐」鐨勬潈閲嶅垎鍒负锛?200銆?111銆?022锛屾墍浠ラ鑹插簲璇ユ槸钃濊壊銆傞潪甯搁噸瑕佺殑涓€鐐规槸涓嶈娣锋穯14.鐩掓ā鍨嬶紙CSSfocus锛夌洅妯″瀷鐢卞厓绱犵殑鍐呭銆佽竟妗嗭紙border锛夈€佸唴杈硅窛锛坧adding锛夈€佸杈硅窛锛坢argin锛夌粍鎴愩€傚唴鐩掑昂瀵歌绠楋細WidthElementHeight=contentheight+padding+border(Heightiscontentheight)HeightElementWidth=contentwidth+padding+border(Widthiscontentwidth)鐩掑瓙鐨勫疄闄呭昂瀵?content瀹介珮+innermargin+border璁╂垜浠敤杩欓亾棰樻潵璁＄畻鐩掑瓙鐨勫疄闄呭搴﹀拰楂樺害锛屾潵鍚ю煒塪iv{width:200px;楂樺害锛?00px锛涜竟妗嗭細1px瀹炲績#000000锛沚order-top:5px绾摑鑹诧紱濉厖锛?0px锛涘乏濉厖锛?00px锛泒浣犱滑鏈変粈涔堢粨鏋滃悧锛熸垜浠潵鍒嗘瀽涓€涓嬨€傚疄闄呭搴?width(200px)+border(2px)+padding(50px)+padding-left(100px)=352px銆傚疄闄呴珮搴?height(200px)+border(1px)+border-top(5px)+padding(100px)=306px銆傛湁鐨勬湅鍙嬭偗瀹氫細鐤戞儜涓轰粈涔坵idth閲岀殑padding鏄?50锛岃繖閲屾湁涓€涓潙锛屽洜涓簂eftpadding鍗曠嫭璁剧疆涓?00px锛屾墍浠idth閲岀殑padding鏄?50px锛宧eight涔熸槸杩欐牱璁＄畻鐨勶紝杈规涓?px鐩稿悓銆?5.鍧楃骇妗嗙殑姘村钩灞呬腑鍏佽涓€涓潡绾ф姘村钩灞呬腑锛氭蹇呴』鎸囧畾瀹藉害锛坵idth锛夊苟灏嗗乏鍙宠竟璺濊缃负auto銆傚湪瀹為檯宸ヤ綔涓紝杩欑鏂规硶甯哥敤浜庣綉椤靛竷灞€銆傜ず渚嬩唬鐮佸涓嬶細.鏍囬{瀹藉害锛?60px;margin:0auto;}甯哥敤鐨勫啓娉曪紝鍙互鎺ュ彈浠ヤ笅涓夌銆傚乏杈硅窛锛氳嚜鍔紱margin-right:auto;margin:auto;margin:0auto;16.CSS甯冨眬鐨勪笁绉嶆満鍒舵櫘閫氭祦寮忓潡绾у厓绱犱細鍗犳嵁涓€琛岋紝浠庝笂鍒颁笅渚濇鎺掑垪锛?甯哥敤鍏冪礌锛歞iv,hr,p,h1~h6,ul,ol,dl,form,table琛屽唴鍏冪礌浼氭寜椤哄簭鎺掑垪锛屼粠宸﹀埌鍙筹紝纰板埌鐖剁骇鐨勮竟缂樹細鑷姩鎹㈣鍏冪礌;-甯哥敤鍏冪礌锛歴pan,a,i,em绛夋诞鍔╢loat鐨勪富瑕佷环鍊兼槸璁╁涓潡绾у厓绱犲湪鍚屼竴琛屾樉绀恒€傚厓绱犵殑娴姩鏄寚璁剧疆浜嗘诞鍔ㄥ睘鎬х殑鍏冪礌浼氳劚绂绘爣鍑嗘櫘閫氭祦鐨勬帶鍒惰€岀Щ鍔ㄥ埌鎸囧畾鐨勪綅缃€係elector{float:灞炴€у€?}灞炴€у€艰鏄巒one鍏冪礌涓嶆诞鍔紙榛樿鍊硷級left鍏冪礌鍚戝乏娴姩right鍏冪礌鍚戝彸娴姩鎴戜滑浣跨敤娴姩鐨勬牳蹇冪洰鐨勬槸璁╁涓潡绾ф鏄剧ず鍦ㄥ悓涓€琛屻€傝繖涔熸槸鎴戜滑鏈€甯歌鐨勪竴涓畬鏁寸綉椤电殑甯冨眬鏂瑰紡锛岄€氳繃鏍囧噯娴?娴姩+瀹氫綅涓€璧峰畬鎴愩€傛诞鍔ㄥ彧浼氬奖鍝嶅綋鍓嶆垨鍚庣画鐨勬爣鍑嗘祦妗嗭紝涓嶄細褰卞搷涔嬪墠鐨勬爣鍑嗘祦銆傛瘡涓爣鍑嗘祦鍗犵敤涓€涓崟鐙殑琛屻€傚鏋滀竴涓洅瀛愰噷鏈夊涓瓙鐩掑瓙锛屽鏋滃叾涓竴涓洅瀛愭诞鍔紝鍏朵粬鍏勫紵涔熻娴姩锛屼互鍏嶉€犳垚鍏朵粬闂銆傛垜浠潵鐪嬩笅闈煈囧嚑绉嶆儏鍐碉細涓嬮潰鐨刣iv缁撴瀯閮芥槸杩欐牱鐨勶細