CSS by w6WLescw

VIEWS: 7 PAGES: 18

									    CSS

Second CSS Lecture
Applications to XML




                      13-Dec-11
        A different emphasis
   CSS is the same for XML as it is for HTML, but--
       HTML already does a pretty good job of layout (arranging elements on the
        page)
       XML contains no layout information, so by itself it will typically be
        displayed as one single huge blob of text
   When writing CSS for XML, typically the first thing you need to
    worry about is arranging text on the page
   No current browser does a good job of supporting CSS,
    particularly when used with XML, so:
       You should make sure everyone who views your pages uses the same
        version of the same browser (this is possible in some companies), or
       You should test your pages in all the most common browsers



                                                                                   2
        The display property
   Every XML element that is formatted by a CSS
    command is considered to be in an invisible “box”
   The box containing an XML element can have one of
    three display properties:
       display: block
            The element will start on a new line, and so will the element that
             follows it (an HTML paragraph is an example)
       display: inline
            (default) The element will not start on a new line, or cause the next
             element to start on a new line (bold is an HTML example)
       display: none
            The element is hidden and will not appear on the display



                                                                                     3
    CSS units
   For many of the remaining CSS values, we will need to be
    able to specify size measurements
       These are used to specify sizes:
          em     width of the letter „m‟
          ex     height of the letter „x‟
          px     pixels (usually 72 per inch, but depends on monitor)
          %      percent of inherited size
       These are also used to specify sizes, but don‟t really make sense unless
        you know the screen resolution:
          in     inches
          cm     centimeters
          mm     millimeters
          pt     points (72pt = 1in)
          pc     picas (1pc = 12pt)
   Note: you can use decimal fractions, such as 1.5cm
                                                                                   4
      Boxes
   The invisible box containing a styled XML element has
    three special areas:




                     The element
                       padding (invisible)
                     border (can be colored)

                      margins (invisible)


                                                            5
        Padding
   Padding is the extra space around an element, but inside
    the border
   To set the padding, use any or all of:
       padding-top: size
       padding-bottom: size
       padding-left: size
       padding-right: size
       padding: size        to set all four sides at once
   size is given in the units described earlier
   Example: sidebar {padding: 1em; padding-bottom: 5mm}

                                                               6
        Borders
   You can set border attributes with any or all of: border-top:,
    border-bottom:, border-left:, border-right:, and border:
    (all at once)
   The attributes are:
       The thickness of the border: thin, medium (default), thick, or a specific
        size (like 3px)
       The style of the border: none, dotted, dashed, solid, double, groove,
        ridge, inset, or outset
       The color of the border: one of the 16 predefined color names, or a hex
        value with #rrggbb or rgb(r, g, b) or rgb(r%, g%, b%)
   Example: section {border-top: thin solid blue;}
   Note: the special styles (such as groove) are not as cool as they
    sound


                                                                                    7
        Margins
   Margins are the extra space outside the border
   Setting margins is analogous to setting padding
   To set the margins, use any or all of:
       margin-top: size
       margin-bottom: size
       margin-left: size
       margin-right: size
       margin: size        to set all four sides at once




                                                            8
    Box and display interactions
   With display:none, contents are invisible and margin,
    border, and padding settings have no effect
   With display:block, margin, border, and padding settings
    work about as you would expect
   With display:inline (which is the default if you don‟t
    specify otherwise):
       Margin, border, and padding settings for left and right work about
        as you would expect
       Margin, border, and padding settings for top and bottom do not
        add extra space above and below the line containing the element
            This means that   inline boxes will overlap   other text


                                                                             9
    Sizing elements
   Every element has a size and a natural position in
    which it would be displayed
   You can set the height and width of display:block
    elements with:
       height: size
       width: size
   You cannot set the height and width of inline
    elements (but you can set left and right margins)
   In HTML, you can set the height and width of
    images and tables (img and table tags)

                                                         10
position:absolute; left: 0in; top: 0in               position:absolute; right: 0in; top: 0in

            Setting absolute position
     To move an element to an absolute position on the page
          position: absolute (this is required!) and also one or more of
          left: size or right: size
          top: size or bottom: size
     Confusing stuff:
          size can be positive or negative
          top: size puts an element‟s top size units from the page top
          bottom: size puts an element‟s bottom size units from the page bottom
          left: size puts an element‟s left side size units from the left edge of the page
          right: size puts an element‟s right side size units from the right edge of the
           page
          Changing an element‟s absolute position removes it from the natural flow, so
           other elements fill in the gap
          You need to be careful not to overlap other elements

position:absolute; left: 0in; bottom: 0in       position:absolute; right: 0in; bottom: 0in
                                                                                        11
    Setting relative position
   To move an element relative to its natural position, use
       position: relative (this is required!) and also one or more of
       left: size or right: size
       top: size or bottom: size
   Confusing stuff:
       size can be positive or negative
       to move left, make left negative or right positive
       to move right, make right negative or left positive
       to move up, make top negative or bottom positive
       to move down, make bottom negative or top positive
       Setting an element‟s position does not affect the position of other
        elements, so
            There will be a gap in the element‟s original, natural position
            Unless you are very careful, your element will overlap other elements

                                                                                     12
    Pseudo-elements

   Pseudo-elements describe “elements” that are not
    actually between tags in the XML document
   Syntax: element:pseudo-class {...}
       first-letter the first character in a block-level element
       first-line the first line in a block-level element (depends on the
        browser‟s current window size)
   Especially useful for XML (but not implemented in
    Internet Explorer):
       before adds material before an element
            Example: author:before {content: "by "}
       after adds material after an element

                                                                             13
       External style sheets
   In HTML, within the <head> element:
    <link REL="STYLESHEET" TYPE="text/css" HREF="Style
    Sheet URL">

   As a PI in the prologue of an XML document:
    <?xml-stylesheet href="Style Sheet URL" type="text/css"?>

   Note: "text/css" is the MIME type




                                                                14
      Namespace selectors
   Namespace selectors (XML only) choose tags from the
    given namespace
      namespace|element {...} chooses the element if and only if
      it is from the given namespace
      *|element {...} chooses the element regardless of the
      namespace
      |element {...} chooses the element if it has no declared
      namespace
 Namespace selectors are currently supported only by
  Netscape 6


                                                               15
        Some border styles and values
   You can put borders around elements
   Borders have width, style, and color
       These can be set individually:
          border-left-style:, border-bottom-color:, etc.

       Or a border at a time:
          border-top:, border-right:, etc.

       Or all borders at once: border:
   Available values are:
       border-width: thin | medium | thick | length
       border-style: none | hidden | dotted | dashed | solid | double |
        groove | ridge | inset | outset
       border-color: color




                                                                           16
        Padding
   Padding is used to set the space around an element
       You can set padding individually:
        padding-top:, padding-left:,
        padding-bottom:, padding-right:
       Or all at once: padding:
       Allowable values: length | 12%




                                                         17
The End




          18

								
To top