Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
CSS A CSS bemutatása
2
CSS CSS: Cascading Style Sheet / Rangsorolt stíluslapok A számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.
3
Előnyei Felhasználói szempont: - kisebb adatmennyiség, szebb, gyorsabb
Fejlesztői szempont: - Több formázási lehetőség. - Egyedibb weboldalak készítése - Akár egy fájl megváltoztatásával egy egész weboldal rendszer megjelenését módosíthatjuk.
4
A CSS nyelvtana A CSS-ben a stílusokat kijelölők és meghatározások segítségével lehet megadni. A kijelölők többnyire olyan HTML tagok melyek megadják, hogy a stílus a HTML lap mely elemeire vonatkozzon. Pl.: A p tag. Ami a weboldalon lévő összes bekezdést kijelöli.
5
A CSS nyelvtana Példa kijelölőre és meghatározásra. p{ font-family: Arial, Helvetica, sans-serif; font-size: medium; color: red; } Egy elemnek több tulajdonsága is beállítható egyszerre, ilyenkor az egyes meghatározások felsorolásszerűen követik egymást
6
A CSS nyelvtana Speciális kijelölők: - azonosító kijelölő: Egyszer használható egy oldalon. Általában olyan elemeknél használjuk ahol egy szerkezeti egységként szeretnénk formázni. PL.: fejléc, lábléc… jele:# meghívni az ‘ID’ attribútummal lehet. CSS: #lablec { color: green; } HTML: <ID=lablec>
7
A CSS nyelvtana Speciális kijelölők: - osztálykijelölő: Bármennyiszer használható egy oldalon. jele: .
8
A CSS nyelvtana CSS: H1 {color: grey} .kiem {font-size: 120%}
HTML-ben: <H1>címsor <SPAN CLASS=kiem>kiemeléssel</SPAN> a közepén</H1>
9
Példa (HTML) bekezdés kijelölés
<head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p> Hello World! </p> </body> </html>
10
Példa: (CSS) Bekezdés kijelölés
font-size=36pt; color=green; }
11
Példa HTML azonosító kijelölés
<head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p id="szoveg"> Hello World! </p> </body> </html>
12
Példa CSS azonosító kijelölés
#szoveg{ font-size=36pt; color=green; }
13
Példa HTML osztály kijelölés
<head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p class="szoveg"> Hello World! </p> </body> </html>
14
Példa CSS osztálykijelölés
.szoveg{ font-size=36pt; color=green; }
15
Néhány érték text-indent – bekezdés behúzás letter – spacing – betűköz
word – spacing – szó távolság text – decoration – szöveg minta (overline,underline,line-through,blink) padding – tartalom margón belüli elhelyezkedése (left,right,top,bottom) font-weight: bold,normal,” ”
16
Body background-image: url(hatter.gif); background-position: top left;
background-attachment: scroll; background-repeat: repeat; (repeat-x, repeat-y, no-repeat)
17
Keretek Border: 2px solid blue; További értékek: dashed, dotted
border-left,right,top,bottom
18
Margók Margin tulajdonság Margin-left,right,top,bottom
Margin-left: 10px
19
Pozícionálás position Értékei: static: eredeti hely
relative: eredeti helyen, eltolás absolute: szabad eltolás fixed: rögzített
20
Egérkurzor Cursor Értékek:
move, help, wait, text, e-resize, s-resize, se-resize, sw-resize, ne-resize, nw-resize, URL
21
Lebegés Kép igazítása szöveghez Float Értékek: left, right, none
22
Alelemek, alosztályok, alazonosítók
Egy <div>-en belüli osztályban egy másik osztályra való hivatkozás: .osztaly1 .osztaly2 Azonosító: #azonosito1 #azonosito2 Elem: table p Vegyes: .osztaly1 #azonosito1
23
További kijelölők.. Leszármazottkijelölő body h1 { color: blue; }
Gyermekkijelölő div > p { color:blue; }
24
További kijelölők Egyszerű jellemző kijelölő
h1[class] { color: blue; } Pontos jellemzőérték kijelölő h1[class=„érték”] { color: blue; }
25
További elemek : hover: egér objektum felé kerül
: after: elem utáni tartalom (content: „példa”) : before: elem előtti tartalom : link: azok a linkek, melyeket még nem kerestünk fel : visited: azok a linkek, melyeket már felkerestünk
26
További lehetőségek.. outline-style: dashed, dotted, solid
bekezdés körvonala outline-width: 0.. vonal vastagsága padding-bottom: belső margó alsó részének a vastagsága. További fajtái: left, right, top word-spacing: 20px szavak közötti távolság
Hasonló előadás
