Cascading Style Sheet

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

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

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

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; }

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

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

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

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">

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 }

Öröklődés HTML-fában kell értelmezni mindig a legspecifikusabb hat ! TITLE BODY H1 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}

Ö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

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>

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>

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>

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.

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

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>

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

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>

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>