Mienk a fele sajt
2006 november 16. | Szerző: Holli |
Most már aztán tényleg stíluslap jön. Főleg azért, hogy lehessen végre játszani.
Tényleg nem nyúlok a body részhez. De csinálok egy head részt, hogy valahová mégis nyúlhassak. Itt, a head-ben formázom majd azokat az egységeket, amiket a body-ban kijelöltem.
Először is megmondom, hogy stíluslap következik: <style type=”text/css”>, aztán a formázás végén lezárom: </style>. (Másképp is lehet, de most ez a legegyszerűbb.)
Formázni pedig úgy tudok, hogy megmondom, melyik egységben milyen tulajdonságnak milyen értéke legyen. A felépítése vázlatosan így néz ki: egység neve {1.tulajdonság: érték; 2.tulajdonság: érték;}.
Lehet például az egy egységhez tartozó formázásokat egyetlen sorba írni. Nekem az jobban tetszik, amikor minden tulajdonság külön sorban szerepel, kicsit behúzva.
Amikor az egységeket kialakítottam, azt mondtam nekik, hogy div id, ezért most a megnevezésben egy # jön a név elé (a variációk nem egészen világosak nekem, az id elvileg azt jelenti, hogy egyetlen helyen szerepel ez az elem, mindegy, majd kitanulom egyszer).
A honlapom forrásában tehát mindenképpen lesz egy ilyen rész, rögtön az elején:
<html>
<head>
<title>hello holli – alakul1</title>
<style type=”text/css”>
body {
}
#egeszhonlap {
}
#szoveg {
}
#linkfal {
}
p {
}
h1 {
}
h2 {
}
ul {
}
a {
}
a:visited {
}
a:hover {
}
</style>
</head>
Tulajdonképpen minden kellék megvan a honlapcicomázáshoz, már csak a megfelelő tulajdonságokat kell beirkálni, és kész is vagyunk. Ennél a pontnál már érdemes tanulmányozni a szakirodalmat, kettő is van a linklistában.
De ne legyek már hernyó, legalább kezdjem el.
Legyen a honlapon minden karakter és keret színe piros. A színeket többféleképpen tudom megadni, most innen választottam, a táblázatból, ami a lap alján van – ezek a színek minden böngészőben ugyanígy jelennek meg. Alapértelmezett tulajdonság lesz, ezért a body egységhez kerül:
body {
color: #CC0033;
}
(Ez az a pillanat, amikor szinte mindenkinek heurékáznia illik, hogy ó hát akkor tudom, miről van szó, én is tudok stíluslapozni. Így igaz.)
Az egész honlapom férjen el egy 800 pixel széles monitoron is, mivel a látogatók egy részének 800×600 pixel felbontású a képernyője. Nem valami sok a szöveg, legyen akkor 750 pixel széles, bőven kifér rá Gorcsev Iván:
#egeszhonlap {
width: 750px;
}
A szöveg legyen 450 pixel széles, és a honlapnak a bal oldalán legyen. Szeretném bekeretezni. (A keret az nagyon hasznos, ha például elveszítem a fonalat, akkor gyorsan berakok egy keretet, máris látni fogom, hogy merre járok.) A keret legyen 2 pixel széles, sima vonalú, piros. És a szöveg ne tapadjon a kerethez, legyen körülötte 10 pixel üres hely:
#szoveg {
width: 450px;
float: left;
border: 2px solid #CC0033;
padding: 10px;
}
A linkfalam 180 pixel széles legyen, jobb oldalon helyezkedjen el:
#linkfal {
border: 2px solid #CC0033;
width: 180px;
float: right;
padding: 10px;
}
A bekezdés szövege legyen sorkizárt:
p {
text-align: justify;
}
Az oldalam neve se lógjon ki a sorból, neki is legyen kerete és belső margója:
h1 {
border: 2px solid #CC0033;
padding: 10px;
}
Itt tartok most, a honlapomnak kezd honlap-kinézete lenni. Megnézéshez katt ide. A Nézet – Forrás menüpontban előjön a forráskódja, az a Jegyzettömbbe bemásolható, ki lehet rajta mindenféléket próbálni. (Szólok megint, hogy .htm kiterjesztéssel kell elmenteni, akkor a fájlra kattintva úgy fog megjelenni, mint egy honlap.)
Kommentek
Kommenteléshez kérlek, jelentkezz be:
Kedves hollita!
Nagyon jó, hogy ilyen embernyelven is leírogatod itt a honlapkészítés csínját-bínját. Ugyanis én most kezdtem el olvasni a BME – Egyszerűen web c. könyvét. Szerintem ott ebből (is) tanulnak. Ha érdekel esetleg, majd írj az üzifalra. Ebben van szó css-től kezdve php-ig mindenről.
Üdv.
Köszi hogy szóltál, Rituske. Próbáltam most keresni valamit a könyvről, sajnos nem találtam, a BME-nek sok jó anyaga van egyébként itt a neten, a web-könyvekről viszont eddig sok jót nem tudok mondani, úgyhogy kíváncsian várom majd az élménybeszámolódat 🙂