01. oldal, 10
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
- 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
02. oldal, 10
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. Tegye a következő linkcímkét bárhol a pets.htm dokumentum
címkéin belül:03. oldal, 10
Erősítse meg az oldal margókat
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 vakarólapot kezdjem. Ehhez a styles.css dokumentumhoz adja hozzá a következőket:
html, test {
margin: 0px;
párnázottság: 0px;
határ: 0px;
balra: 0px;
top: 0px;
}
04. oldal, 10
A betűtípus megváltoztatása az oldalon
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:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
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.
05. oldal, 10
A linkek érdekesebbé tétele
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:
egy link {
betűtípus-család: Arial, Helvetica, sans-serif;
szín: # FF9900;
text-decoration: aláhúzás;
}
a: látogatott {
szín: # FFCC66;
}
a: ugorjon {
háttér: #FFFFCC;
font-weight: bold;
}
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.
06. oldal, 10
A navigációs rész szerkesztése
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:
#nav {
szélesség: 225px;
margin-right: 15px;
határ: közepes szilárd # 000000;
}
#nav li {
lista-stílus: nincs;
}
.footer {
betűméret: .75em;
világos: mindkettő;
szélesség: 100%;
text-align: center;
}
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.
07. oldal, 10
A fő rész elhelyezése
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:
#main {
szélesség: 800px;
top: 0px;
pozíció: abszolút;
balra: 250px;
}
08. oldal, 10
A bekezdések kialakítása
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:
.felső sor {
felső határ: vastag tömör # FFCC00;
}
Ú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.
09. oldal, 10
A képek formázása
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:
#main img {
balra lebeg;
margin-right: 5px;
margin-bottom: 15px;
}
.Nincs határ {
határ: 0px nincs;
}
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.
10/10
Most nézze meg az elkészült oldalt
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.