1 / 15

INT222 – Internet Fundamentals

INT222 – Internet Fundamentals. Week 6: More on CSS. Outline. Advanced CSS CSS selector Quiz #1 solutions innerHTML examples. What is a CSS Selector. A selector is a pattern; It’s the part of a CSS rule that matches a set of elements in an HTML or XML document.

milek
Download Presentation

INT222 – Internet Fundamentals

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. INT222 – Internet Fundamentals Week 6: More on CSS

  2. Outline • Advanced CSS • CSS selector • Quiz #1 solutions • innerHTML examples

  3. What is a CSS Selector • A selector is a pattern; • It’s the part of a CSS rule that matches a set of elements in an HTML or XML document. •  It can also be referred to as a link between the HTML document and the style sheet.  • A CSS rule example: strong { color: red; } Strong : selector color: red; : declaration Color : property Red : value

  4. Type of Selector • Element type selector (tag selector) • Class selector • ID selector • Selector grouping • Universal selector • Attribute selector • Combinators • Descendant selector (contextual selectors) • Child selector • Adjacent sibling selector • General sibling selector • Pseudo-classes • … … • Pseudo-elements • … …

  5. Universal selector • The universal selector matches any element type. • e.g. * { margin: 0; padding: 0; } • The two selector examples are equivalent: *.warning { color: red; } .warning { color: red; }

  6. Attribute selector • An attribute selector will match elements on the basis of either • the presence of an attribute, or • the exact or partial match of an attribute value. • e.g. [href] { color: yellow;} a[href] {color: yellow;} input[type="submit"] { border: 2px solid #ccc;} [class~="warning"] { background-color: yellow; } • equal to: .warning { background-color: yellow; }

  7. Combinators • Combinators - Selectors based on relationships • Descendant selector (contextual selectors) • e.g. div span { line-height: 90%; } // includes child • Child selector • e.g. ul>li { text-decoration: underline; } • Adjacent sibling selector • e.g. H2+p { color: blue; } // matches all p elements that appear immediately after H2 e.ements. • General sibling selector • e.g. H2~p { color: blue; }

  8. Pseudo-classes • A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. • Some pseudo-classes are dynamic. • A pseudo-class starts with a colon (:).

  9. List of pseudo-classes/elements • :link -- matches link elements that are unvisited • :visited -- matches link elements that have been visited • :active -- matches any element that's being activated by the user • :hover -- matches elements that are being designated by a pointing device • e.g. a:hover { color: #f00; background: #eee; } • :focus -- matches any element that's currently in focus • :last-child -- matches the last child element of its parent element • e.g. li.last-child { color: #f00; background: #eee; } • :first-letter -- This pseudo-element matches the first letter • e.g. .p1.first-letter, li.first-letter {color: #f63} • :after -- This pseudo-element represents generated content that’s rendered after another element. • e.g. p:before { content: "["; } p:after { content: "]"; }

  10. CSS3 Pseudo-classes/elements • :nth-child(n) -- matches elements on the basis of their positions within a parent element’s list of child elements • e.g. tr:nth-child(2n+1) {…} matchs only odd-numbered table rows. • :empty -- matches elements that have no children • :enabled -- matches user interface elements that are enabled • ::selection -- This pseudo-element matches any user-selected text within a textareaelement • e.g. textarea::selection{ background-color: yellow; } • … …

  11. Example • Example of CSS advanced features file:///C:/Users/Wei/Dropbox/INT222-2014Win/Lectures/for-lecture6/examples/morecss.html • About the title of element – a global attribute • HTML: <p><label for="example02"> <a title="Whatever">Example No. 2</a></label></p> • CSS: form p:hover label { color: #369; background: #eee; } • Presentation: • And more …

  12. Quiz #1 solutions • Link: https://github.com/wsong18/int222-demos-2014win/tree/master/Quiz1-solutions

  13. innerHTML examples • e.g. • HTML: <p id="a1"><a onclick='myfunction("a1")' href="#">Created by:</a></p> • JS: function myfunction(id) { var para = document.getElementById(id); if (id==="a1") { para.innerHTML ="created by Me!"; } } • Link: https://github.com/wsong18/int222-demos-2014win/blob/master/Week5/innerHTML.html

  14. Reference • Understanding CSS Selectors (Sitepoint)

  15. Thank You!

More Related