Ħarsa ġenerali ta 'Folji ta' l-Istil Cascading Bil-Folja tal-Istil tal-Kampjun
Meta tibni websajt mill-bidu, huwa intelliġenti li tibda bl-istili bażiċi definiti. Huwa simili li tibda b'disma nadifa u xkupilji friski. Waħda mill-ewwel problemi li jiffaċċjaw il-web designers hija li l- web browsers huma kollha differenti. Id-daqs tat-tipa default huwa differenti minn pjattaforma għal pjattaforma, il-familja tat-tipa default hija differenti, xi browsers jiddefinixxu l-marġini u l-ikkuttunar fuq it-tikketta tal-ġisem filwaqt li oħrajn ma jagħmlux hekk, eċċ. Iġbor dawn l-inkonsistenzi billi tiddefinixxi l-istili awtomatiċi għall-paġni tal-web tiegħek.
CSS u s-Sett tal-Karattri
L-ewwel affarijiet, waqqaf is-sett ta 'karattri tad-dokumenti tas-CSS tiegħek għal utf-8 . Filwaqt li huwa probabbli li l-biċċa l-kbira tal-paġni li tiddisinja jinkitbu bl-Ingliż, xi wħud jistgħu jkunu lokalizzati-adattati għal kuntest lingwistiku u kulturali differenti. Meta huma, utf-8 jissimplifika l-proċess. L-iffissar tal-karattru stabbilit fil- folja tal-istil estern mhux se jieħu preċedenza fuq header HTTP , iżda fis-sitwazzjonijiet l-oħra kollha, se.
Huwa faċli li jiġi stabbilit is-sett tal-karattri. Għall-ewwel linja tad-dokument CSS ikteb:
@charset "utf-8";B'dan il-mod, jekk tuża karattri internazzjonali fil-proprjetà tal-kontenut jew bħala klassi u l-ismijiet tal-ID, il -folja tal-istil xorta se taħdem sew.
Styling tal-Korp Page
Il-ħaġa li jmiss folja ta 'stil default teħtieġ huma stili għal żero marġini, ikkuttunar, u l-fruntieri. Dan jiżgura li l-browsers kollha jpoġġu l-kontenut fl-istess post, u ma jkunx hemm spazji moħbija bejn il-browser u l-kontenut. Għall-biċċa l-kbira tal-paġni tal-web, dan huwa viċin wisq għat-tarf għat-test, iżda huwa importanti li tibda hemm sabiex l-immaġini tal-isfond u d-diviżjonijiet tal-arranġament ikunu nġeddu b'mod korrett.
html, korp {marġini: 0px; ikkuttunar: 0px; fruntiera: 0px; }Issettja t-tagħrif mikxuf default jew il-kulur tat-tipa għal iswed u l-kulur ta 'l-isfond default għal abjad. Filwaqt li dan x'aktarx se jinbidel għal ħafna mill-disinji tal-webpage, li jkollhom dawn il-kuluri standard stabbiliti fuq il-ġisem u tabella HTML fl-ewwel tagħmel il-paġna aktar faċli biex taqra u taħdem.
html, korp {kulur: # 000; isfond: #fff; }Stili ta 'Tipi Default
Id-daqs tat-tipa u l-familja tat-tipa huma xi ħaġa li inevitabbilment se tinbidel ladarba d-disinn jinżamm iżda jibda b'dejta ta 'daqs standard ta' 1 em u familja ta 'font default ta' Arial, Ġinevra, jew xi tip ieħor ta 'sans-serif font. L-użu ta 'EMS iżomm il-paġna aċċessibbli kemm jista' jkun, u font sans-serif huwa aktar leġġibbli fuq l-iskrin.
html, korp, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Jista 'jkun hemm postijiet oħra fejn tista' ssib it-test, iżda p , th , td , li , dd , u dt huma bidu tajjeb għad-definizzjoni tat-tipa bażi. Inkludi HTML u korp fil-każ biss, iżda bosta browsers jissuperaw l-għażliet ta 'fonts jekk tiddefinixxi biss it-fonts tiegħek għall-HTML jew korp.
Punti Ewlenin
L-intestaturi HTML huma importanti għall-użu biex jgħinu deskrizzjoni tas-sit tiegħek u ħalli l-magni tat-tiftix jidħlu fil-fond fuq is-sit tiegħek. Mingħajr stili, huma kollha pjuttost ikrah, b'hekk issettja stili awtomatiċi fuq kull wieħed minnhom u tiddefinixxi l-familja tat-tipa u d-daqsijiet tat-tipa għal kull wieħed.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Tinsa l-Links
L-istil tal-kuluri tal-linka huwa kważi dejjem parti kritika tad-disinn, imma jekk ma tiddefinixxixhom fl-istili default, iċ-ċansijiet huma inti tinsa mill-inqas waħda mill-psewdo-klassijiet. Iddefinixxihom b'xi varjazzjoni żgħira fuq blu u mbagħad ibiddluhom ladarba jkollok il-paletta tal-kulur għas-sit iddefinit.
Biex tistabbilixxi r- rabtiet fl-ilwien ta 'blu, sett:
- links bħala blu
- żar il-kollegamenti bħala blu skur
- Itfi l-links bħala blu ċar
- Ir-rabtiet attivi huma saħansitra aktar ċari
kif muri f'dan l-eżempju:
a: link {kulur: # 00f; } a: żar {kulur: # 009; } a: imbagħad [kulur: # 06f; } a: attiv {kulur: # 0cf; } Permezz tal-grafika tar-rabtiet bi skema ta 'kulur pjuttost innoċenti tiżgura li ma ninsewx xi waħda mill-klassijiet, u wkoll tagħmilhom ftit inqas qawwi mill-default blu, aħmar, u vjola.Fuljett sħiħ tal-Istil
Hawn hu l-folja tal-istil sħiħ:
@charset "utf-8"; html, korp {marġini: 0px; ikkuttunar: 0px; fruntiera: 0px; kulur: # 000; isfond: #fff; } html, korp, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {kulur: # 00f; } a: żar {kulur: # 009; } a: imbagħad [kulur: # 06f; } a: attiv {kulur: # 0cf; }