1 / 30

Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau

Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau.edu. CSS. Introduction Levels of Style Sheets Inline style sheets Document-level style sheets (embedded style sheets) External style sheets Style Specification Formats Depends on the level of the style sheet

didier
Télécharger la présentation

Cascading Style Sheets (CSS) Xingquan (Hill) Zhu xqzhu@cse.fau

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. Cascading Style Sheets(CSS)Xingquan (Hill) Zhuxqzhu@cse.fau.edu CSS

  2. CSS • Introduction • Levels of Style Sheets • Inline style sheets • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

  3. Introduction • Evolution • The CSS1 specification was developed in 1996 • CSS2 was released in middle-1998 • CSS3 is on its way • Things you should know about CSS • CSSs provide the means to control and change presentation of HTML documents • But Why? Element presentation vs document structure • CSS is not technically HTML, but can be embedded in HTML documents • Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents • Style is specified for a tag by the values of its properties CSS

  4. Levels of Style Sheets • Inline • Specified for a specific occurrence of a tag and apply only to that tag • Appears in the tag itself (Example) • Document-level style sheets • Apply to the whole document in which they appear • Appears in the head of the document (Example) • External style sheets (Example) • Can be applied to any number of documents • In separate files, potentially on any server on the Internet • A <link> tag is used to specify that the browser is to fetch and use an external style sheet file • <link rel = "stylesheet" type = "text/css" • href = "http://www.wherever.org/termpaper.css"> • </link> CSS

  5. CSS Validation http://jigsaw.w3.org/css-validator/validator-upload.html CSS

  6. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

  7. Style Specification Formats • Format depends on the level of the style sheet • Inline • Style sheet appears as the value of the style attribute • General form: style = "property_1: value_11, value_12, value_13; property_2: value_2; … property_n: value_n;“ Final ; optional but preferred Example CSS

  8. Style Specification Formats: Document level • Style sheet appears as a list of rules that are the content of a <style> tag • The <style> tag must include the type attribute, set to "text/css" • The list of rules • Selector1 {property_1: value_1; property_2: value 2} • Selector2 {property: value} • Comments in the rule list must have a different form - use C comments (/*…*/) Example CSS

  9. Style Specification Formats: Conflicting Styles • Styles defined by the user take precedence over styles defined by the user agent • Styles defined by authors take precedence over styles defined by the user. • Styles defined for parent elements are also inherited by children (nested) elements • Inheritance Example • In case of conflict • Properties defined for child and descendant elements have a greater specificity than properties defined for parent and ancestor elements. CSS

  10. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

  11. Selector Forms • Simple Selector Form • The selector is a tag name or a list of tag names, separated by commas • Simple examples: • H1, h3, p • Contextual selectors • Ol ol li • P em CSS

  12. Selector Forms: Class Selector • Used to allow different occurrences of the same tag to use different style specifications • A style class has a name, which is attached to a tag name • p.narrow {property: value; …} • p.wide {property: value; …} • The class you want on a particular occurrence of a tag is specified with the class attribute of the tag • <p class = "narrow"> This is narrow </p> • <p class = "wide"> This is wide class </p> CSS

  13. Selector Forms: Generic Selector • A generic class can be defined if you want a style to apply to more than one kind of tag • A generic class must be named, and the name must begin with a period • .really-big { … } • Use it as if it were a normal style class • <h1 class = "really-big"> … </h1> • … • <p class = "really-big"> … </p> Example CSS

  14. Selector Forms: id Selector • Allow the application of a style to one specific element • General form: • #specific-id {property-value list} • Example: • #section14 {font-size: 20} • When referring to this the id selector • <h1 id=“section14”> Welcome to my Home </h1> CSS

  15. Pseudo Classes • Pseudo classes are styles that apply when something happens, rather than because the target element simply exists • Names begin with colons • hover classes apply when the mouse cursor is over the element • focus classes apply when an element has focus Example CSS

  16. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Conflicting Styles • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

  17. Property Value Forms • There are 60 different properties in 7 categories • Fonts • Lists • Alignment of text • Margins • Colors • Backgrounds • Borders CSS

  18. Units of Measurement • Units (no space is allowed between the value and the unit specification) • px - pixels • in – inches (1 inch = 2.54 cm) • cm - centimeters • mm - millimeters • pt – points (1/72 inch) • pc - picas (12 points) • em - height of the letter ‘M’ • ex-height - height of the letter ‘x’ • Example • P { line-height:150% } /* 150% of ‘font-size’ */ • P {line-height: 1.5em} • #banner { height: 60%; width:70%; margin-left:15%; border: 1px solid #000} /* a box */ CSS

  19. Font Property • Font-family • Value is a list of font names - browser uses the first in the list it has • font-family: Arial, Helvetica, Courier • Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS) • Browser has a specific font for each • If a font name has more than one word, it should be single-quoted • Font-size • Possible values: a length number or a name, such as xx-small, smaller, xx-large, etc Example CSS

  20. Font Property • Font-style • italic, oblique (useless), normal • Font-weight - degrees of boldness • bolder, lighter, bold, normal • Could specify as a multiple of 100 (100 – 900) • 400 is the normal size • Font (shorthand) • For specifying a list of font properties • font: bolder 14pt Arial Helvetica • Order must be: style, weight, size, name(s) CSS

  21. Text related Properties • Text-decoration • line-through, overline, underline, none • Letter-spacing; Word-spacing • Value is any length property value • Text-align • Left; right; center; justify • Vertical-align • Baseline; sub; super; top; text-top; middle; bottom; text-bottom; <percentage> • Text-transform • Capitalize; uppercase; lowercase; none • Text-indent • Value (percentage) • Line-height • Value (number, percentage) CSS

  22. Position properties • Absolute positioning • Position: absolute; top, left, z-index Example # one{ position:absolute; top: 1em; left: 1em; } • Relative positioning • Position: relative; Example • Span • Grouping element: does not apply any inherent formatting to its contents CSS

  23. Alignment of Text • Element dimensions • Specify the actual dimensions of each page element Example • Nested elements Example • The text-indent property allows indentation • Takes either a length or a % value • The text-align property has the possible values, • Left (the default), center, right, or justify • Sometimes we want text to flow around another element • the float property • Left, right, and none (default) CSS

  24. Alignment of Text (contd.) • If we have an element we want on the right, with text flowing on its left, we use the default text-align value (left) for the text and the right value for float on the element we want on the right • <img src = "c210.jpg" style = "float: right" /> -- Some text with the default alignment – left • Clear float • <p style=“float: clear” … Example CSS

  25. Border related properties Box model • Margin-top (right, left, bottom) • Value (percentage) • Padding-top (right, left, bottom) • Value (percentage) • Border-top-width (right, left, bottom) • Thin, medium, thick (value) • Border-style • Dotted, dashed, double, none • Border-color Example CSS

  26. Background • Background-color: • Red; #0000FF • Background-image: • url(myimage.jpg) • Background-repeat: • Repeat; no-repeat; repeat-x; repeat-y: • Background-position: • Top; center; bottom; left; right; 20px 20px • Background-attachment: • Fixed; scroll; Background for single elements Example CSS

  27. List Property • list-style-type • Disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. • Can also use an image for the bullets in an ordered list • <li style = "list-style-image: url(bird.jpg)"> Example CSS

  28. User Style Sheets • Users format pages based on preference • <html xmlns = "http://www.w3.org/1999/xhtml"> • <head> • <title>User Styles</title> • <style type = "text/css"> .note { font-size: 9pt } </style> </head> • <body> • <p>Thanks for visiting my Web site. I hope you enjoy it. • </p><p class = "note">Please Note: This site will be moving soon. Please check periodically for updates.</p> • </body> • </html> Example CSS

  29. Other interesting stuff • Cursor Example • Specifies the type of cursor to be displayed when pointing on an element. • Cursor: url(sample.cur), cursor: crosshair • First letter (pseudo element)Example • Adds special style to the first letter of a text • P:first-letter{color:#000; font-size:xx-large} • Mighty Hover Example http://icant.co.uk/csstablegallery/index.php?css=75#r75 Complete CSS2 Properties:http://www.w3schools.com/css/css_reference.asp CSS

  30. CSS • Introduction • Levels of Style Sheets • Inline • Document-level style sheets (embedded style sheets) • External style sheets • Style Specification Formats • Depends on the level of the style sheet • Inline vs Document level • Conflicting Styles • Selector Forms • Simple selector, Class selector, Generic selector, Id selector • Pseudo Classes • Property value forms • Fonts, Lists, Alignment of text, Margins, Colors, Backgrounds, Borders CSS

More Related