1 / 31

HTML5 and CSS3

Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 6 Introducing CSS3. New Element Styling. html5shiv.js provided support in older IE browsers for new sectioning elements aside, header, footer, article, etc.

latham
Download Presentation

HTML5 and CSS3

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. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

  2. Chapter 6Introducing CSS3

  3. New Element Styling • html5shiv.js provided support in older IE browsers for new sectioning elements • aside, header, footer, article, etc. • We still need to make these render as block elements instead of inline elements (which is the default) article, aside, figure, … { display:block; }

  4. CSS3 Selectors

  5. Relational Selectors • article time • Descendant – time element within article element • article > time • Child – time element is an immediate child of an article element • article + time • Adjacent sibling – time element and article element share the same parent and the time element immediately follows the article element

  6. Relational Selectors • article ~ time • General sibling – time element and article element share the same parent and time element appears anywhere after the article element

  7. What Does It Select? • li + li • Every element in a list except the first one • .clock time • time elements within an element using class=“clock” • #main > article • article elements that are direct children of an element with the id=“main”

  8. Attribute Selectors • video[src] • Matches any video element with a src attribute (regardless of its value) • audio[preload=“auto”] • Matches any audio element with a preload attribute set to “auto” • p[lang|=“en”] • Matches any p element with a lang attribute equal to “en” or starting with “en-”

  9. Attribute Selectors • div[class~=“fancy”] • Matches any div element with a class attribute including the whole word “fancy” • article[id^=“news”] • Matches any article element containing an id that starts with “news” • article[id$=“news”] • Matches any article element containing an id that ends with “news”

  10. Attribute Selectors • article[id*=“news”] • Matches any article element with the text “news” appearing within its id attribute

  11. What Does It Select? • time[data-autofill] • Any time element with the custom attribute data-autofill • article[class|=“playlist-entry”] • Any article element with a class that equals “playlist-entry” or starts “playlist-entry-” • [class~=“banner-ad”] • Any element with the “banner-ad” class

  12. Pseudo-class Selectors • :enabled • :disabled • :checked • :indeterminate • :target (# anchor target in url) • :default (among a set of elements) • :valid (based on type/pattern attributes) • :invalid (empty or invalid form elements)

  13. Pseudo-class Selectors • :in-range (elements w/ min/max values) • :out-of-range • :required (form controls) • :optional (non-required form controls) • :read-only (not user alterable) • :read-write (user alterable)

  14. What Does It Select? • time[data-autofill] • Any time element with the custom attribute data-autofill • article[class|=“playlist-entry”] • Any article element with a class that equals “playlist-entry” or starts “playlist-entry-” • [class~=“banner-ad”] • Any element with the “banner-ad” class

  15. Structural Pseudo-classes • :root (the html element) • ulli:nth-child(3) • Matches every li element that is the third child of a ul parent • ulli:nth-last-child(2) • Matches the next to last li element that is a child of a ul parent • article:nth-of-type(5) • Matches the fifth article element within any parent element

  16. Structural Pseudo-classes • article:nth-last-of-type(2) • Matches the next to last article element within any parent element • :first-child • :last-child • :first-of-type • :last-of-type • :only-child

  17. Structural Pseudo-classes • div:empty • Matches any div element that has no child elements • p:lang(fr) • Matches any p element in a language denoted by the “fr” abbreviation • :not(:disabled) • Matches all elements that are not disabled

  18. What is “n”? • ul > li:nth-child(2n) • Matches every other li element that is an immediate child of a ul element • ul > li:nth-child(2n+1) • Matches every other li element that is an immediate child of a ul element, but offset by one

  19. Pseudo-elements • Pseudo-classes target element attributes and states • Pseudo-elements target text that part of the document but not accessible as part of the document tree • Pseudo-elements are targeted with a double colon (::) instead of a single colon (:)

  20. Text Nodes • All text nodes have a first letter and first line • ::first-letter • ::first-line • Make the first line of the paragraph red. • Double the size of the first letter.

  21. Selected Text • The page can have selected elements • ::selection • ::-moz-selection (Firefox) • Make selected text white.

  22. Generating Content • Pseudo-elements can be used to insert content into a document • ::before • ::after • Add a PDF icon after a link. • Insert “(PDF)” text after the anchor content.

  23. CSS3 Colors

  24. Pre-CSS3 Colors • The color red could be expressed as: • #f00 • #ff0000 • rgb(255, 0, 0) • rgb(100%, 0%, 0%) • red

  25. CSS3 Color Additions • More color keywords • blanchedalmond, cornflowerblue, mediumseagreen • RGBA support adds alpha value to specify the color’s opacity • rgba(255, 0, 0, 0.4) – red, 40% opaque • Make standard text at 40%, but selected text at 100%

  26. CSS3 Color Additions • HSL, HSLA • Hue, saturation, lightness (and alpha) • Hue is an integer value • Saturation and lightness are percentages • http://www.workwithcolor.com/

  27. CSS3 Color Additions • opacity can also be set as a CSS property to adjust the transparency of elements on the page div.halfopaque { color: black; background-color: rgb(255, 0, 0); opacity: 0.5; } div.halfalpha { color: black; background-color: rgba(255, 0, 0, 0.5); }

  28. Border Radius • Rounded corners can be specified on one or more corners of an element border-radius: 25px; border-radius: 10px 10px 5px 5px; border-top-left-radius: 10px; border-radius: 20px / 10px;

  29. Drop Shadows • Drop shadows can be added to any element box-shadow: [inset] horzvert blur spread color; • IE6-IE8 uses a plug-in filter (see text) • Multiple shadows can be separated by commas • Shadows follow element edges

  30. Text Shadows • Shadows can also be added to text content text-shadow: top left blur color;

  31. Ad Styling • Let’s try to add the CSS necessary to style the “Wanted” ad • border-radius • box-shadow • text-shadow

More Related