Luo CSS-tyylitaulukko
Samalla tavalla loimme erillisen tekstitiedoston HTML, luodaan tekstitiedosto CSS: lle. Jos tarvitset visualisointia tähän prosessiin, katso ensimmäinen opetusohjelma. Tässä on vaiheet CSS-tyylisivun luomiseen Muistioon:
- Valita Tiedosto> Uusi Muistiossa saada tyhjä ikkuna
- Tallenna tiedosto CSS-tiedostona napsauttamalla Tiedosto
- Siirry kiintolevyn kansioon my_website
- Muuta "Tallenna tyyppi: "kohteeseen"Kaikki tiedostot"
- Nimeä tiedosto "styles.css"(jätä lainausmerkit pois) ja napsauta Tallentaa
Linkitä CSS-tyylitaulukko HTML-koodiin
Kun sinulla on tyylilehti verkkosivustollesi, sinun on liitettävä se itse verkkosivuun. Voit tehdä tämän käyttämällä linkkitunnistetta. Sijoita seuraava linkkitagi mihin tahansa.
Korjaa sivumarginaalit
Kun kirjoitat XHTML eri selaimille yksi asia, jonka opit, on, että kaikilla näyttää olevan erilaiset marginaalit ja säännöt asioiden esittämisestä. Paras tapa varmistaa, että sivustosi näyttää samalta useimmissa selaimissa, on olla sallimatta marginaalien kaltaisten asetusten tekeminen selaimen valinnan mukaan.
Aloitamme mieluummin sivut vasemmassa yläkulmassa ilman tekstiä ympäröivää ylimääräistä täytettä tai marginaalia. Vaikka aiotaan täyttää sisältöä, asetamme marginaalit nollaksi niin, että aloitamme samalla tyhjällä taululla. Voit tehdä tämän lisäämällä seuraavan tyylisi.css-asiakirjaan:
html, body {
marginaali: 0px;
pehmuste: 0px;
reunus: 0px;
vasen: 0px;
yläosa: 0px;
}
Sivun fontin vaihtaminen
Kirjasin on usein ensimmäinen asia, jonka haluat muuttaa verkkosivulla. Oletusarvo fontti verkkosivulla voi olla ruma ja riippuu itse asiassa verkkoselaimesta, joten jos et määritä kirjasinta, et todellakaan tiedä miltä sivusi näyttää.
Yleensä vaihdat kappaleen tai joskus koko asiakirjan fontin. Tälle sivustolle määritämme fontin otsikko- ja kappaletasolla. Lisää seuraava tyylisi.css-asiakirjaan:
p, li {
fontti: 1em Arial, Helvetica, sans-serif;
}
h1 {
fontti: 2em Arial, Helvetica, sans-serif;
}
h2 {
fontti: 1,5em Arial, Helvetica, sans-serif;
}
h3 {
fontti: 1.25em Arial, Helvetica, sans-serif;
}
Aloitimme kappaleesta ja luettelokohteista peruskoolla 1em ja käytimme sitten sitä otsikoiden koon asettamiseen. Emme odota käyttävänsä otsikkoa syvempää kuin h4, mutta jos aiot tehdä sen, sinun tulee myös muotoilla se.
Linkkien tekeminen mielenkiintoisemmaksi
Linkkien oletusvärit ovat sininen ja violetti vierailemattomille ja vierailemille linkeille. Vaikka tämä on vakio, se ei välttämättä sovi sivujesi väreihin, joten vaihdetaan se. Lisää seuraavat: tyylisi.css-tiedostoon:
linkki {
fonttiperhe: Arial, Helvetica, sans-serif;
väri: # FF9900;
tekstikoristelu: alleviivaus;
}
a: vieraili {
väri: # FFCC66;
}
a: vie hiiri {
tausta: #FFFFCC;
fontin paino: lihavoitu;
}
Asetimme kolme linkkityyliä, a: link oletukseksi, a: vierailu, kun siellä käydään, vaihdamme väriä ja a: hover. Kun: hiiren osoitin, linkki saa taustavärin ja rohkeasti korostaaksesi, että se on napsautettava linkki.
Navigointiosan muotoilu
Koska laitamme navigointi (id = "nav") -osan HTML-koodiin ensimmäiseksi, muotoillaan ensin se. Meidän on ilmoitettava, kuinka leveä sen pitäisi olla, ja laittaa leveämpi marginaali oikealle puolelle, jotta pääteksti ei törmää sitä vastaan. me myös laitamme sen ympärille rajan.
Lisää seuraava CSS tyylisi.css-asiakirjaan:
#nav {
leveys: 225px;
marginaali oikea: 15 kuvapistettä;
reunus: keskikokoinen kiinteä # 000000;
}
#nav li {
list-style: ei mitään;
}
.alatunniste {
kirjasinkoko: .75em;
Tyhjennä molemmat;
leveys: 100%;
tekstin tasaus: keskellä;
}
Luettelotyylinen ominaisuus asettaa luettelon navigointiosan sisäpuolelle siten, ettei siinä ole luettelomerkkejä tai numeroita, ja .footer tyylittää tekijänoikeusosan pienemmäksi ja keskitetyksi osioon.
Pääosan sijoittaminen
Sijoittamalla pääosasi absoluuttisella sijainnilla voit olla varma, että se pysyy verkkosivustollasi juuri siinä missä haluat. Teimme sen 800px leveäksi suuremmat näytöt, mutta jos sinulla on pienempi näyttö, kannattaa ehkä tehdä siitä kapeampi.
Lisää seuraava tyylisi.css-asiakirjaan:
#main {
leveys: 800px;
yläosa: 0px;
sijainti: absoluuttinen;
vasen: 250px;
}
Kappaleiden muotoilu
Koska olen jo asettanut kappaleen kirjasimen yllä, halusin antaa jokaiselle kappaleelle hieman ylimääräisen "potkun", jotta se erottuu paremmin. Tein tämän asettamalla ylhäältä reunan, joka korosti kappaletta enemmän kuin pelkkä kuva.
Lisää seuraava tyylisi.css-asiakirjaan:
.kärkilinja {
reunan yläosa: paksu kiinteä # FFCC00;
}
Päätimme tehdä sen luokana, jonka nimi on "ylälinja", eikä vain määritellä kaikkia kappaleita tällä tavalla. Tällä tavalla, jos päätämme, että haluamme kappaleen ilman ylintä keltaista viivaa, voimme yksinkertaisesti jättää pois luokan = "ylälinja" kappaletagista, eikä sillä ole yläreunaa.
Kuvien muotoilu
Kuvien ympärillä on yleensä reunus, tämä ei ole aina näkyvissä, ellei kuva ole linkki, mutta haluamme, että luokassa on CSS-tyylitaulukko, joka poistaa rajan automaattisesti käytöstä. Tätä tyylitaulukkoa varten olemme luoneet "noborder" -luokan, ja suurin osa asiakirjan kuvista on osa tätä luokkaa.
Näiden kuvien toinen erityinen osa on niiden sijainti sivulla. Halusimme heidän olevan osa kappaletta, jossa he olivat, käyttämättä taulukoita niiden kohdistamiseksi. Yksinkertaisin tapa tehdä tämä on käyttää float CSS -ominaisuutta.
Lisää seuraava tyylisi.css-asiakirjaan:
#maailma img
kellua: vasen;
marginaali oikea: 5 kuvapistettä;
alareuna: 15 kuvapistettä;
}
.noborder {
reunus: 0 kuvapistettä ei ole;
}
Kuten näette, kuviin on asetettu myös marginaaliominaisuuksia varmistaakseen, että niitä ei murtaisi kappaleiden vieressä olevaan kelluneeseen tekstiin.
Katso nyt valmis sivusi
Kun olet tallentanut CSS: n, voit ladata pets.htm-sivun uudelleen selaimeesi. Sivusi tulisi näyttää samanlaiselta kuin tässä kuvassa, kuvien ollessa kohdistettu ja navigointi sijoitettu oikein sivun vasemmalle puolelle.
Noudata näitä samoja ohjeita tämän sivuston kaikilla sisäisillä sivuillasi. Haluat, että navigointisi jokaisella sivulla on yksi sivu.