Készítse el a CSS stíluslapot
Ugyanígy létrehoztunk egy külön szövegfájlt a HTML, létrehoz egy szöveges fájlt a CSS-hez. Ha látványra van szüksége ehhez a folyamathoz, kérjük, olvassa el az első oktatóanyagot. A CSS-stíluslap létrehozásának lépései a Jegyzettömbben:
- Választ Fájl> Új a Jegyzettömbben, hogy üres ablakot kapjon
- A fájlt CSS-ként kattintson a gombra Fájl
- Keresse meg a merevlemezen található my_website mappát
- Változtasd meg a "Mentés típusként:" nak nek "Minden fájl"
- Nevezze el a fájlt "stílusok.css"(hagyja ki az idézőjeleket) és kattintson Mentés
Csatolja a CSS stíluslapot a HTML-hez
Ha megvan a stíluslap webhelyéhez társítania kell magát a weboldalt. Ehhez használja a link címkét. Helyezze a következő link címkét bárhova a.
Javítsa ki az oldal margókat
Amikor írsz XHTML a különböző böngészőknél egy dolgot megtudhat, hogy úgy tűnik, hogy mindegyikük különböző margókkal és szabályokkal rendelkezik a dolgok megjelenítésére vonatkozóan. A legjobb módja annak, hogy megbizonyosodjon arról, hogy webhelye ugyanúgy néz ki a legtöbb böngészőben, ha nem engedi meg, hogy a margók a böngésző alapértelmezés szerint válasszanak.
Az oldalakat inkább a bal felső sarokban kezdjük, anélkül, hogy a szöveg körül külön betét vagy margó lenne. Még ha kitöltjük is a tartalmat, a margókat nullára állítjuk, így ugyanazzal az üres lappal indulunk. Ehhez adja hozzá a következőket a styles.css dokumentumhoz:
html, body {
margó: 0px;
párnázás: 0px;
határ: 0px;
bal: 0px;
felső: 0px;
}
Az oldal betűtípusának módosítása
A betűtípus gyakran az első dolog, amelyet meg akar változtatni egy weboldalon. Az alapértelmezett betűtípus egy weboldalon csúnya lehet, és valójában maga a webböngésző függ, így ha nem definiálja a betűtípust, akkor valóban nem tudja, hogy fog kinézni az oldala.
Általában a bekezdések, vagy néha a teljes dokumentum betűkészletét változtatja meg. Ehhez a webhelyhez a betűtípust fejléc és bekezdés szinten határozzuk meg. Adja hozzá a következőt a styles.css dokumentumához:
p, li {
betűtípus: 1em Arial, Helvetica, sans-serif;
}
h1 {
betűtípus: 2em Arial, Helvetica, sans-serif;
}
h2 {
betűtípus: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
betűtípus: 1.25em Arial, Helvetica, sans-serif;
}
Az 1em-rel kezdtük a bekezdések és a listaelemek alapméretét, majd ezt használtuk a címsorok méretének beállításához. Nem számítunk arra, hogy a h4-nél mélyebb címsort használunk, de ha azt tervezi, akkor azt is meg kell stílusoznia.
Linkjeinek érdekesebbé tétele
A hivatkozások alapértelmezett színe a kék és a lila a nem látogatott és a meglátogatott linkek esetében. Bár ez szabványos, lehet, hogy nem felel meg az oldalai színvilágának, ezért változtassunk rajta. A styles.css fájlban adja hozzá a következőket:
egy link {
font-család: Arial, Helvetica, sans-serif;
szín: # FF9900;
szövegdíszítés: aláhúzás;
}
a: meglátogatott {
szín: # FFCC66;
}
a: lebeg {
háttér: #FFFFCC;
betű súlya: félkövér;
}
Három linkstílust állítottunk be, az a: linket alapértelmezettként, a: látogatottat, amikor meglátogattuk, megváltoztatjuk a színét és a: lebegőt. A: hover használatával a link megkapja a háttér színét, és félkövéren hangsúlyozva hangsúlyozza, hogy linkre kell kattintani.
A Navigációs szakasz stílusa
Mivel a navigációs (id = "nav") részt tesszük elsőnek a HTML-be, először stílusozzuk meg. Meg kell jelölnünk, hogy milyen szélesnek kell lennie, és tegyünk egy szélesebb margót a jobb oldalra, hogy a fő szöveg ne ütközzen össze. mi is, szegélyt rakunk köré.
Adja hozzá a következő CSS-t a styles.css dokumentumhoz:
#nav {
szélesség: 225px;
jobb szél: 15 képpont;
szegély: közepesen szilárd # 000000;
}
#nav li {
list-style: nincs;
}
.footer {
betűméret: .75em;
egyértelmű: mindkettő;
szélesség: 100%;
text-align: center;
}
A liststílusú tulajdonság úgy állítja be a listát a navigációs szakaszban, hogy ne legyenek golyók vagy számok, a .footer pedig a szerzői jogi szakaszt kisebbre és a szakasz közepére állítja.
A fő szakasz elhelyezése
A fő szakasz abszolút pozícionálásával biztos lehet benne, hogy pontosan ott marad, ahol szeretné, hogy a weblapján maradjon. 800 képpontos szélességet készítettünk a befogadáshoz nagyobb monitorok, de ha van kisebb monitorja, érdemes szűkíteni.
Helyezze a következőket a styles.css dokumentumba:
#main {
szélesség: 800px;
felső: 0px;
pozíció: abszolút;
bal: 250px;
}
A bekezdések stílusa
Mivel már beállítottam a fenti bekezdéstípust, szerettem volna minden bekezdésnek adni egy kis extra "rúgást", hogy jobban kitűnjön. Ezt úgy tettem, hogy a tetejére szegélyt tettem, amely nemcsak a képet, hanem a bekezdést emelte ki.
Helyezze a következőket a styles.css dokumentumba:
.felső sor {
border-top: vastag szilárd # FFCC00;
}
Úgy döntöttünk, hogy "topline" nevű osztályként fogjuk megtenni, ahelyett, hogy csak így definiálnánk az összes bekezdést. Így, ha úgy döntünk, hogy szeretnénk egy bekezdést egy felső sárga vonal nélkül, akkor egyszerűen elhagyhatjuk a class = "topline" -t a bekezdéscímkében, és nem lesz a felső szegélye.
A képek stílusa
A képek körül általában van egy szegély, ez nem mindig látható, kivéve, ha a kép link, de szeretnénk, ha a CSS stíluslap, amely automatikusan kikapcsolja a szegélyt. Ehhez a stíluslaphoz hoztuk létre a "noborder" osztályt, és a dokumentumban található képek többsége ennek az osztálynak a része.
Ezeknek a képeknek a másik külön része az oldalukon való elhelyezkedésük. Azt akartuk, hogy részei legyenek annak a bekezdésnek, amelyben voltak, anélkül, hogy táblákat használnának az igazításukhoz. Ennek legegyszerűbb módja a float CSS tulajdonság használata.
Helyezze a következőket a styles.css dokumentumba:
#main img {
balra lebeg;
jobb-jobb: 5px;
margin-bottom: 15px;
}
.Nincs határ {
határ: 0px nincs;
}
Mint látható, a képeken margó tulajdonságok is vannak beállítva, hogy megbizonyosodjanak arról, hogy nem törik össze a bekezdésekben mellettük elhelyezett lebegő szöveggel.
Most nézze meg a kitöltött oldalát
A CSS mentése után újratöltheti a pets.htm oldalt a böngészőjébe. Oldalának hasonlónak kell lennie a képen láthatóhoz, a képeket igazítva és a navigációt helyesen kell elhelyezni az oldal bal oldalán.
Kövesse ezeket a lépéseket a webhely összes belső oldalán. Azt szeretné, hogy a navigáció minden oldalához egy oldal kerüljön.