WCSS (Wap CSS), Wireless CSS A WCSS (WAP Cascading Style Sheet vagy WAP CSS) mobil változata a CSS-nek. WAP speciális kiterjesztéseket tartalmaz. Azok a CSS2 jellemzők és tulajdonságok, amelyek nem hasznosak a mobil internetes alkalmazásoknál, nem szerepelnek a WAP CSS-ben. A WAP CSS társa az XHTML Mobile Profile (XHTML MP). Mindketten WAP 2.0 specifikációban vannak meghatározva. 1
WCSS (Wap CSS), Wireless CSS Ha szeretnénk megváltoztatni a megjelenését egy dokumentumnak a böngészőben, akkor csak módosítania kell a CSS stíluslapokat. Ez a funkció nagyon hasznos a vezeték nélküli világban, ahol a különböző mobil eszközökön eltérőek voltak a jellemzők (mint például a mobiltelefonon a képméret). 2
WCSS fájlok kiterjesztése: ".css" WCSS fájloknak a MIME-típusa (tartalomtípus): "text/css" 3
A WCSS használatának az előnyei A tartalmat és a bemutatást el lehet választani egymástól. A különböző mobiltelefonokon különböző a képméret,de a tartalom fájlokat nem kell módosítani. Több oldal használhatja ugyanazt a stíluslapot Elősegíti a munkamegosztást (dizájn és tartalom) 4
A WCSS használatának az előnyei Csak egyszer, az első alkalommal törtenik a letöltés. A CSS fájlt ezután a böngésző átmeneti tárolójába menti, ahol hozzá lehet férni anélkül, hogy újra csatlakozna a szerverhez. A kisebb fájlméret előnye az, hogy rövidebb a letöltési ideje. 5
A WCSS használatának hátrányai Különböző WAP böngészők különböző szinten támogatják a WCSSt. A mobiltelefon először letölti az XHTML MP dokumentumot, majd elemzi az XHTML MP dokumentum kódját, megkeresi a WAP CSS stíluslap címét, és egy kérést küld a szervernek hogy letöltse a fájlt. 6
A WCSS használatának hátrányai Ha egy WAP CSS fájl adja az összes bemutató információkat az oldalra, a WAP CSS fájl mérete igen nagy lehet. A WAP-böngészőnek értelmeznie kell a WCSS mellett az XHTML MP dokumentumot. 7
Szintaxis szabályai WCSS szelektor {attribútum: érték} p {text-align: right} szelektor {attribútum1: érték1; attribútum2: érték2;... attribútumn: értékn} p {text-align: right; color: blue} szelektor1, szelektor2,... szelektorn {attribútum1: érték1} p, h1 {text-align: right; color: blue} 8
Megjegyzések a WCSS-ben p { /* egysoros megjegyzés */ /* többsoros megjegyzés */ text-align: right; /* comment */ color: blue } 9
WCSS stílusok alkalmazása 1. Csatolt stíluslap (külső fájl) 2. Beépítet stíluslap (belső) 3. Jelölőelembe rendelt stíluslap (inline) 10
Külső WCSS <head> <link href="file.css" rel="stylesheet" type="text/css"/> <title>wcss</title> </head> <link href="file1.css" rel="stylesheet" type="text/css"/> <link href="file2.css" rel="stylesheet" type="text/css"/> 11
Belső WCSS <head> <title>xhtml Mobile Profile 3</title> <style type="text/css"> p { text-align:center; } </style> </head> 12
Jelölőelembe rendelt stíluslap (inline) <body> <p style="text-align:right;"> content </p> </body> 13
Osztály (class) <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">.class1 {color: blue} h2.class2 {color: red} #class3 {color:green} </style> <title>wcss Tutorial</title> </head> <body> <h1 class= class1 >WCSS 1</h1> <h1 id= class3 >WCSS 3</h1> </body> </html> 14
Univerzális szelektor <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> * { color: blue } </style> <title>wcss Tutorial</title> </head> <body> <h1>table of Contents</h1> <hr/> <p> WCSS Tutorial Chapter 1<br/> WCSS Tutorial Chapter 2<br/> WCSS Tutorial Chapter 3<br/> </p> </body> </html> 15
<div> jelölőelem <head> <style type="text/css">.red{ color: red; } </style> </head> <body> <div class="red"> <h1>internet</h1> <p> XHTML MP<br/> WCSS </p> </div> </body> 16
<span> jelölőelem <head> <style type="text/css">.red{ color: red; }.blue { color:blue; } </style> </head> <body> <h1>internet</h1> <p> XHTML <span class="red">mp</span><br/> <span class="blue">wcss</span> </p> </body> 17
Lépcsőzetes szabályok <head> <link href="10.css" rel="stylesheet" type="text/css"/> <style type="text/css">.blue { color:blue; } </style> </head> <body> <h1>internet</h1> <p> XHTML <span class="blue">wcss</span> </p> </body>.blue { color:yellow; } 18
Attribútum értékei 1. hossz (length) 2. szín (color) 3. URL 19
Hossz (length) Hossz értékeket használunk a magasság, szélesség, vastagság meghatározására. A hosszúság értékei a következő egységek lehetnek : % px em -- font size 12 points, 1 em = 12 points, 2.5 em = 30 points ex -- x-magassága a betűnek ("x" character) font size 12 points, 1 ex = 6 points 2.5 ex = 15 points 20
Hossz (length) cm mm in pt -- Point. 1 pt = 1/72 in pc -- Pica. 1 pc = 12 pt 21
rgb(r%, g%, b%) r, g b értékek 0-100 rgb(r, g, b) r, g b értékek 0-255 Színek #rrggbb r, g b hexa értékek (0-9, a-f) #ff dd aa #rgb #fda r, g b hexa értékek (0-9, a-f) 22
Színek Aqua rgb(0, 255, 255) #00ffff Black rgb(0, 0, 0) #000000 Blue rgb(0, 0, 255) #0000ff Fuchsia rgb(255, 0, 255) #ff00ff Gray rgb(128, 128, 128) #808080 Green rgb(0, 128, 0) #008000 Lime rgb(0, 255, 0) #00ff00 Maroon rgb(128, 0, 0) #800000 Navy rgb(0, 0, 128) #000080 Olive rgb(128, 128, 0) #808000 Purple rgb(128, 0, 128) #800080 Red rgb(255, 0, 0) #ff0000 Silver rgb(192, 192, 192) #c0c0c0 Teal rgb(0, 128, 128) #008080 White rgb(255, 255, 255) #ffffff Yellow rgb(255, 255, 0) #ffff00 23
Színek <style type="text/css">.red{ color: #f00; }.blue { color:rgb(0, 0, 255); }.yellow { color:yellow;.green { color:rgb(100%, 0%, 0%); } </style> <body> <h1 class="red">internet</h1> <h1 class="blue">internet</h1> <h1 class="yellow">internet</h1> <h1 class="green">internet</h1> </body> 24
Betűtípusok kiválasztása <head> <style type="text/css"> body { font-family:tahoma, "Times New Roman", Verdana; } </style> </head> <body> <p>internet</p> </body> 25
Általános betűcsalád <p style="font-family: serif">serif</p> <p style="font-family: sans-serif">sans-serif</p> <p style="font-family: monospace">monospace</p> <p style="font-family: cursive">cursive</p> <p style="font-family: fantasy">fantasy</p> <p style="font-family: Arial, Helvetica, sansserif">arial</p> serif sans-serif monospace cursive fantasy Times New Roman Arial, Helvetica Courier Zapf-Chancery, Caflisch Script Western, Critter 26
Betűméret kiválasztása <head> <style type="text/css"> p { font-size: 2em; } </style> </head> <body> <p>internet</p> </body> 27
Betűméret kiválasztása smaller larger xx-small x-small small medium large x-large xx-large default: medium 28
Betűstílus kiválasztása <style type="text/css"> p {font-style: italic;} h1 {font-weight: bold;} h2 {text-decoration: underline;} </style> <body> <p>internet</p> <h1>vts</h1> <h2>subotica</h2> </body> 29