Ustvarite slog sloga CSS
Na enak način smo ustvarili ločeno besedilno datoteko za HTML, ustvarili boste besedilno datoteko za CSS. Če potrebujete vizualne elemente za ta postopek, si oglejte prvo vadnico. Tu so koraki za ustvarjanje slogovnega lista CSS v Beležnici:
- Izberite Datoteka> Novo v Beležnici, da dobite prazno okno
- Datoteko shranite kot CSS s klikom Datoteka
- Pomaknite se do mape my_website na trdem disku
- Spremeni "Shrani kot vrsto: "do"Vse datoteke"
- Poimenujte datoteko "styles.css"(pustite citate) in kliknite Shrani
Povežite slog sloga CSS s svojim HTML
Ko enkrat dobite slogovni list za svoje spletno mesto ga boste morali povezati s samo spletno stranjo. Za to uporabite oznako povezave. Naslednjo oznako povezave postavite kamor koli znotraj.
Popravite robove strani
Ko pišeš XHTML za različne brskalnike se boste naučili, da imajo vsi različne robove in pravila za prikaz stvari. Najboljši način, da se prepričate, da je vaše spletno mesto videti enako v večini brskalnikov, je, če stvari, kot so robovi, ne privzeto izberejo.
Strani raje začenjamo v zgornjem levem kotu, brez dodatnih oblazinjenj ali robov ob besedilu. Tudi če bomo vsebino podložili, nastavimo robove na nič, tako da začnemo z istim praznim listom. Če želite to narediti, dodajte naslednjemu dokumentu styles.css:
html, body {
marža: 0px;
oblazinjenje: 0px;
obroba: 0px;
levo: 0px;
zgoraj: 0px;
}
Spreminjanje pisave na strani
Pisava je pogosto prva stvar, ki jo boste želeli spremeniti na spletni strani. Privzeto pisave na spletni strani je lahko grd in je dejansko odvisen od samega spletnega brskalnika, zato, če ne določite pisave, res ne veste, kako bo videti vaša stran.
Običajno bi pisavo spremenili v odstavkih ali včasih v celotnem dokumentu. Za to spletno mesto bomo pisavo določili na ravni glave in odstavka. V dokument style.css dodajte naslednje:
p, li {
pisava: 1em Arial, Helvetica, sans-serif;
}
h1 {
pisava: 2em Arial, Helvetica, sans-serif;
}
h2 {
pisava: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
pisava: 1,25em Arial, Helvetica, sans-serif;
}
Začeli smo z 1em kot osnovno velikostjo odstavkov in elementov seznama, nato pa z njim nastavili velikost mojih naslovov. Ne pričakujemo, da bomo uporabili naslov globlje od h4, če pa nameravate, ga boste želeli tudi oblikovati.
Kako narediti svoje povezave bolj zanimive
Privzeti barvi povezav sta modra in vijolična za neobiskane in obiskane povezave. Čeprav je to običajno, morda ne ustreza barvni shemi vaših strani, zato ga spremenimo. V datoteko styles.css dodajte naslednje:
a: link {
družina pisav: Arial, Helvetica, sans-serif;
barva: # FF9900;
okrasitev besedila: podčrtano besedilo;
}
a: obiskal {
barva: # FFCC66;
}
a: hover {
ozadje: #FFFFCC;
teža pisave: krepko;
}
Nastavili smo tri sloge povezav, a: povezava je privzeta, a: obiskana, ko je bila obiskana, spremenimo barvo in a: hover. Z: hover imamo povezavo, ki dobi barvo ozadja in krepko poudari, da je povezava, ki jo je treba klikniti.
Oblikovanje odseka za krmarjenje
Ker smo razdelek za navigacijo (id = "nav") najprej postavili v HTML, ga najprej oblikujmo. Navesti moramo, kako širok naj bo, in na desni strani postaviti širši rob, da se glavno besedilo ne bo udarilo. mi tudi postavimo obrobo okoli nje.
V dokument style.css dodajte naslednji CSS:
#nav {
širina: 225px;
rob desno: 15 slikovnih pik;
obroba: srednje trdna # 000000;
}
#nav li {
slog seznama: noben;
}
.footer {
velikost pisave: .75em;
jasno: oboje;
širina: 100%;
poravnava besedila: sredina;
}
Lastnost sloga seznama nastavi seznam znotraj odseka za krmarjenje tako, da ne vsebuje krogel ali številk, .footer pa oblikuje razdelek z avtorskimi pravicami, da je manjši in centriran znotraj odseka.
Pozicioniranje glavnega odseka
Če svoj glavni odsek postavite z absolutnim pozicioniranjem, ste lahko prepričani, da bo ostal točno tam, kjer želite, da ostane na vaši spletni strani. Spremenili smo ga v širino 800 slikovnih pik večji monitorji, če pa imate manjši monitor, ga boste morda želeli ožiti.
V dokument style.css vstavite naslednje:
#main {
širina: 800px;
zgoraj: 0px;
položaj: absolutno;
levo: 250 slikovnih pik;
}
Oblikovanje odstavkov
Ker sem zgoraj že nastavil pisavo odstavka, sem želel vsakemu odstavku dati še malo dodatnega utripa, da bo bolje izstopal. To sem naredil tako, da sem na vrh postavil obrobo, ki je poudarila odstavek več kot samo sliko.
V dokument style.css vstavite naslednje:
.Zgornja vrstica {
rob-zgoraj: debela trdna snov # FFCC00;
}
Odločili smo se, da bomo to storili kot razred, imenovan "topline", namesto da bi samo tako definirali vse odstavke. Na ta način, če se odločimo, da želimo imeti odstavek brez zgornje rumene črte, lahko preprosto pustimo class = "topline" v oznaki odstavka in ne bo imel zgornje obrobe.
Oblikovanje slik
Slike imajo običajno obrobo okoli sebe, to ni vedno vidno, razen če je slika povezava, vendar imamo radi razred v Tabela stilov CSS, ki samodejno izklopi obrobo. Za ta slogovni list smo ustvarili razred "noborder" in večina slik v dokumentu je del tega razreda.
Drugi poseben del teh slik je njihova lokacija na strani. Želeli smo, da so del odstavka, v katerem so, ne da bi jih uporabili tabele za njihovo poravnavo. To najpreprosteje naredimo z uporabo lastnosti float CSS.
V dokument style.css vstavite naslednje:
#main img {
plovec: levo;
rob desno: 5 slikovnih pik;
margin-bottom: 15 slikovnih pik;
}
.noborder {
obroba: 0 slikovnih pik nobena;
}
Kot lahko vidite, so na slikah nastavljene tudi lastnosti robov, ki zagotavljajo, da niso zdrobljene ob plavajočem besedilu, ki je poleg njih v odstavkih.
Zdaj si oglejte svojo zaključeno stran
Ko shranite CSS, lahko v spletnem brskalniku znova naložite stran pets.htm. Vaša stran bi morala biti podobna tisti, prikazani na tej sliki, s poravnanimi slikami in pravilno nameščeno navigacijo na levi strani.
Sledite istim korakom za vse vaše notranje strani za to spletno mesto. Za vsako stran v navigaciji želite imeti eno stran.