01 of 10
Set it CSS-stylblêd
Op deselde wize meitsje wy in apart teksttriem foar it HTML, jo meitsje in tekstbestân foar de CSS. As jo keunst foar dit proses nedich binne, sjoch it earste tutorial. Hjir binne de stappen om jo stylblêd CSS yn notysjes te kreëarjen:
- Kies bestân> Nije yn Notepad om in lege finster te krijen
- Besparje it bestân as CSS troch te klikken op bestân
- Navigearje nei de map my_website op jo hurde skiif
- Feroarje as "Tafoegje as tip:" nei "Alle bestannen"
- Namme jo triem "styles.css" (gean fan 'e quotes) en klik op Bewarje
02 of 10
Keppelje de CSS-stylblêd nei jo HTML
As jo in stylblêd hawwe foar jo webside, moatte jo it oan de webside sels oanslute. Om dit te dwaan brûke jo de link tag. Plak it folgjende linktag oeral yn 'e
tags fan jo pets.htm-dokumint:03 of 10
Bewurkje de rigels
As jo XHTML skriuwe foar ferskate browsers, dan is ien ding dat jo learje is dat se allegear ferskillende rânen hawwe en regels foar hoe't se dingen sjen. De bêste manier om te wis te wêzen dat jo side itselde yn 'e measte browsers deselde docht is om dingen as marginen net standert te meitsjen foar de browserskialiteit.
Ik leaver it foarkommen fan myn siden yn 'e boppeste linke hoeke, sûnder ekstra padding of marzje om de tekst hinne. Sels as ik de ynhâld ynhâlde sil ik de marten oan nul sette, dat ik begjin mei deselde lege skuorre. Om dit te dwaan, taheakje de folgjende oan jo styles.css dokumint:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
left: 0px;
top: 0px;
}
04 of 10
Feroarje de lettertype op 'e side
It lettertype is faak it earste ding dat jo wizigje wolle op in webside. It standertlettertafel op in webside kin ûnsjoch wêze, en is eigentlik de web browser sels, dus as jo de lettertyp net bepale, jo sille noait net witte wat jo side liket.
Typysk wizigje jo it lettertype op paragrafen, of soms op it hiele dokumint sels. Foar dizze side sjogge wy it lettertype op it header en it paragraafnivo. Foegje de folgjende ta oan jo styles.css dokumint:
p, li {
letter: 1em Arial, Helvetica, sans-serif;
}
h1 {
letter: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Ik begon mei 1em as myn basisgrutte foar paragrafen en list items, en brûkte dan dat de grutte foar myn headlines te setten. Ik hoopje dat ik gjin koptekst djipper brûkt as h4, mar as jo plannen hawwe, wolle jo it ek wolle.
05 of 10
Ferwiderje jo links mear interessant
De standertkleuren foar keppelingen binne blau en lila foar ûnbeskikte en besochte keppelings. Hoewol dit standaard is, kin it kleurskema fan jo siden net passe, dus litte wy it feroarje. Yn jo styles.css-bestân taheakje de folgjende:
a: link {
font-family: Arial, Helvetica, sans-serif;
kleur: # FF9900;
tekst-dekoraasje: ûnderline;
}
a: besocht {
kleur: # FFCC66;
}
a: hover {
eftergrûn: #FFFFCC;
font-weight: bold;
}
Ik sette trije keppeling stilen, de a: keppeling as standert, in: besykje foar wannear't it besocht is, ik feroarje de kleur en in: hover. Mei in: hover haw ik de keppeling in eftergrûnkleur krije en gean fet om te betinken dat it in keppeling is te klikken.
06 of 10
Styling fan de navigaasje seksje
Om't wy de navigaasje (id = "nav") paragraaf earst yn 'e HTML sette, litte wy it earst styl meitsje. Wy moatte oanjaan hoe't it breed wêze moat en in breedere marre oan 'e rjochterkant sette, sadat de haadtriem der net op stiet. Ik sette ek in grins om.
Foegje de folgjende CSS oan jo styles.css dokumint:
#nav {
width: 225px;
margin-right: 15px;
border: medium solid # 000000;
}
#nav li {
liststyl: gjin;
}
.footer {
font-size: .75em;
klar: beide;
breed: 100%;
tekst-align: sintrum;
}
It eigendom fan listlist stelt de list yn 'e navigaasjesyndieling om gjin kûlen of getallen te hawwen, en de .footer stilen de copyright sekere lytser en sintraal binnen de seksje.
07 of 10
Bestjoeren fan 'e Haaddiel
Troch jo haadpartij op te rjochtsjen mei absolute posysjeing kinne jo der wis fan wêze dat it krekt wêr't jo wolle dat jo op jo webside bliuwe. Ik makke myn 800px breed om gruttere monitoaren te bemachtigjen, mar as jo in lyts monitor hawwe, dan kinne jo dat slimmer meitsje.
Plak it folgjende yn jo styles.css-dokumint:
#main {
width: 800px;
top: 0px;
posysje: absolute;
links: 250px;
}
08 of 10
Styling jo paragrafen
Omdat ik al de paragraaf boppe-op set haw, woe ik elke paragraaf in bytsje ekstra "kick" jaan om it better te meitsjen. Ik ha dat dien troch in grins te lizzen op 'e top dy't de paragraaf mear as just it byld markearret.
Plak it folgjende yn jo styles.css-dokumint:
.topline {
border-top: dikke fêste # FFCC00;
}
Ik beslute it te dwaan as in klasse dy't "topline" neamd is, net allinich de alinea's op dizze manier te definiearjen. Op dizze manier, as ik beslút, ik wol in paragraaf hawwe sûnder in boppe-giele line, kin ik gewoanwei de klasse = "topline" yn 'e paragraaf stean en it sil de toprâne net hawwe.
09 of 10
Styling fan 'e ôfbyldings
Ofbyldings hawwe meast in grins om har hinne, dit is net altyd sichtber, útsein it ôfbylding is in keppeling, mar ik ha in klasse yn 'e CSS-stylblêd dy't de grins automatysk útbrekt. Foar dit stylblêd makke ik de klasse "noarder", en de measte fan 'e ôfbyldings yn it dokumint binne diel fan dizze klasse.
It oare spesjale diel fan dizze bylden is har lokaasje op 'e side. Ik woe dat se in diel fan 'e paragraaf wêze dat se yn' t gebrûk hawwe sûnder tafels te brûken om se te rjochtsjen. De ienfâldichste manier om dit te dwaan is it float CSS eigendom te brûken.
Plak it folgjende yn jo styles.css-dokumint:
#main img {
float: lofts;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px none;
}
As jo sjogge, binne der ek marige eigenskippen op 'e ôfbyldings set, om derfoar te soargjen dat se net opnommen binne tsjin de floatde tekst dy't njonken har yn de paragrafen is.
10 of 10
No sjoch op jo kompleetse side
As jo jo CSS bewarre hawwe, kinne jo de pets.htm-side yn jo webbrowser oplosse. Jo side moat soensblikke sjogge nei de ien dy't op dit plaatsje stiet, mei ôfbyldings opljochte en de navigaasje goed pleatst op 'e lofter side fan' e side.
Folgje dizze deselde treppen foar al jo ynterne siden foar dizze side. Jo wolle ien side foar elke side hawwe yn jo navigaasje.