Mark css syntax & selector

Mark css syntax & selector

• 1.
  CSS Syntax &Selector Mark Chen 2/13/2014 1
• 2.
  CSS Syntax • A CSSrule 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 Selectsall 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] Selectsall 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 Insertcontent 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 BoxModel 總寬度的計算： 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 - CSSSyntax • • 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