Int222 internet fundamentals
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

INT222 – Internet Fundamentals PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Int222 internet fundamentals

INT222 – Internet Fundamentals

Week 6: More on CSS


Outline

Outline

  • Advanced CSS

    • CSS selector

  • Quiz #1 solutions

  • innerHTML examples


What is a css selector

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


Type of selector

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

    • … …


Universal selector

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; }


Attribute selector

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; }


Combinators

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; }


Pseudo classes

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 (:).


List of pseudo classes elements

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: "]"; }


Css3 pseudo classes elements

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; }

  • … …


  • Example

    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 …


    Quiz 1 solutions

    Quiz #1 solutions

    • Link:

      https://github.com/wsong18/int222-demos-2014win/tree/master/Quiz1-solutions


    Innerhtml examples

    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


    Reference

    Reference

    • Understanding CSS Selectors (Sitepoint)


    Thank you

    Thank You!


  • Login