Cascading Style Sheet.

Az előadások a következő témára: "Cascading Style Sheet."— Előadás másolata:

1 Cascading Style Sheet

2 Történet Beindult a web Új elképzelés: CSS
újabb és újabb igények a szép megjelenéshez pl. <font size =4 face=Arial>…</font> de így nem lehet igazán eredményt elérni Új elképzelés: CSS 1997-ben kialakították az alapelképzelést 1998-ban CSS1 1999-ben CSS2

3 Tapasztalatok Nem nagyon elterjedt Előny Hátrány: okok html 4.0 felett
browser 4.x felett html-szerkesztők nem nagyon támogatják Előny hasznos - sokkal egyszerűbb a munka Hátrány: új nyelvet kell megtanulni

4 CSS alapjai Két bázison nyugszik: Szabály: szabályok (rules)
stíluslapok (sheets) - ami egy v. több szabályt tartalmaz Szabály: H1 {color: red} selector declaration property value

5 Formai jelölés Összevonás a szabályoknál Több tulajdonság egyszerre
több szelektor: vessző Több tulajdonság egyszerre több deklaráció: pontosvessző Bonyolult érték több “value”: szóköz H1, H2, H3 {color: red; font: 30px Bodoni; }

6 Bonyolultabb formák Értékhierarchia vesszővel Függvényszerű
BODY {font: 30px Bodoni, serif} Függvényszerű BODY { background: url(texture.gif) }

7 Használat Alapvetően a standard HTML-elemekre
H1, H2, H3 {color: red; text-align: center } BODY { background: url(texture.gif) } Nem standard elemekre: 2 új HTML-tag <DIV …> - division: sok html-részt egybe <SPAN …> - span over: egy html-elem kisebb része

8 HTML és CSS összefűzése
STYLE elemmel <STYLE TYPE="text/css"> … </STYLE> LINK elemmel <LINK REL=STYLESHEET TYPE="text/css" HREF=" TITLE="Cool"> közvetlen STYLE attributummal <P STYLE=“text-align : center”> elemmel (STYLE-on belül) @import url(

9 STYLE elem HEAD-ben vagy BODY-ban
hogy ne zavarja a gyengébb browser-t: <!-- ….. --> (mint JavaScript-nél) elvileg több stílus-lap nyelv is lehet <STYLE TYPE="text/css">

10 Kaszkádolás Ez van a CSS nevében is! Értelmezés az objektum-fa alapján
Alapeset: P B, P EM { color: red } Egyéb példa UL UL { color: green } UL UL UL { color: red }

11 Öröklődés HTML-fában kell értelmezni mindig a legspecifikusabb hat !
TITLE BODY H P UL LI LI LI <STYLE TYPE="text/css"> BODY {text-align: center } LI {color: red} </STYLE> Aktuális stílus itt: {text-align: center, color: red}

12 Öröklődés problémái Bizonyos tulajdonságok öröklődnek (pl. color)
legspecifikusabb hat Bizonyosok nem öröklődnek nem tud öröklődni: LI-nél nincs background traszparencia van a body/background-nál

13 CLASS Speciális flag (pont) kell az azonosító elé
<STYLE TYPE=“text/css”> .Polonius {font-weight: bold; color: red } .Hamlet {font-weight: normal; color: blue} </STYLE> <P CLASS=Polonius>Polonius: … </P>

14 ID Speciális flag (hash) kell az azonosító elé
<STYLE TYPE=“text/css”> #underl {text-decoration: underline; color: green } </STYLE> <P ID=underl> Underlined text </P>

15 Kaszkádolás 2. Összekapcsolás már a deklarációban Kontext-szenzitiv
<STYLE TYPE=“text/css”> P.Polonius {font-weight: bold; color: red } </STYLE> <STYLE TYPE=“text/css”> H1 EM {color: red} OL OL { list-style: upper-alpha} </STYLE>

16 Pszeudó osztályok Speciális flag (kettőspont) kell az azonosító elé
A:visited {text-decoration: none; color: green } tipus pszeudó osztály Cascading style sheets (CSS) are an elegantly designing extension to the Web.

17 Pszeudó osztályok és elemek
LINK, VISITED, ACTIVE az A-hoz <A…> … </A> FIRST-LINE, FIRST-LETTER <STYLE TYPE=“text/css”> P.Polonius {font-weight: bold; color: red } P.Polonius:FIRST-LETTER {font-size: 200%; color: blue } </STYLE> kaszkádolás dupla méret

18 Pszeudó bonyolultabban
Pszeudó kaszkádolással ha egy kép a referencia A:link IMG { border: solid blue } Osztály és pszeudó-osztály együtt A.external:visited { color: blue } <A href=“aaa.bbb.ccc/ddd” class=“external”>valami</A>

19 DIV és SPAN Lehet így is: Főleg CLASS-szal használjuk
Kaszkádolás gyakori Lehet így is: <STYLE TYPE=“text/css”> DIV.Poem { ... } SPAN.Flower { ... } </STYLE> kaszkádolás < STYLE TYPE=“text/css”> SPAN { ... } </ STYLE > összes SPAN-re

20 CSS és XML quote.css example.xml
property {display: inline; font-style: italic; color: rgb(000,000,128);} quote, title, comment {display: block; margin: 0.5em;} title {font-size: 1.5em;} example.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="quote.css"?> <quote> <title> The quick brown fox jumps over the lazy dog </title> <comment> This quote has <property>all the alphabets</property> of the English language </comment> </quote>

21

22 Alkalmazás: gomb eltüntetése
<html><head> <script> function printPage() { if (window.print) { buttonPrint.off; // VAGY document.getElementById("buttonPrint").className="off"; window.print(); buttonPrint.on; } </script> </head><body> ... <input type="button" value="Nyomtatás" name=”Oldal nyomtatása" id="buttonPrint" class="on" onClick="printPage()"> ... </body></html>