CSS A CSS bemutatása
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.
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.
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.
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
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>
A CSS nyelvtana Speciális kijelölők: - osztálykijelölő: Bármennyiszer használható egy oldalon. jele: .
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>
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>
Példa: (CSS) Bekezdés kijelölés font-size=36pt; color=green; }
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>
Példa CSS azonosító kijelölés #szoveg{ font-size=36pt; color=green; }
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>
Példa CSS osztálykijelölés .szoveg{ font-size=36pt; color=green; }
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,”400-700”
Body background-image: url(hatter.gif); background-position: top left; background-attachment: scroll; background-repeat: repeat; (repeat-x, repeat-y, no-repeat)
Keretek Border: 2px solid blue; További értékek: dashed, dotted border-left,right,top,bottom
Margók Margin tulajdonság Margin-left,right,top,bottom Margin-left: 10px
Pozícionálás position Értékei: static: eredeti hely relative: eredeti helyen, eltolás absolute: szabad eltolás fixed: rögzített
Egérkurzor Cursor Értékek: move, help, wait, text, e-resize, s-resize, se-resize, sw-resize, ne-resize, nw-resize, URL
Lebegés Kép igazítása szöveghez Float Értékek: left, right, none
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
További kijelölők.. Leszármazottkijelölő body h1 { color: blue; } Gyermekkijelölő div > p { color:blue; }
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; }
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
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