XML/CSS Style/Border

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

Border color

File: Data.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<document>
  <page>
    <pageNumber>A</pageNumber>
    <paragraph>
      B
      <reference>C</reference>
      D
      <important>E</important>
      .
    </paragraph>
    <paragraph>
      F
      <reference>G</reference>
      H
      <important>I</important>
      .
    </paragraph>
  </page>
  <page>
    <pageNumber>J</pageNumber>
    <paragraph>
      K
      <reference>L</reference>
      L
      <important>N</important>
      .
    </paragraph>
    <paragraph>
      O
      <reference>P</reference>
      Q
      <important>R</important>
      .
    </paragraph>
  </page>
</document>
File: Style.css
paragraph {
  display:block;
  border:solid 1px #A3A3A3;
  padding: 10px;
  margin: 20px;
}
  
reference {
  display:inline;
  font-style:italic;
  color:#CC3333;
  background-color: #E6E6E6;
}
important {
  display:inline;
  font-weight:bold;
  color:#990000;
  border:solid 1px #990000;
}
page {
  display:block;
  border:solid 2px #000000;
  padding: 10px;
  margin:10px;
}
pageNumber { 
  display:block;
  padding:5px;
  border:solid 2px #336699;
  width: 60px;
  margin-bottom: 20px;
}



Border color and style

File: Data.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<page>
   <pageNumber>1</pageNumber>
   <paragraph>A
       <reference>B</reference>,
       <keywords>C</keywords>.
   </paragraph>
</page>
File: Style.css
page {
   display:block;
   padding:10px;
   margin:10px;
   border-style:solid; 
   border-width:4px; 
   border-color:#000000;
}
pageNumber {
   display:inline;
   font-style:italic;
   border-style:solid; 
   border-width:4px; 
   border-color:#CCCCCC;
}
paragraph {
   display:block;
   padding:10px;
   border:solid; 
   border-width:4px; 
   border-color:#CCCCCC;
}
reference {
   display:inline;
   font-style:italic;
   color:#CC3333;
   border:solid; 
   border-width:2px; 
   border-color:#CCCCCC;
}
keyword {
   display:inline;
   font-weight:bold;
   color:#990000;
   border:solid; 
   border-width:2px; 
   border-color:#CCCCCC;
}



Setting the Border

File: Data.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<employees>
  <name language="English">T1</name>
  <name language="Latin">T2</name>
  <projects>
    <project>project1</project>
    <project>project2</project>
    <project>project3</project>
  </projects>
  <weight>3 points</weight>
  <length>3 years</length>
</employees>

File: Style.css
 
employees {
   display:block
}
name {
   display:block;
   position:absolute;
   left:9px
}
projects{
   display:block;
   border:medium dotted red
}
project{
   display:block;
   position:relative;
   left:125px;
   width:340px;
   border:thin solid red
}
weight{
   display:block
}
length{
   display:inline
}