O prezentare generală a foilor de stil cascadă cu foaia de stil de probă
Când construiți un site de la zero, este inteligent să începeți cu stilurile de bază definite. Este ca și cum ai începe cu o pânză curată și cu perii proaspeți. Una dintre primele probleme cu care se confruntă designerii web este că browserele web sunt diferite. Dimensiunea implicită a fontului este diferită de cea de la platformă la platformă, familia de fonturi implicită este diferită, unele browsere definesc margini și umplutură pe eticheta corporală, în timp ce altele nu și așa mai departe. Închideți aceste inconsecvențe prin definirea stilurilor implicite pentru paginile dvs. Web.
CSS și setul de caractere
În primul rând, setați setul de caractere al documentelor dvs. CSS la utf-8 . Deși este probabil ca majoritatea paginilor pe care le proiectezi să fie scrise în limba engleză, unele pot fi localizate - adaptate pentru contextul lingvistic și cultural diferit. Când sunt, utf-8 simplifică procesul. Setarea setului de caractere în foaia de stil extern nu va avea prioritate față de un antet HTTP , dar în toate celelalte situații va fi.
Este ușor să setați setul de caractere. Pentru prima linie a documentului CSS scrieți:
@charset "utf-8";În acest fel, dacă utilizați caractere internaționale în proprietatea conținutului sau ca nume de clasă și ID, foaia de stil va funcționa corect.
Modelarea corpului paginii
Următorul lucru pe care trebuie să-l aibă o foaie de stil implicită sunt stilurile de margini, plăcuțe și margini. Aceasta asigură că toate browserele plasează conținutul în același loc și nu există spații ascunse între browser și conținut. Pentru majoritatea paginilor web, aceasta este prea aproape de marginea textului, dar este important să începeți acolo, astfel încât imaginile de fundal și diviziunile de aspect să fie aliniate corect.
html, corp {margine: 0px; padding: 0px; frontieră: 0px; }Setați culorile din prim-plan sau din fontul implicit la negru, iar culoarea de fundal implicită este albă. În timp ce acest lucru se va schimba cel mai probabil pentru majoritatea desenelor de pagini web, având aceste culori standard setate pe corp și eticheta HTML la început face ca pagina să fie mai ușor de citit și de utilizat.
html, corp {culoare: # 000; fundal: #fff; }Fonturile implicite
Dimensiunea fontului și familia de fonturi sunt ceva care se va schimba în mod inevitabil, odată ce designul se va menține, dar va începe cu o dimensiune implicită a fontului de 1 em și o familie de fonturi implicită a fontului Arial, Geneva sau a altui font sans-serif. Utilizarea ems-urilor păstrează cât mai accesibilă pagina și un font sans-serif este mai lizibil pe ecran.
html, body, p, th, td, li, dd, dt {font: 1m Arial, Helvetica, sans-serif; }S-ar putea să existe și alte locuri în care să găsiți text, dar p , th , td , li , dd și dt sunt un început bun pentru definirea fontului de bază. Includeți codul HTML și corpul doar pentru caz, dar multe browsere înlocuiesc opțiunile pentru fonturi dacă definiți numai fonturile pentru codul HTML sau corpul.
Prima pagină
Formatele HTML sunt importante pentru a ajuta site-ul dvs. să schițeze și pentru a lăsa motoarele de căutare să devină mai adânc în site-ul dvs. Fără stiluri, toate sunt destul de urâte, setând astfel stilurile implicite pentru toate acestea și definesc familia de fonturi și dimensiunile fontului pentru fiecare.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2m; } h2 {font-size: 1.5; } h3 {font-size: 1.2; } h4 {font-size: 1.0; } h5 {font-size: 0,9; } h6 {font-size: 0.8; }Nu uitați legăturile
Modelarea culorilor link-urilor este aproape întotdeauna o parte critică a designului, dar dacă nu le definiți în stilurile implicite, este posibil să uitați cel puțin una dintre pseudo-clase. Definiți-le cu o mică variație pe albastru și apoi schimbați-le odată ce aveți paleta de culori pentru site-ul definit.
Pentru a seta legăturile în nuanțe de albastru, setați:
- link-uri ca albastru
- link-urile vizitate ca albastru închis
- hover link-uri ca albastru deschis
- link-uri active ca și mai blând albastru
după cum se arată în acest exemplu:
a: link {culoare: # 00f; } a: vizitat {culoare: # 009; } a: hover {culoare: # 06f; } a: activ {culoare: # 0cf; } Prin modelarea legăturilor cu o schemă de culoare destul de inofensivă, se asigură că nu voi uita nici una din clase și, de asemenea, le face puțin mai puțin tare decât albastru, roșu și purpuriu implicit.Stil complet de stil
Aici este foaia de stil completă:
@charset "utf-8"; html, corp {margine: 0px; padding: 0px; frontieră: 0px; culoare: # 000; fundal: #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: 2m; } h2 {font-size: 1.5; } h3 {font-size: 1.2; } h4 {font-size: 1.0; } h5 {font-size: 0,9; } h6 {font-size: 0.8; } a: link {culoare: # 00f; } a: vizitat {culoare: # 009; } a: hover {culoare: # 06f; } a: activ {culoare: # 0cf; }