4.1 CSS - Cascading Style Sheets - PowerPoint PPT Presentation

Loading...

PPT – 4.1 CSS - Cascading Style Sheets PowerPoint presentation | free to download - id: 68b737-OWQyM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

4.1 CSS - Cascading Style Sheets

Description:

4.1 CSS - Cascading Style Sheets Main ideas and essential features as a preliminary for XSL What is it? Use and status Processing model Rules, selectors, generated ... – PowerPoint PPT presentation

Number of Views:57
Avg rating:3.0/5.0
Date added: 14 February 2020
Slides: 27
Provided by: Department1348
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 4.1 CSS - Cascading Style Sheets


1
4.1 CSS - Cascading Style Sheets
  • Main ideas and essential features
  • as a preliminary for XSL
  • What is it?
  • Use and status
  • Processing model
  • Rules, selectors, generated content
  • Usability in practise

2
CSS - Cascading Style Sheets
  • Main usage
  • to specify the representation of web pages by
    attaching style (fonts, colours, margins, ) to
    HTML/XML documents
  • also used to specify a "WYSIWYG" presentation in
    some commercial XML editors, e.g.,
  • SofQuad XMetal (of Corel Windows)
  • Morphon (of Morphon Technologies Java)

3
W3C CSS Recommendations
  • Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999)
  • basic features, from the point of view of HTML
  • Level 2 (CSS2), May 1998
  • different media types
  • paged media (for printing),
  • aural style sheets (for speech synthesis)
  • extended selection mechanism
  • generated content, automatic numbering
  • formatting of tables,
  • Level 3 (CSS3)
  • ongoing work split in May 2001 into 26 modules

4
CSS Style Sheets
  • Style sheet is a set of style rules
  • Style rule syntax selector declarations
  • selector locates elements affected by the rule
  • declarations syntax prop1val1 propnvaln
  • sets values for style properties
  • CSS1 defines about 50 properties, CSS2 about 120

5
CSS Style Rules
  • Example rules H1 color blue / blue text
    for first-level HTML headers / H1,H2,H3
    font-stylebold / Alternative selectors
    grouped together / / bold font for all HTML
    headers / CODE font-family monospace
    color red

6
CSS1 Properties (1/2)
  • Font properties
  • font, (-family/-style/-variant/-weight/-size)
  • Color and background properties
  • color background (-color/-image/-repeat/-attachem
    ent/ -position)
  • Text properties
  • word-spacing, letter-spacing, text-decoration,
    vertical-align, text-transform, text-align,
    text-indent, line-height

7
CSS1 Properties (2/2)
  • Box properties
  • for controlling size, margins, borders etc. of
    boxes (see later)
  • Classification properties
  • display (values block inline list-item
    none),
  • white-space (values normal pre nowrap),
  • list-style, (-type/-image/-position)

8
Attaching CSS Style to HTML
  • Four ways 1. with a LINK element 2. with a
    STYLE element in document HEAD 3. by an import
    mechanism 4. in a STYLE attribute
  • ltHTMLgtltHEADgtltTITLEgtA sample pagelt/TITLEgt ltLINK
    REL"STYLESHEET" TYPE"text/css"
    HREF"my_style.css" gt ltSTYLE TYPE"text/css"gt
    _at_import url(http//style.com/basic) H1
    color blue lt/STYLEgtlt/HEADgt ltBODYgt
    ltH1gtHeadline is bluelt/H1gt ltP STYLE"color
    green"gtbut this is green. lt/BODYgt lt/HTMLgt

9
Attaching CSS Style ...
  • W3C Rec for linking styles to XML
    lt?xml-stylesheet href"example.css"
    type"text/css" ?gt
  • Rules from different sources merged together
  • including browser defaults and user preferences
  • Problems of cascading
  • author blue background user blue text -gt ?
  • Should author have control of style? What if
    visually disabled user needs large font size?
  • Should user have control of style? What if
    readability depends on detailed size and
    placement of text?

10
CSS Processing Model (simplified)
  • 0. Parse the document into a tree
  • 1. Match style rules to elements of the tree
  • annotate each element with a value assigned for
    each relevant property
  • inheritance and, in case of competing rules,
    elaborate "cascade" rules applied to select which
    value is assigned
  • 2. Generate a formatting structure of the
    annotated document tree
  • consists of nested rectangular boxes
  • 3. Render the formatting structure
  • display, print, speak, ...

11
Inheritance (1/2)
  • Most properties are inherited by subelements
  • can be overridden
  • can be modified (e.g. increase indent, set font
    size to 150 of current)
  • Some non-inherited properties
  • background properties
  • by default shine through the boxes of decendants
  • padding, margin and border properties
  • but they effect the placement of
    sub-elements (See CSS Box Model a bit later)

12
Inheritance (2/2)
  • Consider document fragment ltchapgtlttitlegt
    lt/titlegt ltsectiongt lt/sectiongt lt/chapgt
  • and rules chap font-size 12pt
    font-family serif title font-size 150
  • Now both title and section will be formatted
    using a serif font, but title with a 50 larger
    font size

13
CSS Box Model
  • Transcription maps document elements into nested
    rectangular boxes, which have
  • a core content area
  • optional surrounding margin, border and padding
    areas
  • controlled by corresponding properties margin,
    border and padding, and width and height (last
    two most useful for scaling images)

14
Dimensional properties of boxes
  • ____________________________________
    margin (transparent)
    _______________________________
    border
    __________________________
    padding
    _____________________ content
    _____________________
    __________________________
    _______________________________
    ____________________________________
    content width box width

15
CSS1 Properties (2/2)
  • Box properties width, height, float,
    clear margin, (-top/-right/-bottom/-left) padd
    ing, (-top/-right/-bottom/-left) border-width,
    (-top-/-right-/-bottom-/-left-) border-color,
    border-style border, (-top/-right/-bottom/-left)

16
Boxes Example
17
Main types of elements
  • Inline elements (displayinline)
  • default can occur on the same line with other
    elements e.g., EM in HTML
  • Block-level
  • formatted as boxes separated by line breaks
  • default formatting of, e.g., P,H1,H2 in HTML
  • specified by displayblock
  • displaylist-item -gt block preceded by
    list-item marker
  • Element suppression displaynone

18
CSS Selectors Simple
  • Application of style rules determined by matching
    selectors to elements of the document tree
  • Element type name, e.g. P or H1
  • matches any instance of the element type
  • CSS2 adds
  • a universal selector matching any element
  • tests for attributes figfile"fig1.jpg"
    figure with given value for attribute
    file file"fig1.jpg" any element with that
    value for attribute file figfile element fig
    with attribute file

19
CSS Selectors Contextual
  • Element inclusion by listing simple selectors for
    ancestors
  • e.g items in ordered lists in paragraphs P OL
    LI
  • CSS2 adds
  • direct inclusion Parent gt Child
  • conditions on siblings E A element A preceded
    by an element satisfying selector
    E Bfirst-child B as the first element child

20
Examples of CSS2 Selectors
  • Dont indent a P immediately following MATH
  • MATH P text-indent 0
  • Reduce vertical space btw an H1 and an H2
    immediately following it
  • H1 H2 margin-top -5mm
  • Dont indent the first P of a DIV
  • DIV gt Pfirst-child text-indent 0

21
Counters and generated content
  • CSS1 restricted to adorning elements with
    assigned style properties
  • automatic numbering of list items on a single
    level
  • CSS2 adds insertion of generated content before
    and after selected elements

22
Generated content Example
  • Style rules for the task chapter
    counter-reset theorCntr theorembefore
    content "Theorem " counter(theorCntr) ".
    " counter-increment theorCntr font-weight
    bold theoremafter content
    url("box.gif") float right

23
Inserting attribute values
  • Also possible to include attribute values of the
    selected element in generated content using
    attr(Name)
  • Example Insert value of attribute ALT before
    images
  • IMGbefore content attr(ALT)

24
Limitations of CSS
  • Limited transcription capabilities
  • limited transposition of elements
    (floatleft/right)
  • calls of parameterised formatting tasks the major
    transcription type supported
  • In CSS1 context specification limited
  • no sibling or parent/child relationships
  • limited use of attributes (CSS1 only class)
  • CSS2 more powerful, but
  • no access to elements children or content
  • unable to access targets of cross references

25
Limitations of CSS
  • Non-programmable
  • no decision structures
  • unable to store calculated quantities
  • non-extensible
  • gt relatively simple
  • Western-language orientation (left-to-right)
  • XSL allows unrestricted transformations of the
    document to precede a CSS-like formatting

26
Browser Implementations
  • CSS support in major browsers is rather
    discouraging (See, e.g., http//www.ddj.com/webre
    view/style/)
  • gt full CSS not usable on the Internet
  • (Almost) complete implementations of CSS1
  • Netscape Navigator 6
  • implements also most of CSS2 selectors
  • MS Internet Explorer 5 on Macintosh(!)
  • MS policy of developing own extensions, instead
    of completing conformance with recommendations
    strongly criticised
About PowerShow.com