XML/CSS Style/background

Материал из Web эксперт
Версия от 11:26, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Background repreat and position

   <source lang="xml">

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

 <TITLE>title</TITLE>
 <AUTHOR>author 1</AUTHOR>
 <DATE>2008</DATE>
 <IMAGE />
 <PARAGRAPH>
   <LINE>line 1</LINE>
   <LINE>line 2</LINE>
   <LINE>line 3</LINE>
   <LINE>line 4</LINE>
   <LINE>line 5</LINE>
   <LINE>line 6</LINE>
 </PARAGRAPH>
 <IMAGE />
 <PARAGRAPH>
   <LINE>line 7</LINE>
   <LINE>line 8</LINE>
   <LINE>line 9</LINE>
   <LINE>line 10</LINE>
   <LINE>line 11</LINE>
   <LINE>line 12</LINE>
 </PARAGRAPH>

</POEM> File: Style.css POEM{

  font-size:12pt

} POEM, TITLE, AUTHOR, DATE, IMAGE, PARAGRAPH, LINE{

  display:block

} DATE, PARAGRAPH{

  margin-bottom:.25in

} IMAGE {

  background-image:url(Raven.bmp);
  background-repeat:no-repeat;
  background-position:center;
  width:89px;
  height:58px;
  float:left

}

</source>
   
  


Changing the Background

   <source lang="xml">

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;
  color:black;
  background:url(back.jpg)

} name {

  display:block;
  position:absolute;
  left:9px

} projects{

  display:block;
  border:medium dotted red;
  padding:5px;
  margin-top:10px

} project{

  display:block;
  position:relative;
  left:125px;
  width:340px;
  border:thin solid red;
  padding:5px;
  margin-top:5px

} weight{

  float:right;
  width:125px;
  border:thin solid green;
  padding:5px;
  color:black

} length{

  display:block

}

</source>
   
  


Changing the Text"s Background

   <source lang="xml">


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 {

  background:#ffe7c6

} name {

  font: bold 24pt/22pt Trebuchet MS;
  width:100;
  margin-top:10;
  color:#a50063

} projects{

  font:10pt Georgia;
  background:#ffffcc

} project{

  background:#ffc6a5

} weight {

  font-style:italic

} length{

  font-weight:bold

}

</source>
   
  


Use image as background

   <source lang="xml">

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

 <page>
   <image1 />
   <title>this is the title</title>
   <paragraph>this is a paragraph</paragraph>
 </page>

</document> File: Style.css title{

 display:block;
 color: #000000;
 font-size: 30px;
 font-weight: bold;

} paragraph {

 display:block;
 padding:10px;
 margin: 10px;

} image1 {

 display:block;
 margin:10px;
 width:282px;
 height:187px;
 background-image:url(background.jpg)

}

</source>