01/10
Luo CSS tyyliarkki
Samalla tavalla kuin luot HTML-tekstitiedosto, luot tekstitiedoston CSS: lle. Jos tarvitset ulkoasua tässä prosessissa, katso ensimmäinen opetusohjelma. Tässä on vaiheet, joiden avulla voit luoda CSS-tyylitiedostoasi Notepadissa:
- Valitse tyhjä tiedostoikkuna valitsemalla Tiedosto> Uusi muistiossa
- Tallenna tiedosto CSS: ksi napsauttamalla Tiedosto
- Siirry kiintolevyn my_website-kansioon
- Muuta "Tallenna nimellä -tyyppi" -asetukseksi "Kaikki tiedostot"
- Nimeä tiedostosi "styles.css" (hylkää tarjoukset) ja napsauta Tallenna
02/10
Linkitä CSS Style Sheet HTML-muotoon
Kun sinulla on Web-sivustosi tyylitiedosto, sinun on yhdistettävä se itse verkkosivulle. Voit tehdä tämän käyttämällä linkkitunnistetta. Aseta seuraava linkitunniste missä tahansa pets.htm-asiakirjan
-tunnisteissa:03/10
Korjaa sivun marginaalit
Kun kirjoitat XHTMLia eri selaimille, yksi asia, josta opit, on se, että kaikilla näyttää olevan erilaisia marginaaleja ja sääntöjä siitä, miten ne näyttävät asioita. Paras tapa varmistaa, että sivustosi näyttää samalta useimmissa selaimissa on estää marginaalien oletusasetukset selainvalintaan.
Haluan aloittaa sivuni vasemmassa yläkulmassa, ilman tekstiä ympäröivä ylimääräinen pehmuste tai marginaali. Vaikka aioin pudottaa sisältöä, asetan marginaalit nollaksi niin, että aloitan samalla tyhjällä liuskalla. Voit tehdä tämän lisäämällä styles.css -asiakirjaan seuraavat:
html, body {
marginaali: 0px;
pehmuste: 0px;
raja: 0px;
vasen: 0px;
alkuun: 0px;
}
04/10
Fontin muuttaminen sivulla
Fontti on usein ensimmäinen asia, jonka haluat muuttaa Web-sivulla. Web-sivun oletusfontti voi olla ruma, ja se on itse asiassa itse web-selaimen yläpuolella, joten jos et määritä fonttia, et todellakaan tiedä, miltä sivu näyttäisi.
Tyypillisesti muutat fonttia kappaleissa tai joskus koko asiakirjassa. Tätä sivustoa varten määritellään fontti otsikossa ja kappaleessa. Lisää styles.css -asiakirjaan seuraava:
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;
}
Aloitin 1em: llä peruskokoon kohdissa ja listan kohteissa ja käytin sen jälkeen määrittämään otsikoiden koon. En odota käyttävän otsikkoa syvemmältä kuin h4, mutta jos aiot haluamasi tyylin myös.
05/10
Linkkien tekeminen mielenkiintoisemmaksi
Linkkien oletusvärit ovat sinisiä ja violetteja epärepatuille ja vieraileville linkkeille. Vaikka tämä on tavallista, se ei välttämättä sovi sivusi värimalleksi, joten vaihdetaan se. Lisää styles.css-tiedostoosi seuraavasti:
linkki {
fonttiperhe: Arial, Helvetica, sans-serif;
väri: # FF9900;
teksti-decoration: underline;
}
a: vieraili {
väri: # FFCC66;
}
a: hover {
tausta: #FFFFCC;
font-weight: bold;
}
Asensin kolme linkkityyliä, a: linkin oletuksena, a: vierailun, kun sitä on käynyt, muutan väriä ja a: hover. Kanssa: hover Olen linkki saada taustaväri ja mennä rohkeasti korostaa, että linkki napsautetaan.
06/10
Navigointisivun muotoilu
Koska asetamme navigointisuunnitelma (id = "nav") ensin HTML: ssä, olkaamme ensin tyyli. Meidän on ilmoitettava, kuinka laajaa on, ja asetettava laajempi marginaali oikealle puolelle, jotta pääteksti ei kaaduisi sitä vastaan. Laitoin myös reunuksen ympärille.
Lisää seuraava CSS styles.css -asiakirjaan:
#nav {
leveys: 225px;
marginaali-oikea: 15px;
raja: keskikokoinen # 000000;
}
#nav li {
list-style: none;
}
.alatunniste {
font-size: .75em;
Tyhjennä molemmat;
leveys: 100%;
teksti-align: center;
}
Luettelon tyyppinen ominaisuus määrittää navigointiosion sisältämän luettelon, jolla ei ole luoteja tai numeroita, ja .footerin tekijänoikeusosa on pienempi ja keskitetty osioon.
07/10
Pääosan sijoittaminen
Asemalla pääosasi absoluuttiseen sijaintiin voit olla varma, että se pysyy tarkalleen missä haluat sen pysymään Web-sivulla. Tein 800px: n leveän tilan suurempien näyttöjen vastaanottamiseen, mutta jos sinulla on pienempi näyttö, voit tehdä sen kapeammaksi.
Aseta seuraava tyyli.css -asiakirja:
#main {
leveys: 800px;
alkuun: 0px;
asema: absoluuttinen;
vasen: 250px;
}
08 of 10
Suunnittele kappaleitasi
Koska olen jo asettanut kappaleen fontin yllä, halusin antaa jokaiselle kappaleelle hieman ylimääräisen "potkun", jotta se erottuu paremmaksi. Tein tämän asettamalla yläreunan reunan, joka korosti kappaleen muutakin kuin pelkkää kuvaa.
Aseta seuraava tyyli.css -asiakirja:
.kärkilinja {
raja-top: paksu kiinteä # FFCC00;
}
Päätin tehdä sen luokaksi, jota kutsuttiin "yläluokaksi" eikä vain määrittelemällä kaikki kappaleet tällä tavoin. Tällä tavoin, jos päätän haluan saada kohdan, jossa ei ole keltaista keltaista viivaa, voin vain jättää luokan tunnuksen "yläviivan" otsikkotunnisteeseen eikä siinä ole ylärajaa.
09/10
Kuvien muotoilu
Kuvat ovat tyypillisesti reunoja ympäröivä, tämä ei ole aina näkyvissä, ellei kuva ole linkki, mutta haluan saada luokan CSS-tyylitaulukkoani, joka katkaisee rajan automaattisesti. Tätä tyylitaulukkoa varten luotiin "noborder" -luokka, ja suurin osa asiakirjan kuvista kuuluu tähän luokkaan.
Toinen erityinen osa näistä kuvista on niiden sijainti sivulla. Halusin, että heidät olisivat osana kappaleita, joissa he käyttivät taulukoita, jotta heitä voitaisiin mukauttaa. Yksinkertaisin tapa tehdä tämä on käyttää float CSS-ominaisuutta.
Aseta seuraava tyyli.css -asiakirja:
#main img {
float: vasen;
marginaali-oikea: 5px;
marginaalipohja: 15px;
}
.noborder {
raja: 0px ei yhtään;
}
Kuten näette, kuviin on asetettu marginaaliominaisuuksia, jotta varmistetaan, että ne eivät ole pilkattuna kappaleiden vieressä olevaan kelluvaan tekstiin nähden.
10/10
Katso nyt valmis sivuasi
Kun olet tallentanut CSS: n, voit ladata pets.htm-sivun verkkoselaimellasi. Sivusi pitäisi näyttää samanlaiselta kuin tässä kuvassa näkyvä, kuvien kohdalla ja navigointi on sijoitettu oikein sivun vasemmalle puolelle.
Noudata samoja ohjeita kaikille sivustosi sisäisille sivuille. Sinulla on yksi sivu jokaiselle navigointisivusi sivulle.