a tag és formázás css-sel
DESCRIPTION
A tag és formázás CSS-sel. . A 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 elnevezése, a formázásnál fontos - PowerPoint PPT PresentationTRANSCRIPT
A <DIV> tag és formázás A <DIV> tag és formázás CSS-selCSS-sel
<DIV><DIV> A <DIV> tag alkalmas arra, hogy egy A <DIV> tag alkalmas arra, hogy egy
HTML oldalt különböző részekre HTML oldalt különböző részekre felosszon (különbözően formázható felosszon (különbözően formázható részek)részek)
Opciói:Opciói: class=class=""szövegszöveg"" – az adott <DIV> – az adott <DIV>
elnevezése, a formázásnál fontoselnevezése, a formázásnál fontos style=style=""stíluskódstíluskód"" – az adott <DIV> – az adott <DIV>
formázási paraméterei CSS-kóddal, formázási paraméterei CSS-kóddal, kevesebb beállításnál használatoskevesebb beállításnál használatos
CSSCSS
A CSS (Cascading Style Sheets) A CSS (Cascading Style Sheets) segítségével a HTML oldalunk segítségével a HTML oldalunk tetszőlegesen formázhatótetszőlegesen formázható a CSS-kód lehet külön fájlban, ekkor a HTML 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-fájl mellett lesz egy CSS fájlunk is, és a HTML-ben hivatkoznunk kell erre a CSS fájlraben hivatkoznunk kell erre a CSS fájlra
a <HEAD> </HEAD> közé írandó kód: <link a <HEAD> </HEAD> közé írandó kód: <link rel="stylesheet" type="text/css" href="filenev.css" rel="stylesheet" type="text/css" href="filenev.css" > >
a CSS-kódot az adott HTML fájlba is írhatjuk, a a CSS-kódot az adott HTML fájlba is írhatjuk, a <HEAD></HEAD> közé <HEAD></HEAD> közé
<STYLE type="text/css"> és </STYLE> tag-ek közé <STYLE type="text/css"> és </STYLE> tag-ek közé kerülkerül
CSS (folyt.)CSS (folyt.)
A formázás megadása két fő részre A formázás megadása két fő részre oszthatóosztható először meg kell adni annak a HTML tag-először meg kell adni annak a HTML tag-
nek a nevét, amit formázni szeretnénknek a nevét, amit formázni szeretnénk ezután { } közé lehet írni a formázáshoz ezután { } közé lehet írni a formázáshoz
szükséges paramétereket, amiknek a szükséges paramétereket, amiknek a formája: formája: tulajdonság:érték;tulajdonság:érték;
Pl.: h1 {color=#0000FF; font-size: 12px;}Pl.: h1 {color=#0000FF; font-size: 12px;}
CSS (folyt.)CSS (folyt.)
Megjegyzést rakhatunk /* és */ jelek közéMegjegyzést rakhatunk /* és */ jelek közé Ha <DIV> esetén szeretnénk sok Ha <DIV> esetén szeretnénk sok
formázási utasítást használni, akkor formázási utasítást használni, akkor először kell egy osztálynevet adni az először kell egy osztálynevet adni az adott <DIV>-nek a class opcióval.adott <DIV>-nek a class opcióval. ezután a CSS-kódnál nem a ezután a CSS-kódnál nem a div div tag-re tag-re
állítunk be formázást, hanem a class-ban állítunk be formázást, hanem a class-ban megadott névre. Ekkor a név azonban .-tal megadott névre. Ekkor a név azonban .-tal kezdődikkezdődik
CSS (folyt.)CSS (folyt.)<HEAD><HEAD><STYLE type=<STYLE type=""text/csstext/css"">>.elso{.elso{background-color:rgb(0,0,255);background-color:rgb(0,0,255);font-size:20px;font-size:20px;}}</STYLE></STYLE><BODY><BODY><DIV class=<DIV class=""elsoelso""> Szöveg </DIV>> Szöveg </DIV>....
<DIV> formázási <DIV> formázási lehetőségeilehetőségei
ElhelyezésElhelyezés:: position:absolute/relative; - a <DIV> típusának position:absolute/relative; - a <DIV> típusának
beállításabeállítása abolute – az elhelyezkedést pontosan adjuk megabolute – az elhelyezkedést pontosan adjuk meg relative – az oldalon eredetileg elfoglalt pozícióhoz relative – az oldalon eredetileg elfoglalt pozícióhoz
képest adjuk meg a beállításokatképest adjuk meg a beállításokat top:30px; right:40px; - pozíció: oldal tetejétől top:30px; right:40px; - pozíció: oldal tetejétől
30px távolságra, jobb szélétől 40px távolságra30px távolságra, jobb szélétől 40px távolságra top:30px; left:10px; - pozíció: oldal tetejétől top:30px; left:10px; - pozíció: oldal tetejétől
30px távolságra, bal szélétől 10px távolságra30px távolságra, bal szélétől 10px távolságra width:200px; - szélességwidth:200px; - szélesség A következőkben tárgyalt formázási lehetőségek nagy A következőkben tárgyalt formázási lehetőségek nagy
része is értelemszerűen használható a <DIV> része is értelemszerűen használható a <DIV> formázására.formázására.
Alapvető formázási Alapvető formázási lehetőségek CSS használatávallehetőségek CSS használatával
Háttér – body parancsra beállíthatóHáttér – body parancsra beállítható background-color:blue; - háttérszín, background-color:blue; - háttérszín,
megadható névvel és kóddal is megadható névvel és kóddal is background-image:url(background-image:url(''filenev.jpgfilenev.jpg''); - ); -
háttérkép beállításaháttérkép beállítása background-repeat:ismétlés; - a background-repeat:ismétlés; - a
háttérképet alapértelmezetten háttérképet alapértelmezetten vízszintesen és függőlegesen is ismétli az vízszintesen és függőlegesen is ismétli az alapbeállítás, de ez átállíthatóalapbeállítás, de ez átállítható repeat-x – vízszintesen ismétel csakrepeat-x – vízszintesen ismétel csak repeat-y – függőlegesen ismétel csakrepeat-y – függőlegesen ismétel csak no-repeat – nem ismétli a háttérképetno-repeat – nem ismétli a háttérképet
Háttér formázás (folyt.)Háttér formázás (folyt.)
background-attachment:fixed; - a background-attachment:fixed; - a háttérkép mindig ugyanott marad, nem háttérkép mindig ugyanott marad, nem görgethető az oldal tartalmával együtt görgethető az oldal tartalmával együtt
background-position:vízszintes background-position:vízszintes függőleges; - a háttérkép vízszintes és függőleges; - a háttérkép vízszintes és függőleges pozícióját adja meg, értékei:függőleges pozícióját adja meg, értékei: vízszintes: left/center/rightvízszintes: left/center/right függőleges: top/middle/bottomfüggőleges: top/middle/bottom
A kód egyszerűsítéseA kód egyszerűsítése
Mindezek a beállítások megadhatóak Mindezek a beállítások megadhatóak egyben is (rövidítve), szóközzel egyben is (rövidítve), szóközzel elválasztva a leírt sorrendben elválasztva a leírt sorrendben megadvamegadva
Pl.:Pl.:body{background:#FFFFFF url(body{background:#FFFFFF url(''kep-kep-jpgjpg'') no-repeat right top;}) no-repeat right top;}
BekezdésformázásokBekezdésformázások
A különböző bekezdésformázó tag-ek A különböző bekezdésformázó tag-ek is formázhatóak külön-külön (pl.: h1, is formázhatóak külön-külön (pl.: h1, h2,… p, a). Beállítható:h2,… p, a). Beállítható: color:szín; - bekezdés karaktereinek color:szín; - bekezdés karaktereinek
színe, megadható hexadecimális vagy színe, megadható hexadecimális vagy RGB-kóddal, de színnévvel is (bodynál is RGB-kóddal, de színnévvel is (bodynál is használható)használható)
text-align:center/right/justify – szöveg text-align:center/right/justify – szöveg vízszintes igazításavízszintes igazítása
Bekezdésformázások (folyt.)Bekezdésformázások (folyt.)
text-decoration:érték; - szöveg text-decoration:érték; - szöveg díszítésére, értékei:díszítésére, értékei:
overline – szöveg fölé vonaloverline – szöveg fölé vonal line-through – szöveg áthúzásaline-through – szöveg áthúzása underline – szöveg aláhúzásaunderline – szöveg aláhúzása blink – villogó szövegblink – villogó szöveg none – ne legyen semmilyen dekoráció (link none – ne legyen semmilyen dekoráció (link
aláhúzás megszüntetésére)aláhúzás megszüntetésére) text-indent:20px; - a bekezdés első text-indent:20px; - a bekezdés első
sorának behúzásasorának behúzása
Bekezdésformázások (folyt.)Bekezdésformázások (folyt.)
text-transform:érték; - szöveg text-transform:érték; - szöveg átalakítása, értékei:átalakítása, értékei:
uppercase – csak nagybetűkuppercase – csak nagybetűk lowercase – csak kisbetűklowercase – csak kisbetűk capitalize – minden szó első betűje nagybetűcapitalize – minden szó első betűje nagybetű
Margók:Margók: margin-top:20px; – felső margómargin-top:20px; – felső margó margin-bottom:20px; – alsó margómargin-bottom:20px; – alsó margó margin-right:20px; – jobb oldali margómargin-right:20px; – jobb oldali margó margin-left:20px; – bal oldali margómargin-left:20px; – bal oldali margó
Font formázásokFont formázások
font-family:betűtípus megadása, de font-family:betűtípus megadása, de célszerű nem csak a pontos nevet célszerű nem csak a pontos nevet megadni, így 3 értéket adnak meg:megadni, így 3 értéket adnak meg: font pontos nevefont pontos neve font családjafont családja általános család, értéke lehet:általános család, értéke lehet:
serif: talpas betűtípusserif: talpas betűtípus sans-serif: talpatlan betűtípussans-serif: talpatlan betűtípus monospace: minden karaktere azonos szélességűmonospace: minden karaktere azonos szélességű
Pl.: p{font-family:Pl.: p{font-family:""Times New RomanTimes New Roman"", Times, , Times, serif;}serif;}
Font formázások (folyt.)Font formázások (folyt.)
font-style:italic; - dőlt betű beállításárafont-style:italic; - dőlt betű beállítására font-size:20px; - betűméret beállítása (a font-size:20px; - betűméret beállítása (a
betűméret megadható em betűméret megadható em mértékegység-gel is, ami a pixel érték mértékegység-gel is, ami a pixel érték osztva 16-tal)osztva 16-tal)
font-variant:small-caps; - kiskapitális font-variant:small-caps; - kiskapitális szövegszöveg
font-weight:normal/bold/bolder/lighter; - font-weight:normal/bold/bolder/lighter; - karakterek vastagsága (bold = félkövér)karakterek vastagsága (bold = félkövér)
Linkek formázásaLinkek formázása
4-féle különböző hivatkozást 4-féle különböző hivatkozást formázhatunk külön-külön:formázhatunk külön-külön: a:link – normál, még nem látogatott link a:link – normál, még nem látogatott link a:visited – már látogatott link a:visited – már látogatott link a:hover – amikor az egeret áthúzzuk a a:hover – amikor az egeret áthúzzuk a
link felett link felett a:active – épp aktív (rákattintás és a:active – épp aktív (rákattintás és
betöltés közti idő) betöltés közti idő)
Linkek formázása (folyt.)Linkek formázása (folyt.)
A különböző linkek mindegyikére A különböző linkek mindegyikére beállíthatjuk a következőket:beállíthatjuk a következőket: color:szín;color:szín; text-decoration:érték;text-decoration:érték; background-color=szín; - csak a link background-color=szín; - csak a link
szövegének háttérszíneszövegének háttérszíne
Listák formázásaListák formázása
list-style-type:típus; - az adott lista list-style-type:típus; - az adott lista típusa, értéke lehet:típusa, értéke lehet: felsorolásnál (ul): square (négyzet), felsorolásnál (ul): square (négyzet),
circle (karika)circle (karika) számozásnál (ol): upper-roman (római számozásnál (ol): upper-roman (római
számok), lower-alpha (kisbetűk)számok), lower-alpha (kisbetűk) list-style-image: url(list-style-image: url(''kep.gifkep.gif''); - csak ); - csak
felsorolásnál (ul) kép is beállítható felsorolásnál (ul) kép is beállítható felsorolásjelnekfelsorolásjelnek
Táblák formázásaTáblák formázása width:100% - <table>, <th>, <td> width:100% - <table>, <th>, <td>
tag-ekretag-ekre height:50px – <table>, <tr> tag-ekreheight:50px – <table>, <tr> tag-ekre text-align:left/center/right - <td>-re text-align:left/center/right - <td>-re
beállítható a szöveg vízszintes beállítható a szöveg vízszintes igazításaigazítása
vertical-align:top/middle/bottom - vertical-align:top/middle/bottom - <td>-re beállítható függőleges igazítás<td>-re beállítható függőleges igazítás
color:szín;color:szín; background-color:szín;background-color:szín;
bármely táblázattal bármely táblázattal kapcsolatos tag-rekapcsolatos tag-re
Táblák formázása (folyt.)Táblák formázása (folyt.) padding:25px; – cellamargó (cella padding:25px; – cellamargó (cella
szél és szöveg közti távolság), szél és szöveg közti távolság), <TABLE> és <TD> tag-re is <TABLE> és <TD> tag-re is beállíthatóbeállítható Külön is beállítható a 4 oldalra:Külön is beállítható a 4 oldalra:
padding-top:25px; - felsőpadding-top:25px; - felsőpadding-bottom:25px; - alsópadding-bottom:25px; - alsópadding-right:50px; - jobb oldalipadding-right:50px; - jobb oldalipadding-left:50px; - bal oldalipadding-left:50px; - bal oldali
KeretezésKeretezés border-width:2px; - keret méreteborder-width:2px; - keret mérete border-color:szín; - keret színeborder-color:szín; - keret színe border-style:stílus; - keret stílusa, értékei border-style:stílus; - keret stílusa, értékei
lehetnek:lehetnek: none – nincs keret, dotted – pontozott, dashed none – nincs keret, dotted – pontozott, dashed
– szaggatott vonalas, solid – normál vonal, – szaggatott vonalas, solid – normál vonal, double – dupla vonalas, groove – 3D-s keret, double – dupla vonalas, groove – 3D-s keret, ridge – 3D-s árnyékolt keretridge – 3D-s árnyékolt keret
A keretek stílusát külön is meg lehet adni A keretek stílusát külön is meg lehet adni a 4 oldalra: border-top/right/bottom/left-a 4 oldalra: border-top/right/bottom/left-style: stílus; beállítássalstyle: stílus; beállítással
Keretezés (folyt.)Keretezés (folyt.) A 3 keretformázási lehetőség egyben A 3 keretformázási lehetőség egyben
is megadható: is megadható: méret stílus színméret stílus szín sorrendben:sorrendben: Pl.: table, th, td {Pl.: table, th, td {
border: 1px solid black;}border: 1px solid black;}