Hozzon létre egy CSS stíluslapot
Ugyanúgy hoztunk létre egy külön szövegfájlt a HTML-hez, létrehozunk egy szövegfájlt a CSS-hez. Ha erre a folyamatra szüksége van, olvassa el az első oktatóanyagot. Íme a CSS stíluslap létrehozása a Jegyzettömbben:
- Az üres ablakhoz válassza a Fájl> Új a Jegyzettömbben lehetőséget
- A fájlt CSS formátumban mentse a Fájl <Mentés másként …
- Keresse meg a merevlemezen található my_website mappát
- Módosítsa a "Mentés típusként:" lehetőséget az "Összes fájl"
- Nevezze el a "styles.css" fájlt (hagyja ki az idézőjeleket), majd kattintson a Mentés gombra
Csatlakoztassa a CSS stíluslapot a HTML-hez
Miután megvan a stíluslap a webhelyhez, hozzá kell rendelnie a weboldalhoz. Ehhez használja a linkcímkét. Helyezze a következő linket a
a pets.htm dokumentum címkéi:
03. oldal, 10 Amikor különböző böngészőkre XHTML-t írsz, akkor egy dolog fog tanulni, hogy úgy tűnik, hogy mindegyikük eltérő határokkal és szabályokkal rendelkezik a dolgok megjelenítéséhez. A legjobb módszer annak biztosítására, hogy a webhely a legtöbb böngészőben megegyezik, nem teszi lehetővé, hogy a margók alapértelmezettek legyenek a böngésző választásakor. Inkább a bal felső sarokban szeretném elindítani az oldalamat, a szöveg körül semmilyen kiegészítő tömb vagy margó nélkül. Még akkor is, ha megpróbálom kitölteni a tartalmat, a margókat nullára állítottam, hogy ugyanazt a vaklapot kezdjem. Ehhez a styles.css dokumentumhoz adja hozzá a következőket: A betűtípus gyakran az első dolog, amit meg akarsz változtatni egy weblapon. A weboldal alapértelmezett betűtípusa csúnya lehet, és valójában felfelé van a webböngészőben, így ha nem határozza meg a betűtípust, valójában nem fog tudni, hogy az oldal hogyan néz ki. Általában megváltoztatná a betűkészletet a bekezdésekben, vagy néha a teljes dokumentumon. Ezen a webhelyen a betűtípust a fejléc és a bekezdés szintjén határozzuk meg. Adja hozzá az alábbiakat a styles.css dokumentumhoz: Az elsővel kezdtem, mint a bázisméretet a bekezdésekre és a listatételekre, majd ezt használtam arra, hogy beállítsam a címoldalam méretét. Nem gondolom, hogy a főcímeket mélyebbre szeretném használni, mint a h4-et, de ha azt tervezed, hogy azt is meg szeretnéd állítani. A hivatkozások alapértelmezett színei kék és lila a meglátogatott és a meglátogatott linkekhez. Bár ez szabványos, előfordulhat, hogy nem illik az oldalainak színsémájához, ezért változtassuk meg. A styles.css fájlban adja hozzá a következőket: Három linkstílusot állítottam fel, az a: link az alapértelmezettként, a: meglátogatta a látogatását, megváltoztattam a színt, és a: lebegést. A: lebegve a linket kaptam egy háttérszínt, és merészen hangsúlyozom, hogy ez egy link, amelyre rákattintunk. Miután először a navigációs (id = "nav") szakaszba helyeztük a HTML-ben, először írjuk be. Fel kell tüntetnünk, hogy milyen szélesnek kell lenniük, és szélesebb szabadságot kell biztosítanunk a jobb oldalon, hogy a fő szöveg ne támadhasson ellene. Én is körülhatároltam egy határt. Adja hozzá a következő CSS-t a styles.css dokumentumhoz: A lista-stílusú tulajdonság létrehozza a navigációs szakaszban található listát, hogy ne legyenek számok vagy számok, és a .footer a szerzői jogi szekciót kisebb méretű és középpontba helyezi. Ha a fő részt helyezi el abszolút pozícionálással, biztos lehet benne, hogy pontosan ott marad, ahol szeretné, hogy a webhelyén maradjon. Nagyméretű 800px méretűre állítottam a nagyobb monitorokat, de ha van egy kisebb monitor, akkor szűkíteni kéne. Tegye a következőket a styles.css dokumentumba: Mivel már korábban beállítottam a bekezdés betűtípust, mindegyik bekezdésnek egy kis extra "kicket" akartam adni, hogy jobban ki tudjon állni. Ezt úgy tettem, hogy a tetején egy szegélyt helyeztem el, amely többet nem csak a képre helyezett. Tegye a következőket a styles.css dokumentumba: Úgy döntöttem, hogy ezt a "topline" nevű osztályt csinálom, nem pedig csak az összes bekezdés meghatározását. Így, ha úgy dönt, hogy egy felső sárga vonal nélküli bekezdést szeretnék kapni, akkor egyszerűen elhagyhatom az osztályt = "felsővonal" a bekezdés címkéjén, és nem lesz felső határa. A képek általában körülötte vannak, de ez nem mindig látható, hacsak a kép nem link, de szeretem, ha a CSS stíluslapomban egy osztály van, amely automatikusan kikapcsolja a határt.Ehhez a stíluslaphoz létrehoztam a "noborder" osztályt, és a dokumentumban szereplő legtöbb kép ebbe az osztályba tartozik. A képek másik speciális része az oldalon található hely. Azt akartam, hogy legyenek azok a bekezdések, amelyekben asztalok nélkül igazították őket. Ennek legegyszerűbb módja az úszó CSS tulajdonság használata. Tegye a következőket a styles.css dokumentumba: Amint láthatja, vannak olyan margó tulajdonságok is, amelyek meg vannak határozva a képeken, hogy megakadályozzák, hogy ne ütközzenek a bekezdések mellett lévő lebegő szöveggel. A CSS mentése után a pets.htm oldalt újratöltheti a webböngészőben. Az oldalnak hasonlónak kell lennie a képen látható képhez, a képeket igazítva és a navigáció helyét az oldal bal oldalán helyesen kell elhelyezni. Kövesse ugyanazokat a lépéseket az összes belső oldala számára ezen a webhelyen. A navigáció minden oldalához egy oldalt szeretne. Erősítse meg az oldal margókat
A betűtípus megváltoztatása az oldalon
A linkek érdekesebbé tétele
A navigációs rész szerkesztése
A fő rész elhelyezése
A bekezdések kialakítása
A képek formázása
Most nézze meg az elkészült oldalt
