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