Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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) A tag alkalmas.

Hasonló előadás


Az előadások a következő témára: "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) A tag alkalmas."— Előadás másolata:

1 A tag és formázás CSS-sel

2

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

3 CSS A CSS (Cascading Style Sheets) segítségével a HTML oldalunk tetszőlegesen formázható 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 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 közé írandó kód: a közé írandó kód: a CSS-kódot az adott HTML fájlba is írhatjuk, a közé a CSS-kódot az adott HTML fájlba is írhatjuk, a közé és tag-ek közé kerül és tag-ek közé kerül

4 CSS (folyt.) A formázás megadása két fő részre osztható 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 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; 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;}

5 CSS (folyt.) Megjegyzést rakhatunk /* és */ jelek közé Megjegyzést rakhatunk /* és */ jelek közé Ha esetén szeretnénk sok formázási utasítást használni, akkor először kell egy osztálynevet adni az adott -nek a class opcióval. Ha esetén szeretnénk sok formázási utasítást használni, akkor először kell egy osztálynevet adni az adott -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 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

6 CSS (folyt.) .elso{background-color:rgb(0,0,255);font-size:20px;} Szöveg Szöveg..

7 formázási lehetőségei formázási lehetőségei Elhelyezés: position:absolute/relative; - a típusának beállítása position:absolute/relative; - a típusának beállítása abolute – az elhelyezkedést pontosan adjuk meg abolute – az elhelyezkedést pontosan adjuk meg relative – az oldalon eredetileg elfoglalt pozícióhoz képest adjuk meg a beállításokat 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; 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 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 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 formázására. A következőkben tárgyalt formázási lehetőségek nagy része is értelemszerűen használható a formázására.

8 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-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-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ó 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-x – vízszintesen ismétel csak repeat-y – függőlegesen ismétel csak repeat-y – függőlegesen ismétel csak no-repeat – nem ismétli a háttérképet no-repeat – nem ismétli a háttérképet

9 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-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: 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 vízszintes: left/center/right függőleges: top/middle/bottom függőleges: top/middle/bottom

10 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 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;} Pl.: body{background:#FFFFFF url('kep-jpg') no-repeat right top;}

11 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ó: 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ó) 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 text-align:center/right/justify – szöveg vízszintes igazítása

12 Bekezdésformázások (folyt.) text-decoration:érték; - szöveg díszítésére, értékei: text-decoration:érték; - szöveg díszítésére, értékei: overline – szöveg fölé vonal overline – szöveg fölé vonal line-through – szöveg áthúzása line-through – szöveg áthúzása underline – szöveg aláhúzása underline – szöveg aláhúzása blink – villogó szöveg blink – villogó szöveg none – ne legyen semmilyen dekoráció (link aláhúzás megszüntetésére) 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 text-indent:20px; - a bekezdés első sorának behúzása

13 Bekezdésformázások (folyt.) text-transform:érték; - szöveg átalakítása, értékei: text-transform:érték; - szöveg átalakítása, értékei: uppercase – csak nagybetűk uppercase – csak nagybetűk lowercase – csak kisbetűk lowercase – 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ó

14 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-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 pontos neve font családja font családja általános család, értéke lehet: általános család, értéke lehet: serif: talpas betűtípus serif: talpas betűtípus sans-serif: talpatlan betűtípus sans-serif: talpatlan betűtípus monospace: minden karaktere azonos szélességű monospace: minden karaktere azonos szélességű Pl.: p{font-family:"Times New Roman", Times, serif;} Pl.: p{font-family:"Times New Roman", Times, serif;}

15 Font formázások (folyt.) font-style:italic; - dőlt betű beállítására 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-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-variant:small-caps; - kiskapitális szöveg font-weight:normal/bold/bolder/lighter; - karakterek vastagsága (bold = félkövér) font-weight:normal/bold/bolder/lighter; - karakterek vastagsága (bold = félkövér)

16 Linkek formázása 4-féle különböző hivatkozást formázhatunk külön-külön: 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: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 link felett 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ő) a:active – épp aktív (rákattintás és betöltés közti idő)

17 Linkek formázása (folyt.) A különböző linkek mindegyikére beállíthatjuk a következőket: A különböző linkek mindegyikére 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 szövegének háttérszíne background-color=szín; - csak a link szövegének háttérszíne

18 Listák formázása list-style-type:típus; - az adott lista típusa, értéke lehet: list-style-type:típus; - az adott lista típusa, értéke lehet: felsorolásnál (ul): square (négyzet), circle (karika) felsorolásnál (ul): square (négyzet), circle (karika) számozásnál (ol): upper-roman (római számok), lower-alpha (kisbetűk) 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 list-style-image: url('kep.gif'); - csak felsorolásnál (ul) kép is beállítható felsorolásjelnek

19 Táblák formázása width:100% -,, tag- ekre width:100% -,, tag- ekre height:50px –, tag-ekre height:50px –, tag-ekre text-align:left/center/right - -re beállítható a szöveg vízszintes igazítása text-align:left/center/right - -re beállítható a szöveg vízszintes igazítása vertical-align:top/middle/bottom - -re beállítható függőleges igazítás vertical-align:top/middle/bottom - -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 kapcsolatos tag-re

20 Táblák formázása (folyt.) padding:25px; – cellamargó (cella szél és szöveg közti távolság), és tag-re is beállítható padding:25px; – cellamargó (cella szél és szöveg közti távolság), és 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 oldali padding-left:50px; - bal oldali 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

21 Keretezés border-width:2px; - keret mérete border-width:2px; - keret mérete border-color:szín; - keret színe border-color:szín; - keret színe border-style:stílus; - keret stílusa, értékei lehetnek: 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 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 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

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


Letölteni ppt "A tag és formázás CSS-sel.

Hasonló előadás


Google Hirdetések