01 van 10
Skep die CSS-stylblad
Net soos ons 'n afsonderlike tekslêer vir die HTML geskep het, sal u 'n tekslêer vir die CSS skep. As u visuele beelde benodig vir hierdie proses, raadpleeg asseblief die eerste handleiding. Hier is die stappe om jou CSS-stylblad in Notepad te skep:
- Kies Lêer> Nuut in Notepad om 'n leë venster te kry
- Stoor die lêer as CSS deur op File
- Gaan na die gids my_webwerf op jou hardeskyf
- Verander die "Stoor as Tipe:" na "Alle lêers"
- Noem jou lêer "styles.css" (verlaat die aanhalings) en klik op Stoor
02 van 10
Koppel die CSS-stylblad na u HTML
Sodra jy 'n stylblad vir jou webwerf het, moet jy dit aan die webblad self koppel. Om dit te doen gebruik jy die skakel tag. Plaas die volgende skakel-tag enige plek in die
-kodes van jou pets.htm-dokument:03 van 10
Stel die kantlynmarges vas
As jy XHTML vir verskillende blaaiers skryf, is een ding wat jy sal leer, dat hulle almal verskillende marges en reëls het vir hoe hulle dinge vertoon. Die beste manier om seker te wees dat jou werf in die meeste blaaiers dieselfde lyk, is dat dit nie toelaat dat dinge soos marges op die leser se keuse verstek is nie.
Ek verkies om my bladsye in die linker boonste hoek te begin, sonder ekstra vulling of marge rondom die teks. Selfs al gaan ek die inhoud inslaan, stel ek die marges nul sodat ek met dieselfde leë leisteen begin. Om dit te doen, voeg die volgende by jou style.css-dokument:
html, liggaam {
marge: 0px;
vulling: 0px;
grens: 0px;
links: 0px;
bo: 0px;
}
04 van 10
Die font verander op die bladsy
Die font is dikwels die eerste ding wat jy op 'n webblad wil verander. Die standaard font op 'n webblad kan lelik wees en is eintlik op die webblaaier self. As jy dus nie die font definieer nie, sal jy regtig nie weet hoe jou bladsy sal lyk nie.
Tipies sal jy die skrif op paragrawe verander, of soms op die hele dokument self. Vir hierdie webwerf definieer ons die lettertipe op die kop- en paragraafvlak. Voeg die volgende by jou style.css-dokument:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Ek het begin met 1em as my basis grootte vir paragrawe en lysitems, en dan gebruik dit om die grootte vir my opskrifte te stel. Ek verwag nie om 'n kop wat dieper is as h4 te gebruik nie, maar as jy beplan, sal jy dit ook wil stileer.
05 van 10
Maak jou skakels meer interessant
Die verstek kleure vir skakels is onderskeidelik blou en pers vir onbesoekte en besoekte skakels. Terwyl dit standaard is, pas dit dalk nie by die kleurskema van jou bladsye nie, dus laat ons dit verander. Voeg jou volgende in jou style.css-lêer by:
a: skakel {
font-familie: Arial, Helvetica, sans-serif;
kleur: # FF9900;
teks-versiering: onderstreep;
}
a: besoek {
kleur: # FFCC66;
}
a: sweeftuig {
agtergrond: #FFFFCC;
font-weight: bold;
}
Ek het drie skakelstyle opgestel, die a: skakel as die standaard, a: besoek vir wanneer dit besoek is, ek verander die kleur en a: hover. Met 'n: hover ek het die skakel kry 'n agtergrond kleur en gaan vet om te beklemtoon dit is 'n skakel om geklik te word.
06 van 10
Styl die navigasie afdeling
Aangesien ons die navigasie-afdeling (id = "nav") eerste in die HTML plaas, laat ons dit eers styl. Ons moet aandui hoe wyd dit moet wees en sit 'n groter marge aan die regterkant sodat die hoof teks nie daaraan sal stamp nie. Ek het ook 'n grens daar rondom gesit.
Voeg die volgende CSS by jou style.css-dokument:
#nav {
breedte: 225px;
marge-regs: 15px;
grens: medium vaste # 000000;
}
#nav li {
lys-styl: geen;
}
.footer {
lettergrootte: .75em;
duidelik: albei;
breedte: 100%;
teks-belyning: sentrum;
}
Die lysstyl-eiendom stel die lys in die navigasiestelsel op om geen kolletjies of nommers te hê nie, en die .footer-style moet die kopiereg afdeling kleiner en gesentreerd wees in die afdeling.
07 van 10
Posisionering van die hoofafdeling
Deur u hoofafdeling met absolute posisionering te posisioneer, kan u seker wees dat dit presies bly waar u dit op u webblad wil bly. Ek het my 800px wyd gemaak om groter skerms te akkommodeer, maar as jy 'n kleiner monitor het, wil jy dit dalk smaller maak.
Plaas die volgende in jou style.css-dokument:
#main {
breedte: 800px;
bo: 0px;
posisie: absolute;
links: 250px;
}
08 van 10
Styleer jou paragrawe
Aangesien ek al die paragraafletter hierbo gesit het, wou ek elke paragraaf 'n bietjie ekstra "kick" gee om dit beter uit te beeld. Ek het dit gedoen deur 'n rand op die bokant te plaas wat die paragraaf meer as net die beeld alleen uitgelig het.
Plaas die volgende in jou style.css-dokument:
.boonste lyn {
grens-top: dik soliede # FFCC00;
}
Ek het besluit om dit te doen as 'n klas wat "topline" genoem word eerder as om al die paragrawe só te definieer. Op hierdie manier, as ek besluit om 'n paragraaf sonder 'n boonste geel lyn te hê, kan ek eenvoudig die klas = "topline" in die paragraafsteken los en dit sal nie die boonste grens hê nie.
09 van 10
Styling van die prente
Prente het gewoonlik 'n rand om hulle, dit is nie altyd sigbaar nie, tensy die prent 'n skakel is, maar ek hou daarvan om 'n klas te hê in my CSS-styleblad wat die grens outomaties afskakel. Vir hierdie styleblad het ek die klas "noborder" geskep, en die meeste van die beelde in die dokument is deel van hierdie klas.
Die ander spesiale deel van hierdie beelde is hul ligging op die bladsy. Ek wou hê hulle moes deel wees van die paragraaf waarin hulle was, sonder om tabelle te gebruik om hulle in lyn te bring. Die eenvoudigste manier om dit te doen is om die CSS-eiendom te gebruik.
Plaas die volgende in jou style.css-dokument:
#main img {
dryf: links;
marge-regs: 5px;
marge-bodem: 15px;
}
.noborder {
grens: 0px geen;
}
Soos u kan sien, is daar ook marge eienskappe wat op die beelde gestel word, om seker te maak dat hulle nie verswak word teen die swaai teks wat langs hulle in die paragrawe is nie.
10 van 10
Kyk nou na jou voltooide bladsy
Sodra jy jou CSS gestoor het, kan jy die pets.htm bladsy herlaai in jou webblaaier. Jou bladsy moet soortgelyk wees aan die een wat in hierdie foto gewys word, met beelde wat in lyn is en die navigasie korrek aan die linkerkant van die bladsy aangebring word.
Volg hierdie selfde stappe vir al jou interne bladsye vir hierdie webwerf. U wil een bladsy vir elke bladsy in u navigasie hê.