Isang Pangkalahatang-ideya ng Cascading Style Sheets May Sample Style Sheet
Kapag nagtatayo ka ng isang website mula sa simula, matalino upang magsimula sa mga pangunahing estilo na tinukoy. Ito ay tulad ng nagsisimula sa isang malinis na canvas at sariwang brushes. Ang isa sa mga unang problema na hinaharap ng mga taga-disenyo ng web ay ang lahat ng mga web browser ay magkakaiba. Ang default na laki ng font ay naiiba mula sa platform patungo sa platform, ang default na font ng pamilya ay naiiba, ang ilang mga browser ay nagtatakda ng mga margin at padding sa tag ng katawan habang ang iba ay hindi, at iba pa. Kumuha ng paligid ng mga hindi pagkakapare-pareho sa pamamagitan ng pagtukoy sa mga default na estilo para sa iyong mga web page.
CSS at ang Character Set
Una muna ang mga bagay, itakda ang character set ng iyong mga dokumento sa CSS sa utf-8 . Bagaman malamang na ang karamihan sa mga pahina na iyong idinisenyo ay nakasulat sa Ingles, ang ilan ay maaaring naisalokal-inangkop para sa iba't ibang lingguwistiko at kultura na konteksto. Kapag ang mga ito, utf-8 pinapasimple ang proseso. Ang pagtatakda ng character na naka-set sa panlabas na style sheet ay hindi mangunguna sa isang header ng HTTP , ngunit sa lahat ng iba pang sitwasyon, ito ay.
Madaling itakda ang hanay ng character. Para sa unang linya ng dokumento ng CSS isulat:
@ charset "utf-8";Sa ganitong paraan, kung gumamit ka ng mga internasyonal na character sa ari-arian ng nilalaman o bilang mga pangalan ng klase at ID, ang style sheet ay gagana pa rin nang tama.
Pag-istilo ng Pahina ng Katawan
Ang susunod na bagay na kailangan ng isang estilo ng default na mga estilo ay ang mga estilo upang mai-zero ang mga margin, padding, at mga hangganan. Tinitiyak nito na inilalagay ng lahat ng mga browser ang nilalaman sa parehong lugar, at walang anumang nakatagong espasyo sa pagitan ng browser at ng nilalaman. Para sa karamihan sa mga web page, ito ay masyadong malapit sa gilid para sa teksto, ngunit mahalaga na magsimula doon upang ang mga larawan sa background at mga dibisyon ng layout ay nakaayos nang wasto.
html, katawan {margin: 0px; padding: 0px; hangganan: 0px; }Itakda ang default na foreground o kulay ng font sa itim at ang default na kulay ng background sa puti. Bagaman ito ay malamang na baguhin para sa karamihan ng mga disenyo ng webpage, ang pagkakaroon ng mga standard na kulay na ito na naka-set sa katawan at tag ng HTML sa una ay ginagawang mas madaling basahin at magtrabaho ang pahina.
html, katawan {color: # 000; background: #fff; }Mga Estilo ng Default na Font
Ang laki ng font at font ng pamilya ay isang bagay na hindi maaaring hindi magbago sa sandaling ang disenyo ay tumatagal ngunit magsimula sa isang default na laki ng font ng 1 em at isang default na pamilya ng font ng Arial, Geneva, o ilang iba pang sans-serif na font. Ang paggamit ng mga ems panatilihin ang pahina bilang naa-access hangga't maaari, at ang isang sans-serif na font ay mas nababasa sa screen.
html, katawan, p, ika, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Maaaring may iba pang mga lugar kung saan maaari kang makakita ng teksto, ngunit p , ika , td , li , dd , at dt ay isang magandang simula para sa pagtukoy sa base font. Isama ang HTML at katawan kung sakali, ngunit maraming mga browser ang binabago ang mga pagpipilian ng font kung ikaw lamang ang tumutukoy sa iyong mga font para sa HTML o katawan.
Mga pamagat
Mahalagang gamitin ang mga heading ng HTML upang matulungan ang iyong balangkas ng site at hayaan ang mga search engine na makakuha ng mas malalim sa iyong site. Walang mga estilo, lahat sila ay medyo pangit, kaya itakda ang mga default na estilo sa lahat ng mga ito at tukuyin ang font ng pamilya at ang laki ng font para sa bawat isa.
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; }Huwag kalimutan ang Mga Link
Ang pag-istilo ng mga kulay ng link ay halos palaging isang kritikal na bahagi ng disenyo, ngunit kung hindi mo tukuyin ang mga ito sa mga estilo ng default, malamang na makalimutan mo ang hindi bababa sa isa sa mga pseudo-klase. Tukuyin ang mga ito sa ilang mga maliit na pagkakaiba-iba sa asul at pagkatapos ay baguhin ang mga ito sa sandaling mayroon ka ng palette ng kulay para sa tinukoy ng site.
Upang itakda ang mga link sa mga kulay ng asul, itakda ang:
- mga link bilang asul
- binisita ang mga link bilang madilim na asul
- mag-hover ng mga link bilang mapusyaw na asul
- aktibong mga link bilang kahit paler blue
tulad ng ipinapakita sa halimbawang ito:
a: link {color: # 00f; } a: binisita {color: # 009; } a: hover {color: # 06f; } a: aktibo {color: # 0cf; } Sa pamamagitan ng pag-istilo ng mga link na may isang walang kaparehong scheme ng kulay, tinitiyak nito na hindi ko malilimutan ang alinman sa mga klase, at ginagawang mas mababa pa rin ang tunog kaysa sa default na asul, pula, at kulay-ube.Buong Estilo ng Sheet
Narito ang buong sheet ng estilo:
@ charset "utf-8"; html, katawan {margin: 0px; padding: 0px; hangganan: 0px; kulay: # 000; background: #fff; } html, katawan, p, ika, 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: binisita {color: # 009; } a: hover {color: # 06f; } a: aktibo {color: # 0cf; }