Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
A <DIV> tag és formázás CSS-sel
Hasonló előadás
Az előadások a következő témára: "A <DIV> tag és formázás CSS-sel"— Előadás másolata:
1
A <DIV> tag és formázás CSS-sel
2
<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
3
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
4
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
5
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é
6
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;}
7
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>
8
<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.)
9
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
10
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
11
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;}
12
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
13
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)
14
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;
15
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;}
16
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
17
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ő)
18
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
19
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)
20
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
21
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
22
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
23
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
24
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
25
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
26
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
Hasonló előadás