int222 internet fundamentals
Download
Skip this Video
Download Presentation
INT222 – Internet Fundamentals

Loading in 2 Seconds...

play fullscreen
1 / 15

INT222 – Internet Fundamentals - PowerPoint PPT Presentation


  • 134 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' INT222 – Internet Fundamentals' - milek


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
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)
ad