CSC309S Tutorial CSS XHTML Outline

Document Sample
CSC309S Tutorial CSS XHTML Outline Powered By Docstoc
					                                CSC309S Tutorial                                                    Outline
                                                                           Link HTML with Style Sheets
                                 CSS & XHTML                               CSS
                                                                           Class/ID selectors, Pseudo-class/element, Color values,
                                                                           Length units, Text, Font, Lists, Padding/border/margin,
                                                                           Floating/clearing
                                                                           Link CSS to XML
                                                                           XHTML
                         Tianhan Wang
                                                                           Links, Frames lists, Tables, Forms
       http://www.cs.toronto.edu/~tianhan/TA/CSC309S/
                                   January 27, 2003

                                                                1   CSC309 Tutorial --CSS & XHTML        2                           Spring 2003




                                                                                     Link HTML with Style Sheets
                                                                    (1) External style sheets
                                                                    <link rel="stylesheet" type="text/css” href="external.css"/>

                                                                    (2) Internal style sheets
                                                                       <style type="text/css">
                                                                            h1 {text-align: left;                h1 {text-align: center;
                                                                                  color: green;                       color: red;
                                                                                                                      font-size: 150%
                                                                                  font-size: 150%}
                                                                                                                    }
                                                                       </style>

                                                                    (3) Inline styles
                                                                         <h1 style="text-align: right; color: yellow">
                                                                             This is an inline style.
                                                                         </h1>


CSC309 Tutorial --CSS & XHTML            3            Spring 2003   CSC309 Tutorial --CSS & XHTML        4                           Spring 2003
                                Specify Style Rules                                                                          Class Selectors
     General form                                                                                 Define different styles for the same element

           selector { property: value }                                                                 h1.red {color: red;}
           or                                                                                           h1.green {color: green}
           selector { property1: value1;
                      property2: value2;                                                                <h1 class="red">This line is red. </h1>
                      ...                                                                               <h1 class="green">This line is green. </h1>
                      property3: value3}
                                                                                                   Used by any element without element name
     Grouping
                                                                                                        .blue {color: blue}
           selector 1, selector 2, ..., selector n
           {                                                                                            <h1 class="blue">This line is blue. <h1>
               property: value                                                                          <p class="blue">This paragraph is blue.</p>
           }

CSC309 Tutorial --CSS & XHTML                5                                 Spring 2003   CSC309 Tutorial --CSS & XHTML            6                                      Spring 2003




                                   ID Selectors                                                          Pseudo-class & Pseudo-element
                                                                                                                   Selectors
     <html>                                                                                      <html>
     <head>                                                                                      <head>
      <style type="text/css">                                                                     <style type="text/css">
       p#emph {font-weight: bold;                                                                   a:link {color: blue}
                 font-size: 150%}                                                                   a:visited {color: red}
       p#large {font-size: 300%}                                                                    a:active {color: green}
      </style>
     </head>
     <body>
                                                                                                     p.line:first-line {font-size: 200%}
      <p id="emph"> This line will be boldfaced. </p>                                                p.letter:first-letter {font-size: 300%}
      <p> This line will not be boldfaced. </p>                                                   </style></head>
      <p id=“large”> The font of this line will be larger. </p>                                  <body>
     </body>                                                                                      <p class="line">In this paragraph, the first line has a larger size than
     </html>                                                                                     others.</p>
                                                                                                  <p class="letter">Here, the first letter has a larger size.</p>
     Use ‘#’ in ID selectors instead of ‘.’ which is used in class selectors.                    </body>
     Classes may be assigned to any number of elements, while IDs are supposed to be
                                                                                                 </html>
     used only once.
CSC309 Tutorial --CSS & XHTML                7                                 Spring 2003   CSC309 Tutorial --CSS & XHTML            8                                      Spring 2003
                                  Color Values                                                                             Length Units
   Named colors:                                                                              Absolute length units
    aqua  black            blue   fuchsia   gray   green   lime     navy                       inch (in)
    olive purple           red    silver    teal   white   yellow                              centimeters (cm) -- 1 cm = 0.394 in or 1 in = 2.54 cm
                                                                                               millimeters (mm) -- 1 cm = 10 mm
   Color by RGB:
                                                                                               points (pt)      -- 1 in = 72 pt
   (1) by hexadecimal numbers
        #ffffff   /* white */   #000000 /*black */                                             picas (pc)       -- 1 pc = 12 pt
        #ff0000 /* red */      #00ff00 /* green */      #0000ff /* blue */
   (2) by decimal numbers                                                                     Relative lengths units: relative to another length property
        rgb(255, 255, 255)    /* white */       rgb(0, 0, 0)       /* black */                 em: em-height, the height of the element's font, e.g. 1.5em
   (3) by percentage                                                                           ex: x-height, the height of the letter “x”, e.g., 1.5ex
        rgb(100%, 100%, 100%) /* white */      rgb(0%, 0%, 0%) /* black */                     px: pixels (varies in size based on the screen resolution), e.g. 200px
   Color equivalence
     e.g.,
                                                                                              Percentage units: relative to the element's font size
     white   ==    #ffffff        == rgb(255, 255, 255) == rgb(100%,100%, 100%)                %: e.g. 30%
     black ==      #000000        == rgb(0,0,0)         == rgb(0%, 0%, 0%)
     red     ==    #ff0000        == rgb(250, 0, 0)     == rgb(100%, 0%, 0%)
CSC309 Tutorial --CSS & XHTML               9                                Spring 2003   CSC309 Tutorial --CSS & XHTML           10                                   Spring 2003




                                  Background                                                                                      Text
   <html>                                                                                      <html>
   <head>                                                                                      <head>
   <style type="text/css">                                                                     <style type="text/css">
   body                                                                                        h1{
   {                                                                                              color: green;
     background-image: url("microcrest.gif");                                                     text-decoration: underline;
     background-repeat: no-repeat;                                                                text-align: right;
     background-position: center center;                                                          text-indent: 2cm
     background-color: #ffffff                                                                   }
   }                                                                                             a{text-decoration: none;
    h1{color: green}                                                                                color: blue}
    </style></head>                                                                              h2{text-decoration: line-through}
   <body>                                                                                      </style></head>
   <h1> An example of                                                                          <body>
   backgound style</h1>                                                                         This <a href="t.html>LINK</a> has no underline.
   </body>                                                                                      <h1>This line: underlined</h1> <h2>Next line: line-through</h2>
   </html>                                                                                     </body>
                                                                                               </html>
CSC309 Tutorial --CSS & XHTML               11                               Spring 2003   CSC309 Tutorial --CSS & XHTML           12                                   Spring 2003
                                         Font                                                                        Lists
    <html>                                                                 u1.square {list-style-type: square}
    <head>
    <style type="text/css">                                                u1.circle{list-style-type: circle}
    p.c1{                                                                  u1.disc{list-style-type: disc}
      font-family: times;
      font-size: 200%;
      font-style: italic;
                                                                           ol.decimal {list-style-type: decimal}
      font-weight: bold                                                    ol.lroman {list-style-type: lroman}
     }                                                                     ol.uroman {list-style-type: uroman}
    p.c2 { font-size: 150%}
    </style></head>
                                                                           ol.lalpha {list-style-type: lalpha}
    <body>                                                                 ol.ualpha {list-style-type: ualpha}
    <p class="c1">This is line 1</h1>
    <p class="c2">This is line 2</h2>
    <p>This is line 3</p>
                                                                           u{ list-style-image: url{("listimage.jpg")}
    </body>
    </html>

CSC309 Tutorial --CSS & XHTML              13            Spring 2003   CSC309 Tutorial --CSS & XHTML                    14                             Spring 2003




                        Padding/Border/Margin                                                          Floating & Clearing
    <html><head><style type="text/css">                                    <html><head>
     p.b1 { border-style: solid; border-color: red;                        <style type="text/css">
               border-bottom-width: 2;}                                     img.lf {float: left; height: 30; width: 50}
                                                                            img.lc {clear: left}
     p.b2 { border-style: double; border-color: green;
                                                                            p.f { float: right; border-style: solid;
               padding: 10}                                                        width: 70; padding: 10}
     p.b3 { border-style: solid;                                           </style></head>
               padding: 10; margin: 10}                                    <body>
     p.b4 { border-style: solid;                                            <img class="lf" src="microcrest.gif" />
              padding: 30; margin: 10}                                      <p>Image and text elements that appear in another
     p.b5 { border-style: solid;                                                 element are called floating elements, which
               padding: 10; margin: 30}                                          will be displayed on the left or right side of
                                                                                 the following document.</p>
    </style></head>
                                                                            <img class="lc" src="microcrest.gif" />
    <body>                                                                  <p>Use the clear property with a particular element
     <p class="b1">paragraph 1</p> <hr />                                        to prevent a previous floating element from being
     <p class="b2">paragraph 2</p> <hr />                                       displayed alongside it.</p>
     <p class="b3">paragraph 3</p> <hr />                                   <p class="f">This is a float paragraph.</p>
     <p class="b4">paragraph 4</p> <hr />                                   <p>In this paragraph, the image (actually a paragraph) is
     <p class="b5">paragraph 5</p> <hr />                                        floating to the right. The left text wraps around this element.</p>
    </body></html>                                                         </body></html>
CSC309 Tutorial --CSS & XHTML               15           Spring 2003   CSC309 Tutorial --CSS & XHTML                    16                             Spring 2003
                            Link CSS to XML css                                                            Link CSS to XML xml
                                                                                   <?xml version="1.0" encoding="UTF-8" standalone="no"?>
           book                          author
                                                                                   <?xml-stylesheet type="text/css" href=”book.css"?>
           {                             {
                                                                                   <!DOCTYPE bookDatabase SYSTEM "book.dtd">
              display: block;              display: inline;                        <bookDatabase>
              font-size: 150%              color: blue;                               <book bookID="ISBN-0-13-xxx">
           }                             }                                               <author>&EH;</author>
                                                                                         <content>
           content                       description                                          <chapter number="1">XML Structure, Syntax</chapter>
           {                             {                                                    <description>
             display: block;               display: block;                                        <section>XML Fundamentals</section>
                                                                                              </description>
             border: solid;                margin-top: 1in;
                                                                                         </content>
             margin: 2cm;                  margin-bottom: 1in;                           <content>
             padding: 1em;               }                                                    <chapter number="2">Document Type Definitions</chapter>
           }                                                                                  <description>
                                         section                                                  <section>Element Declarations</section>
           chapter                       {                                                        <summary>summary of the chapter 2</summary>
           {                               display: block;                                    </description>
             display: block;               font-size; 200%                               </content>
                                                                                      </book>
           }                             }
CSC309 Tutorial --CSS & XHTML       17                           Spring 2003
                                                                                   <bookDatabase>
                                                                               CSC309 Tutorial --CSS & XHTML           18                          Spring 2003




                                                                                                                 XHTML
                                                                                   XHTML is almost identical to HTML 4.01
                                                                                   XHTML is a stricter and cleaner version of HTML
                                                                                   XHTML is HTML defined as an XML application

                                                                                   XHTML elements must be properly nested
                                                                                   XHTML documents must be well-formed
                                                                                   Tag names must be in lowercase
                                                                                   All XHTML elements must be closed
                                                                                   Attribute values must be quoted

                                                                                   Wrong: <br>, <hr>, <ol><li>item one</ol>
                                                                                   Correct: <br />, <hr />, <ol><li>item one</li></ol>

                                                                                   Wrong: <input checked>
                                                                                   Correct: <input checked="checked" />

CSC309 Tutorial --CSS & XHTML       19                           Spring 2003   CSC309 Tutorial --CSS & XHTML         20                               Spring 2003
                          A simple XHTML document                                                                       Links
 <?xml version="1.0" encoding="UTF-8"?>                                                <a href="http://www.../course.html">absolute url</a>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN”                                                                     <a href="course.html">relative url</a>
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 transitional.dtd">                                                                    <a href="course.html#end">link to the end of the paragraphy</a>
 <html>                                                                                   define a name anchor: <a name="end" />
   <head>
     <title>simple document</title>                                                    <a href="mailto:tianhan@cs.toronto.edu"> email me</a>
   </head>
   <body>                                                                              <a href="course.html"> <img src="flower.gif" alt="link to course page" />
     <p>a simple paragraph</p>                                                            an image link</a>
   </body>
 </html>                                                                               <a href="course.html" target="_blank">open a new window</a>
                                                                                       <a href="course.html" target="_top">link to the top window/a>


CSC309 Tutorial --CSS & XHTML             21                         Spring 2003   CSC309 Tutorial --CSS & XHTML           22                              Spring 2003




                                    Frames                                                                            Lists html
    <html>                                                                             <html><head>
    …                                                                                  <style type="text/css">
                                                                                         ul.level1 {list-style-type: square}
        <frameset rows="75%,25%">                                                        ul.level2 {list-style-type: circle}
              <frame src="r1.html" name=“topFrame” />                                    ol {list-style-type: decimal}
              <frameset cols="100,*">                                                  </style> </head>
                        <frame src="r2c1.html" scrolling="no" />                       <body>
                        <frame src="r2c2.html" scrolling="auto" />                      <ul class="level1">
              </frameset>                                                                  <li>AAA</li>
      </frameset>                                                                            <ul class="level2">
    ...                                                                                        <li>aaa</li><li>bbb</li><li>ccc</li>
    </html>                                                                                 </ul>
                                                                                           <li>BBB</li>
                                                                                            <ol><li>xxx</li><li>yyy</li><li>zzz</li>
                                                                                            </ol>
                                                                                          </ul>
                                                                                       </body></html>

CSC309 Tutorial --CSS & XHTML             23                         Spring 2003   CSC309 Tutorial --CSS & XHTML           24                              Spring 2003
                                  Tables                                                    Forms
  <html><head>                                               <html><body>
  <style type="text/css">                                    <form name="input" action="formAction.asp" method="get">
    td {text-align: center;                                   Enter your first names:
         vertical-align: top;                                 <input type="text" name="FirstName" /><br />
         padding: 15}                                         Enter your last name:
  </style></head>                                             <input type="text" name="LastName" /><br />
  <body>                                                      <input type="submit" value="Submit">
    <table border="2" cellspacing="20">                      </form>
      <tr> <td colspan="2">AAA</td> </tr>                    <p>Click the "Submit" button to send your inputs</p>
      <tr>                                                   </body>
        <td rowspan="2">BBBBB</td>                           </html>
        <td>CCC</td>
      </tr>
      <tr> <td>DDDDDDDD</td> </tr>
    </table>
  </body>
  </html>

CSC309 Tutorial --CSS & XHTML          25   Spring 2003   CSC309 Tutorial --CSS & XHTML         26                      Spring 2003