Mark css syntax & selector

  • 253 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
253
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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