A <DIV> tag és formázás CSS-sel
<DIV> HTML oldal különböző részekre felosztásához (különbözően formázható részek, „blokkok”) Opciói: class="szöveg" – az adott <DIV> (osztály)neve (formázáshoz) id="aznev" – azonosító név adott <DIV>- hez (formázáshoz) style="stíluskód(ok)" – közvetlen formázás CSS-kód(ok)kal, kevesebb beállításnál hasznos
CSS A CSS (Cascading Style Sheets) segítségével a HTML oldal tetszőlegesen formázható a CSS-kód lehet külön fájlban a HTML-ben hivatkoznunk kell erre a CSS fájlra a <HEAD> </HEAD> közé írandó kód: <link rel="stylesheet" type="text/css" href="filenev.css" > a CSS-kódot az adott HTML fájlba is írhatjuk a <HEAD></HEAD> közé <STYLE type="text/css"> és </STYLE> tag- ek közé kerül
CSS megadása A formázás megadása két fő részre osztható: formázandó HTML tag, osztály vagy azonosító neve létező HTML tag megadása csak a nevével ezután { } közé lehet írni a formázáshoz szükséges paramétereket tulajdonság:érték; formában
CSS megadása Megjegyzést rakhatunk /* és */ jelek közé <DIV>-nél sok formázási utasítás: először osztálynév/azonosító megadása class (osztály) vagy id (azonosító) opcióval a CSS-kódnál nem a <DIV>- tag-re hivatkozunk, hanem a megadott névre osztálynévnél . azonosítónál # kerül a megadott név elé
Példák Létező HTML tag esetén: h1 {color=#0000FF; font-size: 12px;} Osztály (class) esetén: .szoveg{color=#0000FF;} Azonosító (id) esetén: #aznev{color=#0000FF;}
CSS (folyt.) <HEAD> <STYLE type="text/css"> .elso{ background-color:rgb(0,0,255); font-size:20px;} </STYLE> </HEAD> <BODY> <DIV class="elso"> Szöveg </DIV> . </BODY>
<DIV> formázási lehetőségei Elhelyezés: position:absolute/relative/fixed; - a <DIV> elhelyezésének módja absolute – pontos elhelyezés megadása relative – az eredeti pozícióhoz képest fixed – a böngészőablakhoz igazítva (görgetésnél sem mozdul el) top/left/right:10px; - pozíció a weblap tetejétől/bal/jobb szélétől (pixelben) width:200px; - szélesség (pixel/százalék) (A további formázási lehetőségek nagy része használható a <DIV> formázására is.)
Alapvető formázási lehetőségek CSS használatával Háttér – body parancsra beállítható background-color:blue; - háttérszín (név/kód) a kód lehet decimális is background-image:url('filenev.jpg'); - háttérkép background-repeat:ismétlés; - háttérkép ismétlése alapértelmezés: minden irányban ismételt repeat-x – vízszintesen ismétel csak repeat-y – függőlegesen ismétel csak no-repeat – nem ismétli a háttérképet
Háttér formázás (folyt.) background-attachment:fixed; - a háttérkép görgetésnél sem mozdul background-position:vízszintes függőleges; - a háttérkép vízszintes és függőleges pozíciója vízszintes: left/center/right függőleges: top/middle/bottom
A kód egyszerűsítése A háttérkép beállítások megadhatóak egyben is (rövidítve) szóközzel elválasztva, csak adott sorrendben Pl.: body{background:#FFFFFF url('kep-jpg') no- repeat right top;}
Bekezdésformázások A bekezdésekre (pl.: h1, h2,… p) beállítható formázások color:szín; - szöveg színe a bekezdésben megadható hexadecimális vagy RGB- kóddal, de színnévvel is text-align:left/center/right/justify – szöveg vízszintes igazítása
Bekezdésformázások (folyt.) text-decoration:érték; - szöveg díszítésére overline – szöveg fölé vonal line-through – szöveg áthúzása underline – szöveg aláhúzása blink – villogó szöveg none – ne legyen semmilyen dekoráció (link aláhúzás megszüntetésére) text-indent:20px; - a bekezdés első sorának behúzása (pixelben)
Bekezdésformázások (folyt.) text-transform:érték; - szöveg átalakítása uppercase – csak nagybetűk lowercase – csak kisbetűk capitalize – minden szó első betűje nagybetű Margók: margin-top:20px; – felső margó margin-bottom:20px; – alsó margó margin-right:20px; – jobb oldali margó margin-left:20px; – bal oldali margó összes margó egyforma értékre: margin:20px;
Font formázások font-family:betűtípus megadása, legalább 3 érték megadása ajánlott: font pontos neve font családja általános család, értéke lehet: serif: talpas betűtípus sans-serif: talpatlan betűtípus monospace: minden karaktere azonos szélességű Pl.: p{font-family:"Times New Roman", Times, serif;}
Font formázások (folyt.) font-style:italic; - dőlt betű font-size:20px; - betűméret megadható em egységben is (pixel érték 16-od része) font-variant:small-caps; - kiskapitális font-weight:normal/bold/bolder/lighter; - karakterek vastagsága bold = félkövér
Linkek formázása 4-féle különböző hivatkozást formázhatunk külön-külön: a:link – normál, még nem látogatott link a:visited – már látogatott link a:hover – amikor az egeret áthúzzuk a link felett a:active – épp aktív (rákattintás és betöltés közti idő)
Linkek formázása (folyt.) A különböző linkek mindegyikére beállíthatjuk a következőket: color:szín; text-decoration:érték; background-color=szín; (csak a link szövegének háttérszíne) text-align:érték; display:block; - blokként jeleníti meg a linket
Listák formázása list-style-type:típus; - az adott lista típusa, értéke lehet: felsorolásnál (ul): square (négyzet), circle (karika) számozásnál (ol): upper-roman (római számok), lower-alpha (kisbetűk) list-style-image: url('kep.gif'); - kép beállítása felsorolásjelnek CSAK felsorolásnál (ul)
Listák formázása Bármely karakter megadható listajelként csak listaelemre beállítható az <ul>-nél NE jelenjen meg a jel unicode karakter: hexadecimális kódjának megadása '\kód' formában Például: ul {list-style: none;} li:before {content: '\2605'; } – fekete
Táblák formázása width:100%; - szélesség (pixel/százalék) <table>, <th>, <td> esetén height:50px; - magasság (pixel/százalék) <table>, <tr> esetén text-align:érték; - vízszintes szövegigazítás általában <td> esetén (<tr>-re is lehet) vertical-align:top/middle/bottom; - függőleges szövegigazítás
Táblák formázása (folyt.) color:szín; background-color:szín; padding:25px; –<TABLE>, <TD>-re cellamargó: cellaszél és szöveg közötti távolság külön is beállítható a 4 oldalra: padding-top:25px; - felső padding-bottom:25px; - alsó padding-right:50px; - jobb oldali padding-left:50px; - bal oldali
Táblák formázása (folyt.) Táblázat középre igazítása: text-align csak a szöveget igazítja középre a bal és jobb margók beállításával érhető el: margin-left:auto; margin-right:auto; A középre igazításhoz mindkét beállítást be kell írni a <table> beállításaihoz
Keretezés border-width:2px; - keret mérete border-color:szín; - keret színe border-style:stílus; - keret stílusa none – nincs keret, dotted – pontozott, dashed – szaggatott vonalas, solid – normál vonal, double – dupla vonalas, groove – 3D-s keret, ridge – 3D-s árnyékolt keret Külön is meg lehet adni a 4 oldalra: border- top/right/bottom/left-style: stílus; formában
Keretezés (folyt.) A 3 keretformázási lehetőség egyben is megadható szigorúan méret stílus szín sorrendben! Pl.: table, th, td {border:1px solid black;} A táblázat szegélyét a <table> mellett a <td>-re is be KELL állítani csak <table> esetében a táblázatnak csak külső szegélye lesz
Képek formázása width:érték; - szélesség (pixel/százalék) height:érték; - magasság (pixel/százalék) border:méret stílus szín; - képszegély külön is megadható float:left/center/right; - kép elhelyezkedése a szövegben hatása megegyezik az <img>-be írt align opcióéval