Mark   css syntax & selector
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Mark css syntax & selector

on

  • 496 views

 

Statistics

Views

Total Views
496
Views on SlideShare
495
Embed Views
1

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 1

http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mark css syntax & selector Presentation Transcript

  • 1. CSS Syntax & Selector Mark Chen 2/13/2014 1
  • 2. CSS Syntax • A CSS rule has two main parts: a selector, and one or more declarations: • The selector is normally the HTML element you want to style. • Each declaration consists of a property and a value. • The property is the style attribute you want to change. Each property has a value. 2/13/2014 2
  • 3. CSS Selectors Selector Example Example description CSS .class .intro Selects all elements with class="intro" 1 #id #firstname Selects the element with id="firstname" 1 * * Selects all elements 2 element p Selects all <p> elements 1 element,element div,p Selects all <div> elements and all <p> elements 1 element element div p Selects all <p> elements inside <div> elements 1 element>element div>p Selects all <p> elements where the parent is a <div> element 2 element+element div+p Selects all <p> elements that are placed immediately after 2 <div> elements 2/13/2014 3
  • 4. Attribute Selectors Selector Example Example description CSS [attribute] [target] Selects all elements with a target attribute 2 [attribute=value] [target=_blank] Selects all elements with target="_blank" 2 [attribute~=value] [title~=flower] Selects all elements with a title attribute containing the 2 word "flower" [attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting 2 with "en" [attribute^=value] a[src^="https"] Selects every <a> element whose src attribute value begins with "https" 3 [attribute$=value] a[src$=".pdf"] Selects every <a> element whose src attribute value ends with ".pdf" 3 [attribute*=value] a[src*="w3schools"] Selects every <a> element whose src attribute value contains the substring "w3schools" 3 2/13/2014 4
  • 5. CSS Selectors Selector Example Example description CSS :before p:before Insert content before the content of every <p> element 2 :after p:after Insert content after every <p> element 2 :first-child p:first-child Selects every <p> element that is the first child of its parent 2 :last-child p:last-child Selects every <p> element that is the last child of its parent 3 :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent 3 :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child 3 :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent 3 :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child 3 2/13/2014 5
  • 6. The CSS Box Model 總寬度的計算: 250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) ---------------------------------= 300px 2/13/2014 The margin property can have from one to four values.  margin:25px 50px 75px 100px; 上 右 下 左  margin:25px 50px 75px; 上 左&右 下  margin:25px 50px; 上&下 左&右  margin:25px; 上&下&左&右 6
  • 7. 讓 div 以 ol, ul, li 的樣式呈現 Can work on IE, Chrome 2/13/2014 But not work on firefox 7
  • 8. :after or :before - content Can work on Chrome, firefox, IE Note: For :before or :after to work in IE8, a <!DOCTYPE> must be declared. 2/13/2014 8
  • 9. Reference • W3Schools - CSS Syntax • • W3Schools - CSS Selector Reference • • http://www.w3schools.com/css/css_syntax.asp http://www.w3schools.com/cssref/css_selectors.asp W3Schools - The CSS Box Model • http://www.w3schools.com/css/css_boxmodel.asp 2/13/2014 9