XML/CSS Style/pseudo class

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

Add content to pseudo class

File: Data.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<document>
  <page>
    <paragraph3>This content is within paragraph 3</paragraph3>
    <paragraph4>This content is within paragraph 4</paragraph4>
  </page>
</document>
File: Style.css
paragraph1:first-letter {
  float:left;
  font-size:24pt;
  font-style:italic;
  font-weight:bold;
  padding-right:4px;
}
paragraph2:first-line {
  text-transform:uppercase;
  font-weight:bold;
}
paragraph3:before {
  font-weight:bold;
  text-transform:uppercase;
  content:"Text before paragraph 3 - ";
}
paragraph4:after {
  content: url(lions.jpg);
}
paragraph3, paragraph4 {
  display: block;
}



before pseudo class

File: Data.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<PROJECTDB>
  <TOPICAREA>
      <PROJECT>
        <PROJECTTITLE>title</PROJECTTITLE>
        <DEVELOPER>developer</DEVELOPER>
        <CONTACT>address</CONTACT>
      </PROJECT>
  </TOPICAREA>
</PROJECTDB>

File: Style.css
DEVELOPER:before {
   content: "text";
   display: block
}
PROJECTTITLE {
   display: block
}



pseudo class:before

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