A <DIV> tag és formázás CSS-sel

A <DIV> tag és formázás CSS-sel

<DIV> • A <DIV> tag alkalmas arra, hogy egy HTML oldalt különböző részekre felosszon (különbözően formázható részek) • Opciói: • class="szöveg" – az adott <DIV> elnevezése, a formázásnál fontos • style="stíluskód" – az adott <DIV> formázási paraméterei CSS-kóddal, kevesebb beállításnál használatos

CSS • A CSS (Cascading Style Sheets) segítségével a HTML oldalunk tetszőlegesen formázható • a CSS-kód lehet külön fájlban, ekkor a HTML fájl mellett lesz egy CSS fájlunk is, és 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 (folyt.) • A formázás megadása két fő részre osztható • először meg kell adni annak a HTML tag-nek a nevét, amit formázni szeretnénk • ezután { } közé lehet írni a formázáshoz szükséges paramétereket, amiknek a formája: tulajdonság:érték; Pl.: h1 {color=#0000FF; font-size: 12px;}

CSS (folyt.) • Megjegyzést rakhatunk /* és */ jelek közé • Ha <DIV> esetén szeretnénk sok formázási utasítást használni, akkor először kell egy osztálynevet adni az adott <DIV>-nek a class opcióval. • ezután a CSS-kódnál nem a div tag-re állítunk be formázást, hanem a class-ban megadott névre. Ekkor a név azonban .-tal kezdődik

CSS (folyt.) <HEAD> <STYLE type="text/css"> .elso{ background-color:rgb(0,0,255); font-size:20px; } </STYLE> <BODY> <DIV class="elso"> Szöveg </DIV> . .

<DIV> formázási lehetőségei Elhelyezés: • position:absolute/relative; - a <DIV> típusának beállítása • abolute – az elhelyezkedést pontosan adjuk meg • relative – az oldalon eredetileg elfoglalt pozícióhoz képest adjuk meg a beállításokat • top:30px; right:40px; - pozíció: oldal tetejétől 30px távolságra, jobb szélétől 40px távolságra • top:30px; left:10px; - pozíció: oldal tetejétől 30px távolságra, bal szélétől 10px távolságra • width:200px; - szélesség • A következőkben tárgyalt formázási lehetőségek nagy része is értelemszerűen használható a <DIV> formázására.

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, megadható névvel és kóddal is • background-image:url('filenev.jpg'); - háttérkép beállítása • background-repeat:ismétlés; - a háttérképet alapértelmezetten vízszintesen és függőlegesen is ismétli az alapbeállítás, de ez átállítható • 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 mindig ugyanott marad, nem görgethető az oldal tartalmával együtt • background-position:vízszintes függőleges; - a háttérkép vízszintes és függőleges pozícióját adja meg, értékei: • vízszintes: left/center/right • függőleges: top/middle/bottom

A kód egyszerűsítése • Mindezek a beállítások megadhatóak egyben is (rövidítve), szóközzel elválasztva a leírt sorrendben megadva • Pl.:body{background:#FFFFFF url('kep-jpg') no-repeat right top;}

Bekezdésformázások • A különböző bekezdésformázó tag-ek is formázhatóak külön-külön (pl.: h1, h2,… p, a). Beállítható: • color:szín; - bekezdés karaktereinek színe, megadható hexadecimális vagy RGB-kóddal, de színnévvel is (bodynál is használható) • text-align: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, értékei: • 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

Bekezdésformázások (folyt.) • text-transform:érték; - szöveg átalakítása, értékei: • 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ó

Font formázások • font-family:betűtípus megadása, de célszerű nem csak a pontos nevet megadni, így 3 értéket adnak meg: • 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ű beállítására • font-size:20px; - betűméret beállítása (a betűméret megadható em mértékegység-gel is, ami a pixel érték osztva 16-tal) • font-variant:small-caps; - kiskapitális szöveg • 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

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'); - csak felsorolásnál (ul) kép is beállítható felsorolásjelnek

Táblák formázása • width:100% - <table>, <th>, <td> tag-ekre • height:50px – <table>, <tr> tag-ekre • text-align:left/center/right - <td>-re beállítható a szöveg vízszintes igazítása • vertical-align:top/middle/bottom - <td>-re beállítható függőleges igazítás • color:szín; • background-color:szín; bármely táblázattal kapcsolatos tag-re

Táblák formázása (folyt.) • padding:25px; – cellamargó (cella szél és szöveg közti távolság), <TABLE> és <TD> tag-re is beállítható • Külön is beállítható a 4 oldalra:padding-top:25px; - felsőpadding-bottom:25px; - alsópadding-right:50px; - jobb oldalipadding-left:50px; - bal oldali

Keretezés • border-width:2px; - keret mérete • border-color:szín; - keret színe • border-style:stílus; - keret stílusa, értékei lehetnek: • 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 • A keretek stílusát külön is meg lehet adni a 4 oldalra: border-top/right/bottom/left-style: stílus; beállítással

Keretezés (folyt.) • A 3 keretformázási lehetőség egyben is megadható: méret stílus szín sorrendben: • Pl.: table, th, td {border: 1px solid black;}

A <DIV> tag és formázás CSS-sel