Styling beležnico ustvarili spletno stran s CSS

01 od 10

Ustvarite CSS slog

Enako smo ustvarili ločeno besedilno datoteko za HTML, ustvarili boste besedilno datoteko za CSS. Če potrebujete vizualne podatke za ta postopek, si oglejte prvi vadnik. Tukaj so koraki za izdelavo vašega slogovega stila CSS v beležnici:

1. Izberite File> New in Notepad, da dobite prazno okno
2. Shranite datoteko kot CSS tako, da kliknete Datoteka
3. Pojdite na mapo my_website na trdem disku
4. Spremenite "Shrani kot vrsto:" v "Vse datoteke"
5. Poimenujte svojo datoteko "styles.css" (pustite ponudbe) in kliknite Shrani

02 od 10

Povežite slog pisave CSS s svojim HTML-jem

Ko imate spletno stran s slogovnico, jo boste morali povezati s spletno stranjo. Če želite to narediti, uporabite povezavo. Postavite naslednjo povezavo z oznako kjerkoli v oznakah vaših domačih živali.htm:

03 od 10

Popravite robove strani

Ko pišete XHTML za različne brskalnike, je ena stvar, ki jo boste izvedeli, da imajo vsi vsi različni robovi in ​​pravila za prikazovanje stvari. Najboljši način, da se prepričate, ali je v večini brskalnikov videti enako, je, da ne dovolite, da bi stvari, kot so robovi, privzele izbire brskalnika.

Raje začnem stran v zgornjem levem kotu, brez dodatne oblike ali robov, ki obkroža besedilo. Tudi če bom vseboval vsebino, sem določil robove na nič, tako da začenjam z istim praznim skrilavcem. Če želite to narediti, v dokument styles.css dodajte naslednje:

html, body {
margin: 0px;
padding: 0px;
border: 0px;
levo: 0px;
na vrh: 0px;
}

04 od 10

Spreminjanje pisave na strani

Pisava je pogosto prva stvar, ki jo boste želeli spremeniti na spletni strani. Privzeta pisava na spletni strani je lahko grda in dejansko je zgornji spletni brskalnik, zato če ne določite pisave, res ne boste vedeli, na kakšna bo vaša stran.

Običajno bi spremenili pisavo na odstavkih ali včasih na celoten dokument sam. Za to spletno mesto bomo določili pisavo na ravni glave in odstavka. V dokument styles.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čel sem z 1em kot osnovno velikost za odstavke in elemente seznama, nato pa sem uporabil to, da nastavim velikost mojih naslovov. Ne pričakujem, da bi uporabil naslov globlje od h4, če pa načrtujete, boste tudi želeli slog.

05 od 10

Making vaše povezave bolj zanimivo

Privzete barve za povezave so modre in vijolične za neobvezne in obiskane povezave. Medtem ko je to standard, morda ne ustreza barvni shemi vaših strani, zato jo spremenimo. V datoteki styles.css dodajte naslednje:

a: link {
font-family: Arial, Helvetica, sans-serif;
barva: # FF9900;
tekst-dekoracija: podčrtaj;
}
a: obiskali {
barva: # FFCC66;
}
a: hover {
ozadje: #FFFFCC;
font-weight: bold;
}

Nastavil sem tri sloge povezav, a: povezavo kot privzeto, a: obiskan, ko je bil obiskan, spreminjam barvo in: lebdijo. Z: hoverjem imam povezavo dobiti barvo ozadja in ostati krepko, da poudarim, da je povezava, ki jo želite klikniti.

06 od 10

Styling Navigation Section

Ker smo razdelek za navigacijo (id = "nav") najprej v HTML, ga najprej slišimo. Navesti moramo, kako širok mora biti in na desni strani dati širši rob, da se glavno besedilo ne bo zoperstavilo temu. Postavil sem tudi mejo okoli njega.

V svoj styles.css dodajte naslednji CSS:

#nav {
širina: 225px;
margin-right: 15px;
meja: srednje trdna # 000000;
}
#nav li {
slog seznama: nič;
}
.footer {
velikost pisave: .75em;
jasno: oboje;
širina: 100%;
poravnava besedila: center;
}

Lastnost lastnosti seznama nastavi seznam znotraj razdelka za krmarjenje, da ni nobenih oznak ali številk, in .footer slogi o avtorskih delih, ki je manjši in centriran znotraj razdelka.

07 od 10

Postavitev glavnega oddelka

S pozicioniranjem glavnega dela z absolutno pozicioniranjem ste lahko prepričani, da bo ostalo točno tam, kjer želite, da ostane na vaši spletni strani. Naredil sem 800 palic širok za namestitev večjih monitorjev, vendar če imate manjši monitor, boste morda želeli, da ožji.

V dokumentu styles.css vnesite naslednje:

#main {
širina: 800px;
na vrh: 0px;
položaj: absolutno;
levo: 250px;
}

08 od 10

Oblikovanje vaših odstavkov

Ker sem že določil zgornjo pisavo odstavka, sem želel vsakemu odstavku dati malo dodatnega "udarca", da bi se bolje iztegnil. To sem storil tako, da je na vrhu postavil mejo, ki je poudaril odstavek bolj kot samo sliko.

V dokumentu styles.css vnesite naslednje:

.Zgornja vrstica {
meja-zgornja: debela trdna # FFCC00;
}

Odločil sem se, da to storim kot razred, imenovan "topline", namesto da bi tako opredelil vse odstavke na ta način. Na ta način, če se odločim, da želim imeti odstavek brez zgornje rumene črte, lahko preprosto zapustim razred = "topline" v oznaki odstavka in ne bo imel zgornje meje.

09 od 10

Oblikovanje slik

Slike običajno imajo okrog okrog, to ni vedno vidno, razen če je slika povezava, vendar želim imeti razred v svoji slogovni obliki CSS, ki samodejno izklopi mejo. Za ta slogovni list sem ustvaril razred "noborder", večina slik v dokumentu pa je del tega razreda.

Drugi poseben del teh slik je njihova lokacija na strani. Želel sem, da so del odstavka, v katerem so bili, brez uporabe tabele, da bi jih uskladili. Najpreprostejši način za to je, da uporabite float CSS lastnost.

V dokumentu styles.css vnesite naslednje:

#main img {
float: levo;
margin-right: 5px;
spodnji rob: 15px;
}
.noborder {
border: 0px none;
}

Kot lahko vidite, obstajajo tudi robne lastnosti, določene na slikah, da se prepričate, da jih ne razbijejo proti plavajočemu besedilu, ki je poleg njih v odstavkih.

10 od 10

Oglejte si svojo zaključeno stran

Ko shranite CSS, lahko v svojem spletnem brskalniku naložite stran pets.htm. Vaša stran mora biti podobna tisti, ki je prikazana na tej sliki, pri čemer so poravnane slike in navigacija pravilno vstavljena na levi strani strani.

Upoštevajte te iste korake za vse vaše notranje strani za to spletno mesto. Želite imeti eno stran za vsako stran v vaši navigaciji.