XML/CSS Style/Attribute — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
 
м (1 версия)
 
(нет различий)

Текущая версия на 11:26, 26 мая 2010

attributes Psuedo class

   <source lang="xml">

<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Style.css"?> <document>

 <paragraph 
    keyWords="displaying, attribute, content, XML, CSS" 
    xref="link text">
    text :before and  
    :after text
 </paragraph>

</document>

File: Style.css paragraph {

 display:block;
 background-color:#FFFFFF;
 font-family:Arial, Helvetic, sans-serif;
 padding:20px;

} paragraph:before {

 display:block;
 background-color#CCCCCC;
 font-weight:bold;
 color:#0000FF;
 content:"Cross reference:" attr(xref);

} paragraph:after {

 font-style:italic; 
 color:#0000FF;
 content:"Key words: " attr(keyWords);

}

</source>
   
  


Style with attribute class

   <source lang="xml">

File: Data.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="Style.css"?> <document>

 <paragraph style="normal">
   text styletextnormal.
 </paragraph>
 <paragraph style="summary">
   text style textsummary.
 </paragraph>
 <paragraph style="code foreground">
   text styletestcode or foreground.
 </paragraph>
 <paragraph style="code-background">
   text style textcode background.
 </paragraph>

</document> File: Style.css paragraph[style] {

 font-size:12px;
 color:#0000FF;
 display: block;

} paragraph[style=summary] {

 font-style:italic;
 font-size: 16px;

} paragraph[style~=foreground] {

 font-family:courier, serif;
 font-weight:bold;
 background-color:#CCCCCC; 

} paragraph[style|=code] {

 font-family:courier, serif;
 font-weight:bold;
 background-color:#FFFFFF;
 border-style:solid 2px #000000;

}

</source>
   
  


Use attr to get the value of attribute

   <source lang="xml">

File: Data.xml <?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="Style.css" ?> <purchaseOrder orderID="x1129001">

   asdf

</purchaseOrder> File: Style.css purchaseOrder:before {

 font-family:arial, verdana, sans-serif;
 font-size:28px; 
 font-weight:bold;
 content:"Purchase Order Number: " attr(orderID);

}

</source>