Cand tu construiește un site web 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 perii proaspete. Una dintre primele probleme cu care se confruntă designerii de web este aceea browsere web sunt toate diferite. Dimensiunea implicită a fontului este diferită de la platformă la platformă, familia de fonturi implicită este diferită, unele browsere definesc marginile și căptușeala pe eticheta corpului, în timp ce altele nu, etc. Eliminați aceste neconcordanțe definind stilurile implicite pentru paginile dvs. web.
CSS și setul de caractere
Mai întâi, setați setul de caractere al documentelor dvs. CSS la utf-8. Deși este probabil ca majoritatea paginilor pe care le proiectați să fie scrise în engleză, unele pot fi localizate - adaptate pentru diferite contexte lingvistice și culturale. Când sunt, utf-8 simplifică procesul. Setarea setului de caractere în foaie de stil externă nu va avea prioritate față de un HTTP antet, 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 de conținut sau ca numele clasei și ID-ul, foaia de stil va funcționa în continuare corect.
Stilul corpului paginii
Următorul lucru de care are nevoie o foaie de stil implicită sunt stilurile zero margini, umplutură și margini. Acest lucru asigură faptul că toate browserele plasează conținutul în același loc și că nu există spații ascunse între browser și conținut. Pentru majoritatea paginilor web, acest lucru este prea aproape de margine pentru text, dar este important să începeți de acolo, astfel încât imaginile de fundal și diviziunile de aspect să fie aliniate corect.
html, corp {
marja: 0px;
umplutură: 0 px;
chenar: 0px;
}
Setați culoarea implicită a prim-planului sau a fontului la negru și culoarea implicită a fundalului la alb. Deși acest lucru se va schimba cel mai probabil pentru majoritatea proiectelor de pagini web, având aceste culori standard stabilite pe corp și Etichetă HTML la început face ca pagina să fie mai ușor de citit și de lucrat.
html, corp {
culoare: # 000;
fundal: #fff;
}
Stiluri de font implicite
Dimensiunea fontului și familia de fonturi sunt ceva care se va schimba în mod inevitabil odată ce designul va fi preluat, dar începe cu o dimensiune de font implicită de 1 em și o valoare implicită familie de fonturi din Arial, Geneva sau altele font sans-serif. Utilizarea ems menține pagina cât mai accesibilă, iar un font sans-serif este mai lizibil pe ecran.
html, body, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
S-ar putea să existe și alte locuri unde s-ar putea să găsiți text, dar p, a, td, li, dd, și dt sunt un bun început pentru definirea fontului de bază. Include HTML și corp pentru orice eventualitate, dar multe browsere anulează alegerile fontului dacă vă definiți numai fonturile pentru HTML sau corp.
Titluri
Titluri HTML sunt importante de utilizat pentru a vă ajuta să descrieți site-ul și să lăsați motoarele de căutare să adâncească site-ul dvs. Fără stiluri, toate sunt destul de urâte, așa că setați stiluri implicite pe toate și definiți familia de fonturi și dimensiunile fonturilor pentru fiecare.
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; }
Nu uitați de linkuri
Stilizarea culorilor link-ului 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ă variantă de albastru și apoi schimbați-le odată ce ați definit paleta de culori pentru site.
Pentru a seta link-uri în nuanțe de albastru, setați:
- link-uri ca albastru
- linkuri vizitate ca albastru închis
- linkuri cu mouse-ul ca albastru deschis
- linkuri active ca și un albastru mai palid
Așa cum se arată în acest exemplu:
a: link {color: # 00f; }
a: vizitat {color: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }
Prin stilizarea legăturilor cu o schemă de culori destul de inofensivă, vă asigură că nu veți uita niciuna dintre clase și, de asemenea, le face puțin mai puternice decât albastru, roșu și violet implicit.
Foaie de stil complet
Iată foaia completă de stil:
@charset "utf-8";
html, corp {
marja: 0px;
umplutură: 0 px;
chenar: 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: 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: vizitat {color: # 009; }
a: hover {color: # 06f; }
a: active {color: # 0cf; }