Aptech FPT

Bi 3: CSS v XSL
A. CSS
1

<?xml-stylesheet
2

1. C b n v CSS 1. C php cho khai bo CSS - Khai bo stylesheet l CSS cho m t ti li u XML l m t PI c c php sau: b t u b ng m t delimiter ch th x l (1). PI ny bao g m vi thu c tnh, th ng l type v href. type (2) c thi t l p ki u MIME (3) c a stylesheet, (v i CSS l text/css) cn href (4) l URL c a stylesheet (5). Khai bo k t thc b i delimiter (6). - V d :
<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="bookStyle.css"?> <book> <title>Tom Swift's Aerial Adventures</title> <chapter id="1" > <title>The Dirigible</title> ... type = "MIME-type"
3

href = "url-of-stylesheet" ?>

2. C php cho CSS - M t CSS bao g m m t selector (1) ph i so trng v i element v m t khai bo (2) m t ki u. Khai bo ny l danh sch cc c p tn tr (3), trong m i thu c tnh (4) c gn cho m t tr (5) b ng d u : - CSS cng c c php cho ch thch. Ch thch c bao b i c p /* v */ v nh v y s b qua khi x l CSS. - K t space dng cho vi c cung c p m t danh sch tr cho thu c tnh. - V d :
/* A simple example */ addressbook { display-type: block; font-family: sans-serif; font-size: 12pt; background-color: white; color: blue; }
1 3 4

1 2

selector { property1 : value1 ;

property2 : value2 ; }
4 5

element-name

[att1 = "val1"]

[att2 = "val2"]

2. So trng element - Xem v d trn, lu t trn ni r ng: V i m i element addressbook, hi n th n nh m t kh i, thi t l p font l
article

sans-serif v i kch th c font 12pt, thi t l p mu n n tr ng v mu ch xanh. Nh v y element addressbook c nh n ra b ng cch so trng v i selector tng ng. - C php cho m t selector nh sau: m t tn element (1) theo sau b i vi thu c tnh (2) trong d u ngo c vung (ty ch n), bn trong ch a m t thu c tnh (3) v tr c a n (4). V d : Selector sau s so trng v i element c tn planet v c attribute atmosphere:
planet[atmosphere]

display-type: block; font-family:sans-serif; font-size: 14pt; background-image: stripes.jpg; color: blue;

INHERITED

section

display-type: block; margin-top: 5mm; margin-bottom: 5mm; font-size: 12pt;

INHERITED

para

II. Cc thu c tnh (Property)

display-type: block; margin-top: 2mm; margin-bottom: 2mm;

Aptech FPT

1. S th a k thu c tnh - Cc thu c tnh CSS c th chuy n xu ng (cascading) t element container (element ch a cc element khc xu ng con c a c a n, lm n gi n vi c thi t k . V d c th thi t l p font cho document element v dng su t ti li u. Khi c n thay i font t i m t element con no , ch c n chn thu c tnh m i cho element t i i m che i thu c tnh ton c c. - V d (hnh bn): Cc thu c tnh font-family v color c th a k t article n para. Thu c tnh font-size c session nh ngha l i v che i thu c tnh th a k t article, para s th a k thu c tnh ny t section. - M t s thu c tnh khng th a k c nh thu c tnh background-image. 2. n v o - n v o tuy t i (absolute): l cc n v o l ng chu n: milimeter (mm), centimeter (cm), inche (in) ho c cc n v o dng trong ngnh in: point (pt) (1/72 inches) v pica (pc) (12pt). - n v o quan h (relative): tnh v i kch th c c a element ch a n, tnh theo %, ho c tnh b ng em (1 em b ng kch th c nguyn th y, v d font xu t hi n v i font 12pt th 1 em = 12pt). - V d :
b { font-size: 200% }

3. Ki u hi n th - Thu c tnh display c 3 ki u hi n th : block: hnh ch nh t c l p vn b n v i vn b n tr c v sau n, v d inline: n i dung khng ng t dng, v d t kha, siu lin k t. none: CSS processor s b qua cc o n ny. 4. Thu c tnh kh i - Cc thu c tnh kh i m t trong m t hnh ch nh t v hnh ngn cch n i dung c a kh i v i cc kh i ln c n. a) Margin (l ) - Margin l kho ng cch 4 bn gi a kh i v cc kh i ln c n. C 4 thu c tnh c th thi t l p: margin-left, margin-right, margin-top, margin-bottom. - C th dng thu c tnh margin thi t l p t t, theo sau margin: l m t danh sch tr cch nhau b ng space. 1 tr : cho t t c 4 margin, 2 tr : trn-d i v triph i, 3 tr : trn, tri-ph i, d i. Tr c th c d u m, n i dung trn ra ngoi kh i. - V d :
para { margin-left: 10em; margin-right: 10em; margin-top: 5% } para { margin: 5% 10em 0 }

o n vn b n, nhn, section ti li u.

Bounding Box Margin-top

Margin-left

This is some text inside a block. This is some text inside a block.
Margin-bottom

Padding

b) Border (vi n) - C ba tham s width: - V d :

nh ngha thu c tnh border. dy m ng c a vi n, b ng n v o tuy t i hay tng i, ho c m t trong ba tr : thin (m ng), medium (trung, m c nh), thick (dy). style: ki u vi n, c 8 tr : solid (li n), dashed ( t), dotted (ch m lin t c), groove (kh c chm), ridge (rng ca), double ( ng i), inset (trong dy ngoi m ng), outset (trong m ng ngoi dy). color: mu vi n.

border: thin solid green; border: red groove thick; border: inset blue 12pt;

c) Padding ( m) - Padding l kho ng cch gi a vi n v kh i, cn g i l l trong. C 4 thu c tnh: padding-top, padding-bottom, padding-left v padding-right, ho c dng chung m t thu c tnh padding. Cch thi t l p tng t margin.

Margin-right

Aptech FPT

d) Alignment v indentation (cn ch nh v th t u dng) - Dng thu c tnh text-align cn ch nh cc dng trong m t o n. C cc tr : left: canh l tri, m c nh right: canh l ph i. center: canh gi a. justify: canh u hai l . - Dng thu c tnh text-indent th t u dng dng u tin c a kh i. C th dng tr m (hanging, dng u nh ra nh t i n), n v o tuy t i ho c tnh b ng % chi u ngang c a kh i. 5. Thu c tnh vn b n a) Font - Thu c tnh font-family khai bo m t danh sch cc font c tham chi u, cch nhau b i d u ph y. B t u b i font ch nh v k t thc b i font chung nh t, danh sch li t k cc font theo u tin s d ng. M t s l p font chung trong hnh bn: - Tn font c d u space ph i ng b ng c p d u nhy. V d :
font-family: Palatino, "Times New Roman", serif; font-family: "BT Humanist 521", Palatino, serif;

b) Kch th c Font - Kch th c font c xc nh b i thu c tnh font-size. Th ng dng n v o tuy t i l point, ho c n v o tng i (% ho c ems). Ngoi ra c th dng cc t kha n a tuy t i (semi-absolute) nh sau: xx-small, x-small, small, medium, large, x-large, xx-large. Kch th c sau l n 1.2 l n so v i kch th c tr c. Ngoi ra cn cc t kha tng i: larger v smaller (tng gi m theo m t t l no ). c) Chi u cao dng v hi u ch nh kch th c font - Thu c tnh line-height nh h ng chi u cao c a font c ng v i kho ng cch trn n, ni cch khc l nh h ng kho ng cch gi a cc dng. V d :
para1 { line-height: 1 } para2 { line-height: 2 } para3 { line-height: 1.5 }

- Thu c tnh font-size-adjust c th dng t l x-height c a kch th c font.

bi n

i kch th c c a font trong thu ctnh font-family. Tr t l l

d) Style (ki u) v weight (d ng) font - Thu c tnh font-style cho php tng ch n vn b n. C 4 thi t l p c th : normal (bnh th ng), italic (nghing), oblique (l ch), inherit (th a k thu c tnh t element cha). - Thu c tnh font-weight i u khi n m nh t c a font. C cc tr : light (m ng), normal (bnh th ng), bold ( m), lighter (gi m weight 1 c p), bolder (tng weight 1 c p). C 9 c p tng gi m. e) Color - Mu s c l m t thu c tnh quan tr ng c a vn b n. C hai thu c tnh v mu: color dng cho mu ch v background-color cho mu n n. - Tr c th l m t tn mu c nh ngha tr c, cng th c rgb() v i tr % ho c 0-255, chu i # v i cc mu rgb c tr t 00 n FF. V d :
navy rgb(0%,0%,65%) rgb(0,0,160) #0000a0

6. Text c sinh -T ng sinh text l m t kh nng quan tr ng c a stylesheet. D ng chung c a sinh text t
content: string1 string2 ...

ng l:

Text ph i ng trong c p nhy kp. M t s hm sinh text: url( locator ) m m t file c URL ch b i locator v chn n i dung c a file vo i m attr( name ) chn tr c a m t thu c tnh v i tn name. counter( name ) c tr c a m t b m n i v i nhn name v chuy n n thnh text.

t hm ny.

Aptech FPT

B. XSL 1) Khi ni m - XSL t o b i cc ph n sau: XSLT (XSL Transformation), ngn ng d a trn XML, cho php bi n i m t ti li u XML thnh m t ti li u khc: XML, WML, HTML, XSL-FO (XSL Formatting Objects), ngn ng dng m t cc ti li u XML hi n th . - XSLT khng ph i l ngn ng l p trnh m nh l nh m thu c d ng khai bo. Ta khng ch nh cho my cch m ta mu n th c hi n, ta ch khai bo n i dung m ta mu n my th c hi n, v i s h tr c a cc template. - XSLT dng cc bi u th c XPath. XPath (XML Path) l ngn ng khng dng c php XML, dng truy xu t cc ph n khc nhau (element, attribute, ) c a cy ngu n t o t ti li u XML g c. Ta dng cc bi u th c XPath ch nh m t ng d n v tr ch chnh xc n ni c n n trong cy ngu n. - XSLT cho ta hai cch gom nhi u stylesheet vo m t: xsl:import : template trong stylesheet g c lun ch ng ln template c a stylesheet c import vo, khng quan tm n u tin, t o thnh m t cy import. V d : import xsl1.xsl, xsl2.xsl, xsl3.xsl vo root.xsl; sau import first.xsl v second.xsl vo xsl1.xsl. Ta c cy import:
root.xsl

xsl1.xsl

xsl2.xsl

xsl3.xsl

first.xsl

second.xsl

xsl:include : include m t stylesheet ngha l chn n i dung c a n tr c ti p vo stylesheet ch, nh l m t ph n c a stylesheet ch. Element <xsl:include> c attribute href, lu gi URI c a stylesheet c include

vo. - Khai bo dng stylesheet XSL cho m t ti li u XML nh sau:

<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="products.xsl"?> <productdata> <!-- N i dung ti li u XML --> </productdata>

2) XPath - XPath xem ti li u XML g c nh m t cy ngu n v i m i node l m t thnh ph n b t k (element, attribute, PI, ...). XSLT Processor s dng c ch so trng node duy t v i bi u th c XPath xc nh ng node c n n. a) ng d n v tr - ng d n v tr l m t bi u th c XPath s ch ni n trong ti li u. ng d n v tr c th tuy t i (b t u t root element) ho c tng i (b t u t g c ti li u document root, l ni ta b t u). XPath V d Gi i thch G c ti li u (document root) o, th ng <xsl:template match="/"> / trng v i root element. K t i di n, so trng v i b t k <xsl:template match="*"> element no trong ti li u XML. * So trng v i b t k attribute no trong ti <xsl:template match="@*"> li u XML. <xsl:template match="customer"> So trng v i tn c a element customer. element <xsl:template So trng v i element firstname ho c Element1| element2| match="firstname|lastname"> lastname. <xsl:template So trng element name ch a tr John, l Element[element] match="customer[name='John']"> con element customer.

Aptech FPT

Element[@attribute] Element[@attribute=value ] parent/child

<xsl:template match="customer[@custid]"> <xsl:template match="customer[@custid='1']"> <xsl:template match="/customer/firstname"> <xsl:template match="customerdetails//address"> <xsl:template match="//address"> <xsl:template match="//@id">

Ancestor//child

So trng attribute custid c a element customer. So trng t t c cc element customer, v c attribute custid c tr b ng 1. So trng element firstname l con c a customer, l con c a g c ti li u. So trng element address c element customerdetail l t tin. So trng m i element address, m i attribute id c trong ti li u.

b) Cc hm XPath - Dng tr v v tr m khng th so trng b ng cc m i quan h cha/con v element/attribute bnh th ng. - M t s hm XPath: + Cc hm x l node: name(): tr v tn m t v tr. V d : k t xu t tn m i element l con c a element product:
<xsl:template match="product"> <xsl:for-each select="*"> <p><xsl:value-of select="name()" /></p> </xsl:for-each> </xsl:template> node(): tr v chnh node. processing-instruction(): tr v cc PI. Hm ny c th c tham s . V d : K t xu t n i dung m i PI d ng <?AppName stuff?> <xsl:template match="processing-instruction( 'AppName' )"> <xsl:value-of select="." /> </xsl:template>

comment(): dng tr v cc ch thch. V d : K t xu t vn b n trong m i ch gi i. <xsl:template match="comment()"> <xsl:value-of select="." /> </xsl:template>
text(): tr v n i dung PCDATA m t node, k t qu chnh xc hn dng <xsl:value-of>. V d : v i ti li u: <parent>This is some text. <child>And this is some more text</child> </parent> Dng text(): <xsl:template match="parent"> <xsl:value-of select="text()" /> </xsl:template> Cho k t qu : This is some text.

Khi dng <xsl:value-of>:

<xsl:template match="parent"> <xsl:value-of select="." /> </xsl:template>

Cho k t qu :
This is some text.

And this is some more text + Cc hm nh v : v i cc node thu c v m t t p h p node (v d cc element cng tn), ta dng cc hm xc nh ho c so trng v tr c a node trong t p h p. position(): tm v tr c a m t node trong t p h p node. V d : so trng element node th hai trong ti li u:
<nodes> <node>One</node> <node>Two</node> </nodes>

Dng:

Aptech FPT

<xsl:template match="/nodes/node[position()=2]">

ho c t t hn:
<xsl:template match="/nodes/node[2]">

last(): tr v node cu i trong t p h p node. V d : <xsl:template match="/nodes/node[position()=last()]"> count(): tr v s l ng cc node trong t p h p node. V d : s l ng cc node customer: <xsl:value-of select="count(customer)" /> + Cc hm s : number(): sum(): + Cc hm bool: + Cc hm chu i: string(): string-length(): 2) XSLT Processor - XSLT Processor c ng gi theo Microsoft XML parser (MSXML). MSXML dng parse cc ti li u XSLT v t o nn m t c u trc cy (XSLT Tree) trn c s cc element v cc attribute trong ti li u XSLT - XSLT Processor c a MSXML parser s l y thng tin bi n i ch a trong XSLT stylesheet (t cy XSLT), thng tin ny chnh l s k t h p cc template v i d li u tm th y trong ti li u XML g c (t cy ngu n), xy d ng m t cy k t qu . Cy k t qu ny c xu t (render) n vi ch nh browser (HTML), cell phone (WML),
MSXML parser XSLT style sheet XSLT tree

XSLT Processor

Result tree

XPath XML document sheet Source tree

3) Cc element c a XSLT - XSLT cung c p m t s element cho vi c ch n v nh d ng d li u: a) Element <xsl:stylesheet> - Ch a ch d n bi n i ti li u XML, m t khai bo c thm vo file XSLT stylesheet. Khai bo stylesheet ny c c php nh sau:

ni cho browser bi t y l m t file

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ext="http://www.myxslt.org/extentions" extension-element-prefixes="ext" version="1.0"> <!cc element khc c a XSLT --> </xsl:stylesheet> - Element stylesheet l root element cho t t c cc stylesheet XSLT. Ti n t xsl trong c php trn ch a m t tham chi u n namespace-URI cho XSLT: "xmlns:xsl="http://www.w3.org/1999/XSL/Transform". Dng

namespace-URI ny

ch c r ng cc element v attribute dng trong stylesheet XSLT c dng theo chu n c a WC3.

b) Element <xsl:value-of> - Element r ng ny l y tr c a element hay attribute, c ch trong cy k t qu .

nh b i attribute select, t cy ngu n chn vo template

Aptech FPT

- C php nh sau:
<xsl:value-of select="element_name/attribute_name" /> - V d : Chn tr c a element productname v tr c a attribute category vo cy k t qu : <xsl:value-of select="productname " /> <xsl:value-of select="@category " />

c) Element <xsl:for-each> - Element ny dng x l m t s node (so trng b i bi u th c XPath c a attribute select) gi ng nhau trong cy ngu n. - C php nh sau:
<xsl:for-each select="pattern"> [cc action c n th c hi n] </xsl:for-each> - Attribute select c a element for-each cho php ch

nh (thng qua bi u th c XPath) cc element hay attribute m action c n th c hi n trn chng. Cc action trong thn element for-each s p d ng cho t ng node c ch n. V d : V i m i element product, con c a element productdata, hi n th n i dung cc element l ng productname v price b ng <xsl:value-of>, element font dng hi n th tn s n ph m mu xanh.
<xsl:for-each select="productdata/product"> <font color="blue"><xsl:value-of select="productname" /></font> <xsl:value-of select="price"> </xsl:for-each> - Element for-each c th xu t hi n trong cc element nh: <xsl:template>, <xsl:for-each>, <xsl:if> v <xsl:otherwise>.

d) Element <xsl:sort> - Element sort dng s p x p d li u trn c s tr c gn cho cc element v attribute. Element sort khng c element con, n lun dng nh element con c a element <xsl:for-each> ho c <xsl:apply-templates>. C php nh sau:
<xsl:sort select="expression" order="ascending|descending" case-order="upper-first|lower-first" data-type="text|number|qname" />

- Cc attribute c a element ny c gi i thch trong b ng sau: Attribute Tr c th expression select ascending, descending order upper-first, lower-first case-order

Gi i thch Bi u th c XPath dng so trng. Chi u s p x p, m c nh l ascending. S p x p v i ch hoa b t u hay ch th ng b t u. Ki u d li u s p x p, c th l text, number ho c m t text, number, qname datatype ki u do ng i dng nh ngha. M c nh l text. - V d : S p x p gi m element product theo element con price khi xu t:
<xsl:for-each select="product"> <xsl:sort select="price" data-type="number" order="descending" /> <xsl:value-of select="productname"> <xsl:value-of select="cover_color"> </xsl:for-each>

e) Element <xsl:text> - Cho php sinh ra chu i text h ng khi xu t, c th dng

<xsl:text>Product Name: </xsl:text>

hi n th nhn. V d

hi n th nhn Product Name, dng:

f) V d : - V d sau minh h a cch dng cc element th o lu n

trn

hi n th thng tin lu trong products.xml:

products.xml <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="products.xsl"?> <productdata> <product proid="P001" category="Toy">

Aptech FPT

<productname>Mini Bus</productname> <description>This is a toy for children aged 4 and above</description> <price>75</price> <quantity>54</quantity> </product> <product proid="P002" category="Toy"> <productname>Barbie Doll</productname> <description>This is a toy for children in the age group of 5-10</description> <price>20</price> <quantity>200</quantity> </product> </productdata> products.xsl <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- B t u x l ti li u t root element --> <xsl:template match="/"> <!-- V i m i element "productdata/product", th c hi n tc v --> <xsl:for-each select="productdata/product"> <!-- S p x p gi m theo element con "price", xem element "price" c ki u number --> <xsl:sort select="price" data-type="number" order="descending" /> <li> <!-- Hi n th nhn, cn tr th theo attribute "proID" --> <font face="verdana" color="blue"> <b><xsl:text>Product ID: </xsl:text></b> </font> <font face="verdana" color="red"><xsl:value-of select="@proid" /></font> <!-- Do well-formed nn tag br c a HTML ph i c tag ng --> <br /> <font face="verdana" color="blue"> <b><xsl:text>Product Name: </xsl:text></b> </font> <font face="verdana" color="red"> <xsl:apply-templates select="productname" /> </font> </li> </xsl:for-each> </xsl:template> </xsl:stylesheet> V i file XSL khc products01.xsl <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <table border="0" cellspacing="1"> <tr bgcolor="pink"> <td>Product ID</td> <td>Product Name</td> </tr> <xsl:for-each select="productdata/product"> <tr bgcolor="cyan"> <td><xsl:value-of select="@proid" /></td> <td><xsl:value-of select="productname" /></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet>

Aptech FPT

<xsl:template>

ProductID P001

Product Name Mini Bus <xsl:for-each> Barbie Doll

template P002

<xsl:value-of> source tree

4. Cc lu t c a XSLT Template - XSLT cho php nh ngha cc lu t template (template rule) cho vi c k t xu t cy k t qu t d li u c a cy ngu n. Lu t template c hai ph n: M t template pattern (m u) ch nh m t node trong cy g c nh s h tr c a XPath. M t template action hay code x l, m t vi c k t h p d li u c a node trong cy g c v i template, nh v y k t qu xu t bi n i theo nh d ng c a templates. - XSLT dng hai element chnh t o lu t template: a) Element <xsl:template> - Dng nh ngha cc template t o thnh stylesheet nh d ng k t xu t. C php nh sau:
<xsl:template match="pattern" name="template_name" > [m t action] </xsl:template> - Attribute match ch r pattern XPath dng

so trng khi tm trn cy ngu n. Pattern ny l m t ki u node do bi u th c XPath ch n. - N u khng ch nh m t template, XSLT s cung c p m t template ng m nh, n gi n p d ng m i template khc t n t i. nh ngha nh sau:

b) Element <xsl:apply-templates> - c dng t trong m t template g i cc template khc ch d n cho XSLT processor tm m t template tng ng v th c hi n cc tc v ch nh trn t ng element c ch n. C php nh sau:
<xsl:apply-templates [select="pattern"]>

- Attribute select l ty ch n v dng hm XPath node(), ngha l template s

ch ng c nh m template s c th c hi n. Tr m c c p d ng cho con c a node hi n t i.

nh cho attribute ny l

c) V d : - V d sau hi n th products.xml b ng hai element trn:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <!-- B t u x l ti li u t root element --> <xsl:template match="/"> <!-- p d ng template ring c a "productdata/product" --> <xsl:apply-templates select="productdata/product" /> </xsl:template> <!-- Template ring c a "productdata/product" --> <xsl:template match="productdata/product"> <font face="verdana" color="green"> <!-- p d ng template m c nh cho t t c cc con c a "productdata/product" --> <li type="square"><xsl:apply-templates /></li> </font> </xsl:template> </xsl:stylesheet>

c) X l template

Aptech FPT

- Lu

sau m t cch XSLT x l template:

Start

c template t ti li u XSLT

nh v cc node cho v i template ch nh trong cy source

Th c hi n cc action cho trong template trn node

Cn template khng? No Hi n th cy k t qu

Yes

End

C. So snh CSS v i XSLT - CSS dng xc nh th hi n tr c quan c a trang. XSLT dng chuy n i ti li u XML. CSS XSLT S d ng n gi n v thch h p v i cc ti li u n gi n. S d ng ph c t p. Khng th s p x p l i, thm, xa ho c th c hi n cc tc v C th s p x p l i, thm, xa element m t khi n nh n th y trn element. c c u trc c a ti li u XML. Khng c cc c u trc i u khi n. Khng tnh ton v lu C cc c u trc i u khi n. C th dng cc bi n lu tr tr cc tr vo bi n. cc tr . Khng c n n cy th hi n ti li u. C n m t cy (XSLT tree) th hi n ti li u. Khng dng c php XML, dng c php ring. Dng c php XML.

10