Your SlideShare is downloading. ×
0
CSS Syntax & Selector
Mark Chen

2/13/2014

1
CSS Syntax
•

A CSS rule has two main parts: a selector, and one or more declarations:

•

The selector is normally the HT...
CSS Selectors
Selector

Example

Example description

CSS

.class

.intro

Selects all elements with class="intro"

1

#id...
Attribute Selectors
Selector

Example

Example description

CSS

[attribute]

[target]

Selects all elements with a target...
CSS Selectors
Selector

Example

Example description

CSS

:before

p:before

Insert content before the content of every <...
The CSS Box Model

總寬度的計算:

250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right ...
讓 div 以 ol, ul, li 的樣式呈現
Can work on IE, Chrome

2/13/2014

But not work on firefox

7
:after or :before - content
Can work on Chrome, firefox, IE

Note: For :before or :after to work in IE8, a <!DOCTYPE> must...
Reference
•

W3Schools - CSS Syntax
•

•

W3Schools - CSS Selector Reference
•

•

http://www.w3schools.com/css/css_syntax...
Upcoming SlideShare
Loading in...5
×

Mark css syntax & selector

343

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
343
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mark css syntax & selector"

  1. 1. CSS Syntax & Selector Mark Chen 2/13/2014 1
  2. 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. 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. 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. 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. 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. 7. 讓 div 以 ol, ul, li 的樣式呈現 Can work on IE, Chrome 2/13/2014 But not work on firefox 7
  8. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×