Milyen kódsorral tudok az adott oldalnak egy háttérképet beszúrni?
válasza:Milyen módszerre?
External css-el így:
body {
background-image: url('hatter_helye.kiterjesztese');
}
válasza:Valószínűleg az alábbi CSS-szabály az, amit keresel:
body {
background: url('fajlnev.png');
}
Figyelj rá, hogy ne használj nagy képet, mert azt sok idő letöltenie a felhasználónak. Háttérképnek egy minél kisebb, ismétlődő mintázatot érdemes használni. A minél kisebb sajnos nem terjed ki az 1×1 pixeles .png-kre, mert az IE8 nem szereti őket. Ennél nagyobb képpel elvileg nincsen ott sem probléma.
válasza: válasza:A legegyszerűbb az az alábbi módszer:
<html>
<head>
<style>
body {
background: url('kep.png');
}
</style>
</head>
<body>
.
.
.
</body>
</html>
válasza:A neve CSS (Cascading Style Sheets), és a koncepció annyi, hogy az oldal szerkezetét (HTML), működését (JavaScript), valamint a kinézetét (CSS) egymástól elkülönítve írjuk meg. Ez az elkülönítés sokkal átláthatóbbá, könnyebbé teszi a kód karbantartását, sokkal több rugalmasságot tesz lehetővé, és egyszerűen manapság a weben sztenderd gyakorlat, hogy így dolgozunk. A HTML-be ágyazható stílusállítás elavult, a legújabb sztenderdeknek már nem is a része.
A CSS-nek saját szintaktikája van, ami nagyon egyszerűen elsajátítható. Legegyszerűbb esetben úgy működik a dolog, hogy a CSS kódunkkal kiválasztunk egy vagy több elemet, amit a HTML kódunkban elhelyeztünk. A legtriviálisabb kiválasztásra az elemek nevét lehet használni, például azt, hogy h1, h3, p, div, span, vagy a te példádnál body. Ahhoz, hogy az elemet kiválasszuk, nem kell semmi mást tenni, mint a nevét leírni a CSS fájlba, így:
body
Ezt a kódszót, amivel elemeket kiválasztunk, szelektornak nevezzük. Jegyezd meg a nevét, mert mindenki lépten-nyomon hivatkozik CSS-szelektorokra.
Most, hogy a szelektorunkkal kiválasztottuk a body elemet, szeretnénk neki valamilyen stílust adni. A CSS-ben egy nagy rakat tulajdonság van definiálva különböző stílusok alkalmazására, a te esetedben hátteret akarunk adni az elemnek, ezért a "background" tulajdonságot fogjuk használni, a következőképp:
body {background}
Minden tulajdonságot, ami a szelektorral kiválasztott elemre vonatkozik, a CSS kódban a szelektor után írunk kapcsos zárójelek közé. Persze a tulajdonság neve önmagában még nem csinál semmit, az adott tulajdonsághoz adni kell egy értéket is. Background esetén ez lehet egy kép, egy szín, meg még néhány dolog, például átmenet több szín közt. Ha egy egyszerű piros színt akarok beállítani, azt így csinálom:
body {background: #FF0000}
A tulajdonsághoz tartozó értéket a tulajdonság után írjuk, kettősponttal elválasztva. Ez a fenti sor egy teljesértékű CSS-szabály, amely tartalmazza, hogy melyik elemre akarjuk alkalmazni a szabályt (body), milyen tulajdonságát akarjuk megadni (background), és annak a tulajdonságnak milyen értéket akarunk adni (#FF0000).
Oldjuk meg most az eredeti problémát, így:
body {background: url('hatter.png')}
A CSS-ben ahhoz, hogy valamihez elérési utat adjunk meg, az url() függvényt használjuk, ami mindig a kettőspont után, azaz az értékbe kerül bele, ahogy látod. Az url() zárójelei közé beírjuk az elérési útvonalat. Ez lehet abszolút és relatív, épp úgy, mint a HTML-ben, és mindenképpen kell köré 'aposztrof' vagy "idézőjel". Ennyi volt, a fenti szabály beállítja a body elemnek a CSS-kóddal egy könyvtárban ücsörgő hatter.png fájlt háttérnek.
Tegyük fel, hogy szeretnél a body-n belül minden szövegnek fehér betűszínt beállítani. Ezt megtehetnéd így is...
body {background: url('hatter.png')}
body {color: #FFFFFF}
...de ez feleslegesen sok kód. Nem akarjuk a body-t kétszer kiválasztani, ezért egybe csoportosítjuk a body szelektorhoz az összes tulajdonságot, amit neki szánunk.
body {
background: url('hatter.png');
color: #FFFFFF;
}
A tulajdonság-érték párokat pontosvesszővel választjuk el egymástól. A kód átláthatóbb, ha a tulajdonságok külön sorokba kerülnek, ahogyan maga a szelektor is. Jó szokás egy tabbal vagy ízlés szerint kettő-négy szóközzel indentálni (beljebb kezdeni) a tulajdonságokat, a CSS nem érzékeny a white space-re, írhatsz belőle bármennyit (akár nullát is), de ha használsz némi tagolást, attól mindig olvashatóbb a kód.
Body-ból csak egy van, de ha figyeltél, mondtam, hogy például a h1 elemeket is kiválaszthatod, amikból pedig korlátlan számút írhatsz a HTML-edbe. Ha van három h1 elemed, az alábbi CSS mindháromnak 40 pixeles betűméretet ad:
h1 {
font-size: 40px;
}
De nemcsak az elemek nevét lehet használni, mint szelektort.
<div>
<h1>Ez egy cím</h1>
</div>
<div id="doboz">
<p>Ez egy paragrafus egy dobozon belül.</p>
</div>
Tegyük fel, hogy a szövegdoboznak adni akarsz egy 200 pixeles magasságot. Ha a "div" szelektorral választanád ki az elemet, akkor kiválasztanád mindkét divet, amit a fenti kódban látsz. Ilyenkor célszerű adni egy ID-t (_egyedi_ azonosítót) az egyik divnek, a fenti példában ez a "doboz". Így írunk rá CSS-szabályt:
#doboz {
height: 200px;
}
Minden szelektor, ami kettőskereszttel (#) kezdődik, egy úgynevezett ID-szelektor, ami az adott ID-vel ellátott elemet választja ki, semmi mást. Egy bizonyos ID-ből csak egy lehet egy HTML-dokumentumban. Viszont ha van több elem, amit ugyanúgy akarsz formázni, akkor használhatsz ID mellett vagy helyett classt, aminek már nem kell egyedinek lennie. Ha egy span és egy h3 elemnek egyformán adsz egy class="szurke" classt a HTML-eden belül, akkor az alábbi szabállyal szürkévé színezheted mindkettőt:
.szurke {
color: grey;
}
A class szelektorok ponttal (.) kezdődnek, és minden elemet kiválasztanak, amelyik rendelkezik a HTML-en belül az adott class-szal.
Még egy szelektort érdemes ismerned a kezdéshez:
#doboz p {
font-weight: bold;
}
A fenti szabály minden p elemet félkövérré varázsol, ami egy "doboz" ID-jű elemen belül található. Az oldalon minden más p elem, ami nincs a dobozon belül, marad normál vastagságú. Ezt nagyon egyszerűen értük el: összekombináltunk két szelektort, amiket már ismerünk, és elválasztottuk őket egy szóközzel. A szóköz azt mondja, hogy a második elem az elsőn belül van valahol a HTML-kódodban.
Oké, ismerünk pár szelektortípust, tulajdonságot, értéket (a valóságban rengeteg másik van még mindből), de hova írjuk ezt az egészet?
Három lehetőségünk van.
1) Aki a HTML-es formázásokhoz szokott, annak a legkézenfekvőbb a style tag, amit a HTML-ben minden elem megkaphat, így:
<body style="background: url('hatter.png');">
Ezt úgy hívjuk, hogy "inline" CSS. Amikor a style taget használjuk, nincs szükség a szelektorra és a kapcsos zárójelekre, hiszen egy adott elembe írjuk eleve a CSS-t. Viszont ez nagyon rossz gyakorlat, mert ezzel pont nem érjük el, amit eredetileg szerettünk volna: hogy a stílusok el legyenek különítve az oldal vázától.
2) Megtehetjük, hogy a HTML head-jén belül egy style elembe írjuk az összes CSS-ünket:
<head>
<style>
body {
background: url('hatter.png')
}
</style>
</head>
Ez már egy fokkal jobb, minden stílus egy helyen van, de még így is egy fájlban van a struktúra és a kinézet, tudunk ennél jobbat is.
3) Külön fájlba írjuk a teljes CSS-t, bele a nagy semmibe, ahogy a fenti példák is voltak. A fájlt elmentjük mondjuk style.css néven, majd a HTML head-jén belül meghívjuk a fájlt:
<head>
<link href="style.css" rel="stylesheet">
</head>
Amikor a böngésző megnyitja a HTML-ünket, be fogja tölteni hozzá a külső style.css fájl tartalmát is, és az abban található formázások megjelennek a dokumentumunkban. Így teljesen elválasztottuk a kinézetet a felépítéstől, nem kell az egyiket módosítanunk ahhoz, hogy a másikhoz hozzányúljunk, cserébe van egy plusz fájlunk (vagy akár több is, bármennyi CSS fájlunk lehet, de érdemes egyet használni). Kicsit is komolyabb projektnél nem is kérdéses a külön fájl előnye, de ha mondjuk csak negyven sornyi CSS-t akarsz írni az egyoldalas HTML-edhez, akkor a style tag a headen belül ugyanilyen jó megoldás.
Végül, ahhoz, hogy tudj CSS-szabályokat írni, ismerned kell a különböző tulajdonságokat, lehetséges értékeket, és később a komolyabb szelektorokat is. Ehhez kezdésnek itt egy egyszerű, átlátható referencia:
Ha bármi kérdésed van, mondd nyugodtan. :)
válasza:Akkor leírhatod, hogy csináltad, hátha más is felteszi majd ezt a kérdést.
Illetve egy alternatíva még,ha nem akarsz CSS-t használni:
<body style="background: url(hatter.jpg);”>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!