WCSS (Wap CSS), Wireless CSS

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "WCSS (Wap CSS), Wireless CSS"

Liliána Gál
7 évvel ezelőtt
Látták:

1 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

2 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

3 WCSS fájlok kiterjesztése: ".css" WCSS fájloknak a MIME-típusa (tartalomtípus): "text/css" 3

4 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

5 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

6 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

7 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

8 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

9 Megjegyzések a WCSS-ben p { /* egysoros megjegyzés */ /* többsoros megjegyzés */ text-align: right; /* comment */ color: blue } 9

10 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

11 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

12 Belső WCSS <head> <title>xhtml Mobile Profile 3</title> <style type="text/css"> p { text-align:center; } </style> </head> 12

13 Jelölőelembe rendelt stíluslap (inline) <body> <p style="text-align:right;"> content </p> </body> 13

14 Osztály (class) <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " <html xmlns=" <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

15 Univerzális szelektor <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" " <html xmlns=" <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

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

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

18 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

19 Attribútum értékei 1. hossz (length) 2. szín (color) 3. URL 19

20 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

21 Hossz (length) cm mm in pt -- Point. 1 pt = 1/72 in pc -- Pica. 1 pc = 12 pt 21

22 rgb(r%, g%, b%) r, g b értékek rgb(r, g, b) r, g b értékek 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

23 Színek Aqua rgb(0, 255, 255) #00ffff Black rgb(0, 0, 0) # Blue rgb(0, 0, 255) #0000ff Fuchsia rgb(255, 0, 255) #ff00ff Gray rgb(128, 128, 128) # Green rgb(0, 128, 0) # Lime rgb(0, 255, 0) #00ff00 Maroon rgb(128, 0, 0) # Navy rgb(0, 0, 128) # Olive rgb(128, 128, 0) # Purple rgb(128, 0, 128) # Red rgb(255, 0, 0) #ff0000 Silver rgb(192, 192, 192) #c0c0c0 Teal rgb(0, 128, 128) # White rgb(255, 255, 255) #ffffff Yellow rgb(255, 255, 0) #ffff00 23

24 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

25 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:

26 Á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

27 Betűméret kiválasztása <head> <style type="text/css"> p { font-size: 2em; } </style> </head> <body> <p>internet</p> </body> 27

28 Betűméret kiválasztása smaller larger xx-small x-small small medium large x-large xx-large default: medium 28

29 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

Hasonló dokumentumok

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem

Informatika 1 CSS. Kovács Kristóf, Pálovics Róbert, Wettl Ferenc november 4. Budapesti M szaki Egyetem Informatika 1 CSS Kovács Kristóf, Pálovics Róbert, Wettl Ferenc Budapesti M szaki Egyetem 2014. november 4. CSS CSS: Cascading Style Sheets CSS CSS: Cascading Style Sheets Cél: a tartalom és a megjelenítés