Tag Archives: Cascading Style Sheets

Then here is your css code for add video to your html5 page–continue

Here I put the css style for mark up your video appearance. not very beautiful, but it works, you could change this to what you like.

Css3 style below: (next post is the javascript file, you need add to make the video works.)

body{
text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
#skin{
width:700px;
margin:10px auto;
padding:5px;
background:red;
border:4px solid black;
border-radius: 10px;
}
nav{
margin:5px 0px;
}
#buttons{
float:left;
width:70px;
height:22px;
}
#defaultBar{
position: relative;
float:left;
width:600px;
height: 16px;
padding:4px;
border:2px solid black;
background-color:yellow;
}
#progressBar{
position: absolute;
width:0px;
height:16px;
background:blue;
}

xml and xsl and css connected example

first, you need have a wine.xml,this is for store your wines database: see below:

<?xml version=”1.0″ encoding=”UTF-8″?>
<?xml-stylesheet type=”text/css” href=”wine.css”?>
<!DOCTYPE wines [
<!ELEMENT wines (wine+)>
<!ELEMENT wine (name,country,location,history,color,year,served)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT country (#PCDATA)>
<!ELEMENT location (#PCDATA)>
<!ELEMENT history (#PCDATA)>
<!ELEMENT color (#PCDATA|span)*>
<!ELEMENT span (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT served (#PCDATA)>
]>
<?xml-stylesheet type=”text/xsl” href=”wine.xsl”?>
<wines>
<wine>
<name>Rough Red</name>
<country>Italy</country>
<location>Turin</location>
<history>Some oenologists believe that Rough Red goes back to Roman times.</history>
<color>dark ruby-red wine – traditionally, it is called,<span>”black as rabbit’s blood”</span></color>
<year>2010</year>
<served>Rough Red should be served at 15 – 16 _C(59 – 60.8_F)
</served>
</wine>

<wine>
<name>Cabernet Merlot</name>
<country>South Australia</country>
<location>Australia</location>
<history>A soft, round and gloriously fleshy palate delivers flavours of ripe plum, red berries along with subtle liquorice and chocolate, finishing in a smooth and elegant fashion.
This is such an easy-drinking, soft and approachable wine. There is wonderful flavour and richness but it’s not at all confronting…a bit like a red wine with training wheels…and a true little treasure!</history>
<color>dark ruby-red wine – traditionally, it is called,<span>”black as rabbit’s blood”</span></color>
<year>2009</year>
<served>Rough Red should be served at 15 – 16 _C(59 – 60.8_F)
</served>
</wine>

</wines>

Then,save as win.xml you use xsl to style your wines’ data, see below(xml can let your xml data display in html ) Continue reading xml and xsl and css connected example

What is XML? What is XSL? What is the relationship between XML AND XSL?

What is XML?

  • XML stands for EXtensible Markup Language
  • XML is a markup language much like HTML
  • XML was designed to carry data, not to display data
  • XML tags are not predefined. You must define your own tags
  • XML is designed to be self-descriptive
  • XML is a W3C Recommendation

What is XSL?

XSLT is the recommended style sheet language of XML.

XSLT (eXtensible Stylesheet Language Transformations) is far more sophisticated than CSS.

XSLT can be used to transform XML into HTML, before it is displayed by a browser.

What is the relationship between XML AND XSL?

XSL gives your XML some style

banner slide show

<!doctype html>
    <head>
        <title>Title</title>

        <style type="text/css" media="screen">
            .slides_container {
                width:570px;
                height:270px;
            }
            .slides_container div {
                width:570px;
                height:270px;
                display:block;
            }
        </style>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="slides.js"></script>

        <script>
            $(function(){
                $("#slides").slides();
            });
        </script>
    </head>
    <body>
        <div id="slides">
            <div class="slides_container">
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
                <div>
                    <img src="http://placehold.it/570x270">
                </div>
            </div>
        </div>
    </body>