Fórumok / CSS / 2. Lecke - Naruto és Naruto Shippuuden

Fórumok

Naruto és Naruto Shippuuden :: Fórumok :: Programozzunk Stein-el! :: CSS		<< Előző téma \| Következő téma >>
2. Lecke


Moderátorok: admin, joe san, Sakura08

Szerző

Üzenet

admin

Fri Jan 10 2014, 04:03PM

Regisztrált tag #1

Regisztrált: Thu Aug 11 2011, 04:57PM
Üzenetek: 107

Én itt csak DIV eket fogok használni, de még egyszer leírom ezeket szinte minden html tag-re lehet használni!

Kezdjük egy alap példával:
Egy div-nek meg adom ezeket a paraméterek:
- háttérszín
- hosszúság
- szélesség
- keret

A paraméter végét le kell zárni pontos vesszővel! Ez nagyon FONTOS!

HTML tartalma:
CSS tartalma:
Eredmény:

Beszéljünk kicsit a háttérről:
3 féle "background" parancs létezik:
1.) background: /szín vagy kép/;
2.) background-color: /csak szín/;
3.) background-image: /csak kép/;

Plusz!
background-attachment: fixed; <= A háttér nem mozog a weboldallal együtt, fix marad!
background-repeat: no-repeat / repeat-x / repeat-y; <= 1 értéket kell megadni ezek közül
no-repeat: nincs ismétlődés
repeat-x: X tengelyes (vízszintes) ismélődés
repeat-y: Y tengelyes (függöleges) ismétlődés

Képet úgy lehetséges megadni hogy:
background-image: url(képelérésiútvonala.kiterjesztés);

Kerekítsük le a széleit a doboznak!
Egészítsd ki a CSS-t ezzel a sorral:
border-radius: 10px;

Eredmény ez lesz:

Jöhet a margózás...
A "margin"-nak 4 paramétert kell megadni (pixelben vagy százalékban) a sorrend a következő:
- top (felső)
- right (jobb oldali)
- bottom (alsó)
- left (bal oldali)

egészítsd ki a CSS tartalmát ezzel:
margin: 5px 4px 3px 25px;

Az eredmény annyi lesz hogy kicsit el lesz tolódva a lekerekített négyzetünk:

Állítsuk be hogy ne szín kegyen a háttere hanem egy kép!
background-color: red; ezt a sort!
Írd át erre: background-image: url("http://i462.photobucket.com/albums/qq343/jair_ben10/th_naruto_avatar.png");
(Ha a kép a CSS fájlod mellett van akkor elég csak a nevét és a kiterjesztését beírni!)

Eredmény:

Jöjjön egy kis móka, csináljuk meg ha rávisszük az egeret akkor változzon kékké.
HTML:
CSS:
Erre jó a :hover paraméter a CSS-ben az adott stílus neve mellett!

Eredmény:

Egeret ide :D

:hover segítségével egy adott HTML tag bármilyen CSS paraméterét meg tudjuk változtatni (természetesen csak akkor változik meg ha az egész az adott terület fölött van!)

Röviden a szöveg formázásról: (csak az alapok)
Egy adott területen belül, legyen az DIV, A, PRE, P vagy bármi aminek van nyitó és lezáró tag-je, a szöveget meg lehet formázni.

Dióhéjban minden fontosabb dologról volt szó...:

Egy komolyabb CSS file:
http://users.atw.hu/naruto/e107_themes/AnimeStar-Naruto/style.css

Ajánlom ezt a weboldalt a CSS paraméterek átnézésére.
http://www.w3schools.com/

Mentségemre szóljon hogy ezt borzalmas magyarázni Interneten :D és nem is nőtt a szívemhez a stílusgyártás :D

[ Módosítva Thu Jan 23 2014, 11:56AM ]

Vissza az elejére


Ugrás: Vissza az elejére