Usa ka Overview sa Cascading Style Sheets May Sample Style Sheet
Kon magtukod ka og usa ka website gikan sa scratch, maalamon kini nga magsugod sa mga batakang estilo nga gihubit. Kini sama sa pagsugod sa usa ka limpyo nga canvas ug lab-as nga brush. Ang usa sa unang mga suliran nga giatubang sa mga tigdisenyo sa web mao nga lain ang mga web browser . Ang default nga gidak-on sa font lahi sa plataporma ngadto sa plataporma, ang default nga font nga pamilya lahi, ang pipila ka mga browser naghubad sa mga margin ug padding sa tag sa lawas samtang ang uban dili, ug uban pa. Palihug palandonga kining mga pagsupak pinaagi sa pag-ila sa default nga mga estilo alang sa imong mga panid sa web.
CSS ug ang Character Set
Una nga mga butang una, ibutang ang karakter nga set sa imong CSS nga mga dokumento sa utf-8 . Samtang kini lagmit nga ang kadaghanan sa mga panid nga imong gilaraw gisulat sa Iningles, ang uban mahimo nga lokal-gipahiangay alang sa nagkalainlain nga pinulongan sa linguistic ug kultura. Sa diha nga sila mao, utf-8 gipasimple ang proseso. Ang pagtakda sa kinaiya nga gibutang sa estilo sa gawas nga estudyo dili magamit sa usa ka header sa HTTP , apan sa tanan nga uban nga mga sitwasyon, kini.
Sayon ang pagpahimutang sa karakter. Alang sa unang linya sa CSS nga dokumento isulat:
@ charset "utf-8";Niining paagiha, kon mogamit ka sa internasyonal nga mga karakter sa sulod sa sulod o ingon nga mga pangalan sa klase ug ID, ang estilo sa estilo magamit gihapon sa husto.
Pag-istilo sa Pahina nga Lawas
Ang sunod nga butang nga ang usa ka kinahanglanon nga estilo sa estilo sa estilo mao ang mga estilo sa pag-zero gikan sa mga margin, padding, ug mga utlanan. Gitino niini nga ang tanan nga mga browser nagbutang sa sulod sa sama nga dapit, ug walay bisan unsa nga natago nga mga luna tali sa browser ug sa sulod. Alang sa kadaghanan sa mga panid sa web, kini duol kaayo sa ngilit alang sa teksto, apan importante nga magsugod didto aron ang mga hulagway sa background ug layout divisions husto nga gilinya.
html, lawas {margin: 0px; padding: 0px; utlanan: 0px; }Ibutang ang default foreground o kolor sa font sa itom ug ang default nga kolor sa background nga puti. Bisan kini nga lagmit nga pagbag-o alang sa kadaghanan sa mga disenyo sa webpage, nga kini nga mga standard nga mga kolor nga gipahimutang sa lawas ug tag sa HTML sa sinugdanan naghimo sa pahina nga mas sayon nga basahon ug magamit.
html, body {color: # 000; background: #fff; }Mga Default nga Estilo sa Font
Ang gidak-on sa font ug ang pamilya sa pamilya usa ka butang nga dili kalikayan nga mausab sa higayon nga ang disenyo maggunit apan magsugod sa usa ka default nga font nga gidak-on sa 1 em ug usa ka default font nga pamilya sa Arial, Geneva, o uban pang sans-serif font. Ang paggamit sa mga ems nakapabilin sa panid ingon nga masayonan, ug ang usa ka sans-serif font mas mabasa sa screen.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Tingali adunay uban nga mga dapit diin ikaw makakaplag og teksto, apan ang p , th , td , li , dd , ug dt usa ka maayong pagsugod sa pag-ila sa base font. Ilakip ang HTML ug lawas sa kaso, apan daghang mga browser ang nag-override sa mga pagpili sa font kung imo lamang ipaila ang imong mga font alang sa HTML o lawas.
Mga ulohan
Importante nga gamiton ang mga ulohan sa HTML aron sa pagtabang sa imong outline sa site ug ipa-ilalom ang mga search engine sa imong site. Kon wala ang mga estilo, ang tanan managsama nga hugaw, busa ibutang ang mga estilo sa default sa tanan niini ug ipaila ang pamilya sa font ug ang mga gidak-on sa font alang sa matag usa.
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; }Ayaw kalimti ang mga Links
Ang pag-istilo sa mga kolor nga mga kolor halos kanunay nga usa ka kritikal nga bahin sa desinyo, apan kon dili nimo kini gipasabot sa mga estilo sa default, posibleng makalimtan nimo ang bisan usa sa pseudo-klase. Ihubit kini sa pipila ka gagmay nga kalainan sa asul ug dayon usba kini sa higayon nga ikaw adunay palette sa kolor alang sa lugar nga gihubit.
Aron ibutang ang mga sumpay sa mga kolor nga asul, itakda:
- gihimong mga asul
- mibisita sa mga link isip madulom nga asul
- hover links ingon as light blue
- aktibo nga mga link sama sa paler blue
ingon sa gipakita sa niini nga panig-ingnan:
a: link {color: # 00f; } a: gibisita {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } Pinaagi sa pag-istilo sa mga sumpay sa usa ka dili maayo nga paagi nga kolor sa kolor kini nagsiguro nga dili ko makalimtan ang bisan unsang mga klase, ug usab makapahimo kanila nga gamay nga dili kaayo kusog kay sa default nga asul, pula, ug purpura.Full Style Sheet
Ania ang bug-os nga style sheet:
@ charset "utf-8"; html, lawas {margin: 0px; padding: 0px; utlanan: 0px; kolor: # 000; background: #fff; } html, body, 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 {color: # 00f; } a: gibisita {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; }