In oersjoch fan Cascading Style Sheets mei samling stylblêd
As jo in webside fan 'e scratch bouwe, dan is it tûk om te begjinnen mei de basisstilen definiearre. It is as begjin mei in skjinne leine en frisse boarsten. Ien fan 'e earste problemen dat web-ûntwerpers te krijen is dat webblêders allegear oars binne. De standert lettertypegrutte is oars as platfoarm nei platfoarm, de standert lettertypefamylje is oars, guon browsers definieare martsen en padding op 'e lichaam, wylst oaren net, en sa. Skeakelje dizze ynkonsensjes troch it definiearjen fan standert stilen foar jo websiden.
CSS en de tekenset
Earste dingen earst, set de karakterset fan jo CSS-dokuminten nei utf-8 . Wyls it is wierskynlik dat de measte siden dy't jo ûntwerke binne yn it Ingelsk skreaun wurde, kinne guon wurde pleatst-oanpast foar ferskillende taalkundige en kulturele kontekst. As se binne, stipet utf-8 it proses. It ynstellen fan de karakter yn it ekstern stylblêd sil gjin prestaasje hawwe oer in HTTP-header , mar yn alle oare situaasjes sil it wêze.
It is maklik om it karakter set te setten. Foar de earste line fan it CSS-dokumint skriuwe:
@charset "utf-8";Op dizze manier, as jo ynternasjonale karakters yn it ynhâldtigens of as klasse- en ID-nammen brûke, sil it stylblêd noch hieltyd wurkje.
Styling fan it sidekod
It folgjende ding dat in standert stylblêd nedich is binne stilen nei nul út marginen, padding, en grinzen. Dit makket derfoar dat alle browsers de ynhâld op deselde plak pleatse, en der binne gjin ferburgen spaasjes tusken de browser en de ynhâld. Foar de measte websiden is dit te ticht by de râne foar tekst, mar it is wichtich om dêr te starten sadat eftergrûnôfbyldings en layoutdielings korrekt opslein wurde.
html, body {margin: 0px; padding: 0px; border: 0px; }Set de standert foargrûn of lettertype kleur nei swart en de standert eftergrûnkleur te wite. Hoewol dit feroarsake foar de measte webstee-ûntwerpen, hawwe dizze standertkleuren op it lichem en HTML-tag setten de earste side makliker om te lêzen en te wurkjen.
html, body {color: # 000; eftergrûn: #fff; }Standert lettertypen
De lettertype en lettertypefamylje binne wat dat feroaret yn 'e wize as it ûntwerp fêsthâldt mar begjint mei in standert lettertypegrutte fan 1 em en in standert lettertypefamylje fan Arial, Genêve, of in inkele oare sans-serif-lettertype. It gebrûk fan ems behâlde de side sa tagonklik as mooglik, en in sans-serif-lettertype is lêsberder op it skerm.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Der kinne oare plakken wêze wêr't jo tekst fine kinne, mar p , th , td , li , dd , dt binne in goede start foar it definiearjen fan de basearre lettertype. Brûk HTML en lichem allinich yn gefal, mar in protte browsers oerskriuwe de lettertypen as jo allinich jo lettertypen foar it HTML of lichem definiearje.
Headlines
HTML-headings binne wichtich om te brûken om jo side-skema te heljen en sykmasines kinne djipper wurde op jo side. Sûnder stilen binne se allegear saaklik, sa sette standertstilen op elk fan har en definiearje de lettertypefamylje en de lettertypen foar elk.
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; }Don 't fergje de keppels
Styling fan 'e keppelkleuren is hast altyd in kritysk ûnderdiel fan' e ûntwerp, mar as jo se net yn 'e standertstilen definiearje, kânsjes binne jo minstens ien fan' e pseudo-klassen ferjitten. Meitsje har mei guon lytse fariant op blau en feroarje se dan as jo de kleurpalette foar de side definieare.
Om de keppelings yn skaden fan blau te setten, set:
- keppelings as blauwe
- Besikers wiene as dûnkerblau
- Hover links as ljochtblau
- aktive keppelings as sels palmerblau
lykas yn dit foarbyld sjen litten:
a: link {color: # 00f; } a: besocht {kleur: # 009; } a: hover {kleur: # 06f; } a: aktyf {color: # 0cf; } Mei it meitsjen fan de keppelings mei in frijwat ûnskuldige kleurskema soarget derfoar dat ik gjin ien fan 'e lessen ferjit, en makket se ek in lyts minder lûd as de standert blau, read en purple.Full Style Sheet
Hjir is it folsleine stylblêd:
@charset "utf-8"; html, body {margin: 0px; padding: 0px; border: 0px; kleur: # 000; eftergrûn: #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: besocht {kleur: # 009; } a: hover {kleur: # 06f; } a: aktyf {color: # 0cf; }