1 / 105

Style Sheets

Style Sheets. DBI – Representation and Management of Data on the Internet. What are Style Sheets?. Style sheets are a mechanism for allowing authors to specify how they wish documents written in a markup language, such as XML or HTML, to be formatted. Why HTML is not Enough?.

alina
Télécharger la présentation

Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Style Sheets DBI – Representation and Management of Data on the Internet

  2. What are Style Sheets? • Style sheets are a mechanism for allowing authors to specify how they wish documents written in a markup language, such as XML or HTML, to be formatted

  3. Why HTML is not Enough? • HTML gives only a limited control over the style of documents • For Example, <H1>This Title</H1> does not say how “This Title” should look like • We cannot specify a style for all the <H1> headers, such that this style can be defined once and applied to all <H1> headers at once

  4. In Addition • HTML doesn't offer sufficient control over document formatting, i.e., it doesn’t support • leading (the space between lines) • text shadows • and many other facets

  5. The Solution Documents Style Sheet Documents with Style

  6. CSS HTML With CSS Style HTML XSL XML With XSL Style HTML Style vs. XML Style XML Not all browsers support all formats

  7. Reasons to Use Style Sheets • They separate content from formatting • They reduce download time by removing formatting information from documents • They give far more control over formatting than HTML • They ensure a consistent appearance across a site • One style sheet can be attached to many files (changes are easier)

  8. What Reasons are there not to use Style Sheets? • Not all browsers fully support all style sheets • Not all browsers support style sheets properly • Be aware that since CSS (CSS2) is a large specification, most browsers do not support it in its entirety

  9. What can be done in CSS? • Style sheets allow you to say, for example, • that you want headings in 30px Arial with a pink background • that you want the whole document to have a left margin of 1in • and more, as will be shown next

  10. Example A definition in CSS: BODY {color: red; background-color: white; font-size: 32px; font-family: Arial; line-height: 36px; margin-left: 5%}

  11. Without Style <HTML> <HEAD> CSS Test </HEAD> <BODY> This is a test of using a CSS style sheet. <P> </BODY> </HTML>

  12. On A Browser

  13. With Style <HTML> <HEAD><TITLE>Formatting style with CSS</TITLE> <STYLE TYPE="text/css"><!- BODY { color: red; background-color: white; font-size: 32px; font-family: Arial; line-height: 36px; margin-left: 5% } -></STYLE> </HEAD> <BODY>This is an example of using CSS.<P> </BODY> </HTML>

  14. On a Browser

  15. Using CSS A Cascading Style Sheet

  16. CSS - Cascading Style Sheet • CSS is a W3C recommendation • for formatting HTML and XML documents • to simplify Web authoring and site maintenance • Level 1 (CSS1) from Dec. 1997 • Level 2 (CSS2) from May 1998

  17. CSS Level 1 • Allows authors and readers to attach style (e.g., fonts, colors, spacing) to HTML/XML documents • Implemented in “version 4.+” of major Web browsers (but not completely)

  18. CSS Level 2 • An extension of CSS1: • has media-specific style sheets, e.g., for aural/Braille/handheld devices, printers… • Also supports • content positioning, downloadable fonts, table layout, internationalization, automatic counter and numbering • some properties related to user interface

  19. CSS Style Sheet • The style sheet is a set of style rules • A style rule syntax: selector {declaration} • selector • locates elements affected by the rule • declaration • looks like a list: P1:V1 ; … ; Pn:Vn • sets values for formatting properties

  20. Rules and Properties • Example rules • H1 {color: blue} • H1, H2, H3 {font-style:bold } • P {font-family: verdana; color: red } • Examples of formatting properties • font-size, font-style, font-family, font-weight, font-align, margin-left, border-width, float, color, background-color, ...

  21. Declaring Style Data • There are three ways to declare the style data • in the <HEAD> of pages • at tag level • in a separate external style sheet • In each case, style sheets do not contain any HTML, just style commands

  22. External Style Sheets • Style sheets are linked using the tag <LINK rel="stylesheet” type="text/css” href="name.css"> which must go in the header of a page • Example <HTML> <HEAD> <LINK rel="stylesheet" type="text/css” href="fluorescent.css"> </HEAD> <BODY> ... </BODY> </HTML>

  23. Importing Style Sheets • The @import rule allows you to keep some things the same while having others different • Usage: @import url(nameOfFile.css) • Reasons for using @import • If the documents include right-to-left text, and a bi-directional style is needed, one can use a standard bidi style sheet • If a standard style sheet specifies the appearance of most of the elements, but there are more specific elements that also need to be defined

  24. Embedded Style sheets • Embedded style sheets are enclosed in a <STYLE type="text/css">and</STYLE> tag • They go in the header of a page: <HTML> <HEAD> <STYLE type="text/css"> <!--Note the HTML comment tags. BODY {color: red}They are for browsers that --> do not support style sheets. </STYLE> </HEAD> <BODY> ... </BODY> </HTML>

  25. Inline Style • Any tag except the <HTML> tag itself can take the style attribute: <P style="color: green"> and this is green</P> will define the color of the paragraph to be green

  26. Declarations • Declarations are used to apply style to elements, for example, to set an element to have a border • The basic syntax of a declaration is a property (such as color) followed by a colon (:) and a value • Declarations are directly used only in inline style

  27. Declaration Grouping • In order to specify several styles for an element, declarations can be separated by semicolons • It is optional to have a semicolon after the final declaration • Example <P style="color: red; font-size: 16px">

  28. Selectors • Selectors are used to associate style declarations with an element or elements • Declarations are placed within a block (enclosed in {}) and preceded by a selector • Example DIV {color: red; font-size: 16px}

  29. Type vs. Class Selectors • There are type selectorsand class selectors • Type selectors are what we saw • They give properties to elements • Class selectors allow a user to give elements a particular name • In HTML it looks as follows: <TAG class="classname">

  30. Class Selectors • The definition of the class <P class="introductoryparagraph"> .... </P> • The definition of the style • P.introductoryparagraph {color: blue} • applies to P elements with the class name introductorypargraph • .introductoryparagraph {color: blue} • applies to any element with the class name introductoryparagraph

  31. Class Selectors (cont’d) • An element may have more than one class, e.g., <P class="green quote new” matches, e.g., • P.quote.green, • P.new or • P.quote.new.green, • but not P.new.old. • However, few browsers support this usage

  32. Pseudo-Class Selectors • Used for choosing values for properties based on the state of the browser • :link and :visited • different style for a visited link compared to an unvisited one • :hover (the mouse is over the element) and :focus (the focus is on the element) • :active (applied when an element is being activated)

  33. Pseudo-Class Examples • A:link {color: red} • A:visited {color: purple} • P:hover {text-decoration: underline} • A:focus {text-decoration: underline} • INPUT:active {color: red}

  34. Pseudo-Classes on Links • Suppose we are given the definition: A:active {background-color: red} A:hover {background-color: yellow} A:link {background-color: green} • What is the problem? • The states are not mutually exclusive • A possible solution by multiple pseudo-classes, i.e., A:link:hover • What will A:link:hover:focus {color: red} do?

  35. Contextual Selectors • If ELEMENT2 is a descendant of ELEMENT1, then the given properties apply to those ELEMENT2s • Example STRONG EM {text-transform: uppercase} /* EM inside STRONG will be uppercase */ <STRONG><EM>some text</EM></STRONG> SOME TEXT

  36. Selector Grouping • Associate a block with several different selectors • Save typing • Save download time • Done by separating the selectors by commas • E.g.,BODY P, H1 {color: red} is the same as BODY P {color: red} H1 {color: red}

  37. The Universal Selector (*) • The universal selector matches anything • Examples • BODY * P -- P is the grandchild or greater of BODY • *:active is equivalent to :active • * {height: 100px} -- all elements should be 100 pixels high

  38. :First-Child Selector • A pseudo-class • Matches an element that is the first child of its parent <OL><LI>This is the first child of OL -- it is matched by LI:first-child.<LI>This is the second child of OL.</OL>

  39. Pseudo-Element Selectors • Select part of an element (whereas pseudo-classes select all of the element) • First-line and first-letter -- apply to the first line and the first letter of an element, respectively; Example: • P:first-line {text-transform: capitalize}P:first-letter {font-size: 48px; color: red}

  40. ID Selectors • IDs are identical to classes, except that there can only be one element with a given ID in a document. • In the HTML document: • <BODY id="introduction"> • In the style-sheet: • BODY#introduction {font-size: 1.2em}or • #introduction {font-size: 1.2em}

  41. Attribute Selector • P[attribute] • matches P when attribute is set to any value • P[title=intro] or P[title="intro"](the quotes are optional) • matches P when its title attribute set to "intro" • P[class~=green] • matches P when the class attribute is set to "green small", "small green", "green", etc.

  42. Combinators • Child combinators (>) - only apply to children (differently from contextual selectors) • For example: BODY > Pmatches: <BODY> <P> but not <BODY> <DIV> <P> </DIV>

  43. Adjacent Sibling Combinator (+) • Used to specify that the two specified elements are adjacent siblings <DIV><P> does not match P+P </P></DIV><P> does not match P+P </P><P> matches P+P </P>

  44. Example <HTML> <HEAD><TITLE>Formating style with CSS</TITLE></HEAD> <BODY> <IMG SRC="tomato.gif"> <H1>A joke</H1> <P> A mama tomato, a papa tomato and a baby tomato are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!"). </P> </BODY> </HTML>

  45. Adding a style <STYLE type="text/css"> BODY { background-image: url("tomato1.gif"); background-attachment: fixed } H1 { background-color: rgb(100,150,100); color: rgb(250, 200, 250); } P { background-color: yellow; color: purple; font-size: 200% } </STYLE>

  46. <HEAD><TITLE>Some more style examples</TITLE></HEAD> <style> BODY {font-size: 30} P:first-line {color: #ff0000;font-variant: small-caps} </style> <BODY> <SPAN style="float: left; font-size: 100px; line-height: 90px; width: 60px">T</SPAN> wo cows were walking together in a field. One turns to the other and says, "hey larry are you worried about getting that mad cow disease?" <P> Larry, in a very odd and wacky voice says, <SPAN style="text-decoration: underline"> "why would I, I'm a chicken?"</SPAN> <SPAN style="text-decoration: line-through"> "why would I, I'm a cow?"</SPAN> </BODY> </HTML>

  47. Inheritance and Cascading Resolving Conflicts of Definitions

More Related