SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

Cascading Style Sheets

aspen-terrell avatar
aspen-terrell
20 diapositives · 377 Views · Dec 02, 2014

Cascading Style Sheets (CSS) allow the specification of styles for XML elements, enhancing their display. Initially designed for HTML, CSS supports the separation of structure from presentation. Key versions include CSS1 (1996), CSS2 (1998), and the current development of CSS3. Stylesheets are text documents containing style rules, linked to XML documents for styling. Understanding CSS syntax, properties, inheritance, and box model concepts is essential for effective web design. Explore CSS properties for layout, color, fonts, and more to enhance web presentation.

#cascading style sheets #cascading style sheets ppt #powerpoint #presentation
Cascading Style Sheets - slide 1
01 / 20Cascading Style Sheets
1 / 17

Télécharger la présentation

Cascading Style Sheets
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  1. Cascading Style Sheets Eugenia Fernandez IUPUI

  2. CSS Purpose • CSS allow you to specify the style in which your XML elements are displayed. • CSS were originally designed for use with HTML, but work for XML as well. • Supports the separation of structure from presentation.

  3. CSS Versions • CSS1 • Adopted by W3C in December 1996 • CSS2 • Became a W3C Recommendation in May 1998 • Adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables. • CSS3 • Currently under development

  4. Browser Support for CSS • Currently most browsers support CSS1. • Few support CSS2. • For a review of what is supported by each browser, go to WebReview.coms Style Sheet Reference Guide

  5. Creating a Stylesheet • A stylesheet is a text document with a .css extension that contains a list of style rules. • You can create a stylesheet using • Notepad • FrontPage • Visual InterDev (GUI Interface)

  6. Linking a Stylesheet To attach a stylesheet to an XML document, add the following processing instruction: <?xml-stylesheet type="text/css" href="employees.css"?>

  7. CSS Syntax • A style sheet is made up of style rules. • Each style rule has this syntax: selector { declaration } • The selector identifies which XML element the rule applies to. • The declaration specifies how the element’s content is to be displayed.

  8. Declarations • A declaration has two parts: • a property • a value e.g. color: red; font-size: 14pt; • Properties and values are separated by : • Declarations end with a ; • Valid properties and values are given in the CSS specification.

  9. Flow & Box Objects • A browser normally places text and elements on the screen in the order they appear in the XML document. These elements flow from the top of the screen to the bottom. • Every element has a rectangular box drawn around it. The content of the element is displayed in its box.

  10. Inheritance • Flow objects inherit properties from their parents. • XML documents have a hierarchical structure. • Any property specified for a parent element is automatically inherited by its child elements. • Rules attached to client elements override inherited properties, i.e., more specific rules override more general rules.

  11. margin (transparent) padding element contents Box Properties border element width box width

  12. Types of Boxes • Block • has line break before and after it, i.e. appears on its own line • Inline • no line breaks, i.e., appears in single line

  13. Box Properties • display • margin • padding • border • border-style, border-width, border-color • width • height Useful for images, but can be used with text

  14. Color & Background Properties • foreground color • background color • background image

  15. Font Properties • font-style • font-variant: small-caps • font-weight • font-size • font-family • list several in case not available on the client, separate by commas • font • shorthand for font-style font-variant font-weight font-size, line-height and font-family, in that order.

  16. Text Properties • text-indent • line-height • text-align • vertical-align • word-spacing • addition to the default space between words • letter-spacing • addition to the default space between characters • text-decoration • underline | overline | line-through | blink • text-transform • capitalize | uppercase | lowercase | none

  17. Property Values: Length • Used for widths, heights, and sizes • em: relative height of element’s font • ex: relative to height of letter “x” • px: pixels • in: inches • cm: centimeters • mm: millimeters • pt: points, where point is 1/72 inch • pc: picas, 1 pica = 12 points

  18. Property Values: Color • Hexadecimal RGB value • e.g. #00FF00 • RGB values with integers or % • Integer range 0-255 • e.g., rgb(0,0,255) • Percentage range 0%-100% • e.g., rgb(0%, 0%, 255) • Keywords • e.g., black, maroon, green, navy, silver, red, lime, blue, gray, purple, olive, teal, white, fuchsia, yellow, aqua

  19. Property Values • Percentage • Used for width, height and position • Format • 50% • URL • Used for images • Format • url(image.gif)

  20. The End