Slide 1
Slide 1 text
CSS Beyond the Basics
by Catge@Alipay UED
୍ᄅರྒ௹ರ
Slide 2
Slide 2 text
CSS Reset
୍ᄅರྒ௹ರ
Slide 3
Slide 3 text
Use CSS Reset
Why need CSS reset?
How to use it?
Introduce some CSS reset.
୍ᄅರྒ௹ರ
Slide 4
Slide 4 text
Why need CSS Reset
Different Internet Browser has different
CSS default style
adjust size and style of type to make
uniform appearance
୍ᄅರྒ௹ರ
Slide 5
Slide 5 text
୍ᄅರྒ௹ರ
Slide 6
Slide 6 text
How to use CSS Reset
Put CSS reset at the top of CSS frame
Avoid to use * CSS selector
Don’t just CLEAR but RESET
୍ᄅರྒ௹ರ
Slide 7
Slide 7 text
CSS Reset Resource
First CSS Reset by Tantek
Global White Space Reset: *{ margin:
0;padding: 0;}
YUI CSS Reset
Reset Reloaded by Eric Meyer
KISSY CSS Reset by lifesinger
୍ᄅರྒ௹ರ
Slide 8
Slide 8 text
How to use CSS Reset
Put CSS reset at the top of CSS frame
Avoid to use * CSS selector
Don’t just CLEAR but RESET
Less is more
୍ᄅರྒ௹ರ
Slide 9
Slide 9 text
CSS Box model
୍ᄅರྒ௹ರ
Slide 10
Slide 10 text
Two box models
Quirks & Standards
mode
IE/Mozilla ‘s button
Elements’ bug
IE browser’s doctypes
& the box model
relation
୍ᄅರྒ௹ರ
Slide 11
Slide 11 text
IE Browsers, doctypes and
the box model
Doctype used Win/IE5 Win/IE6
HTML 4.01 Transitional ‐
missing doctype
Quirks Quirks
HTML 4.01 Transitional ‐
full doctype
Standards Standards
XHTML 1.0 Transitional ‐
full doctype
Quirks Quirks
XHTML 1.0 Transitional ‐
missing Prolog
Standards Standards
୍ᄅರྒ௹ರ
Slide 12
Slide 12 text
Block & Inline
୍ᄅರྒ௹ರ
Slide 13
Slide 13 text
CSS Display
3 main display properties: block, inline,
none
Document flow
How to hide an element?
୍ᄅರྒ௹ರ
Slide 14
Slide 14 text
Display:block
Takes up the full width available, with a
new line before and after
,...
...,
,
- ,
- ,
- ,
- ,,,
,
୍ᄅರྒ௹ರ
-
,
- ,
Slide 15
Slide 15 text
Display:inline
Takes up only as much width as it
needs, and does not force new line
,,,,![]()
,
,,, ୍ᄅರྒ௹ರ
,,, ୍ᄅರྒ௹ರ
Slide 16
Slide 16 text
Document flow:Page display order
୍ᄅರྒ௹ರ
Slide 17
Slide 17 text
How to hide an Element?
୍ᄅರྒ௹ರ
Slide 18
Slide 18 text
Hide an element
height:0;overflow:hidden;
visibility:hidden;
display:none;
same color with the background
position it far away from screen range
୍ᄅರྒ௹ರ
Slide 19
Slide 19 text
Two different method
.fn-hide{display:none}
D.addClass(el,’fn-hide’)
el.style.display = ‘none’;
୍ᄅರྒ௹ರ
Slide 20
Slide 20 text
CSS Layout
DIV+CSS VS TABLE
୍ᄅರྒ௹ರ
Slide 21
Slide 21 text
CSS based Layout
Position
Float
Negative margin
display:Table
୍ᄅರྒ௹ರ
Slide 22
Slide 22 text
Position
Static
Relative
Absolute
fixed
In Document Flow
out of Document Flow
୍ᄅರྒ௹ರ
Slide 23
Slide 23 text
Two Position layout Method
relative + absolute;
absolute;
relative
fixed
୍ᄅರྒ௹ರ
Slide 24
Slide 24 text
Float
୍ᄅರྒ௹ರ
Slide 25
Slide 25 text
What are floats used for?
୍ᄅರྒ௹ರ
Slide 26
Slide 26 text
Clear the Float
.fn-clear:after{
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
.fn-clear{
zoom:1;
}
୍ᄅರྒ௹ರ
Slide 27
Slide 27 text
Problems with Floats
The Great Collapse
Pushdown
Double Margin Bug
The 3px Jog
Bottom Margin Bug
୍ᄅರྒ௹ರ
Slide 28
Slide 28 text
Negative margin
Fix CSS bug
Find new ideas about CSS layout
Holy Grail layout
Layout Gala by Alessandro
୍ᄅರྒ௹ರ
Slide 29
Slide 29 text
Table based Layout
Table is a data container
Table is structure not style
Sometimes we use table based layout
୍ᄅರྒ௹ರ
Slide 30
Slide 30 text
CSS Selector
୍ᄅರྒ௹ರ
Slide 31
Slide 31 text
Type Selectors: div{color:#f00;}
Descendant Selectors: div em{color:#f00;}
ID Selectors: #head{color:#f00;}
Class Selectors: .fn-hide{display:none;}
Grouping Selectors: #head,#foot{color:#f00;}
Universal Selectors: *{margin:0;}
Child Selectors: #head > div{width:100px;}
୍ᄅರྒ௹ರ
Slide 32
Slide 32 text
Adjacent Selectors: p+p{color:#f00;}
Attribute Selectors: input[type=text]
{color:#f00;}
CSS Pseudo-Classes Reference:
a:link{color:#f00;}
CSS Pseudo-Elements Reference: .fn-
clear:after{color:#f00;}
Detail...
୍ᄅರྒ௹ರ
Slide 33
Slide 33 text
CSS Selector priority
important Style ID
Pseudo-
Class,
attribute
,Class
Pseudo-
Elements
,Tag
#head
.link
a:hover{c
olor:#f00
;}
0 1 1+1 1
୍ᄅರྒ௹ರ
Slide 34
Slide 34 text
Multiple Class Names
୍ᄅರྒ௹ರ
Slide 35
Slide 35 text
Multiple Class Names
.classA.classB{color:#f00;}
Used for Module Design
୍ᄅರྒ௹ರ
Slide 36
Slide 36 text
CSS Hacks
୍ᄅರྒ௹ರ
Slide 37
Slide 37 text
Your CSS Hacks?
୍ᄅರྒ௹ರ
Slide 38
Slide 38 text
CSS Hacks
Hack as less as you can
Web standard First, Acid3 Test
Hack for IE, then IE6
Only use one hack method
୍ᄅರྒ௹ರ
Slide 39
Slide 39 text
IE Hacks
#head{
height:30px;
*height:33px;/* hack ie */
+height:32px;/* hack ie7 */
_height:30px;/* hack ie6 */
}
୍ᄅರྒ௹ರ
Slide 40
Slide 40 text
Browscap: No CSS Hack
Have a look at
Yahoo.com
source code
.ua-ie6 #head{height:30px;}
.ua-ie7 #head{height:32px;}
.ua-ff3 #head{height:33px;}
୍ᄅರྒ௹ರ
Slide 41
Slide 41 text
IE Haslayout
୍ᄅರྒ௹ರ
Slide 42
Slide 42 text
IE Haslayout
Haslayout is a part of IE CSS Render
Engine
haslayout=-1, such as
body,html,tqble,img,input,iframe,embe
d,hr,marquee(not include div)
Detail...
୍ᄅರྒ௹ರ
Slide 43
Slide 43 text
Activate Haslayout
zoom:1
position:relative
overflow:hidden
_height:1%
+min-height:0
୍ᄅರྒ௹ರ
Slide 44
Slide 44 text
CSS Debug
୍ᄅರྒ௹ರ
Slide 45
Slide 45 text
How to debug CSS style
Firebug Layout & Style panel
CSS border trick
CTRL+F5 force renew cache
୍ᄅರྒ௹ರ
Slide 46
Slide 46 text
CSS Specification
୍ᄅರྒ௹ರ
Slide 47
Slide 47 text
CSS Specification
Separate words by a single dash, e.g.
span.btn-ok-disabled
Use a meaningful prefix and don’t add
new one, e.g. .fn-, .ft-, .ico-, .btn-, .com-
Use Class selector instead of ID selector
No inline styles in HTML tags
୍ᄅರྒ௹ರ
Slide 48
Slide 48 text
CSS Tricks
୍ᄅರྒ௹ರ
Slide 49
Slide 49 text
Fonts settle multi-language align
problem: SimsunaTahoma
Tag ‘A’ without ‘href’ property cause
‘:hover’ style lapse
‘IE 1px bug’ fixed by ‘overflow:hidden’
Force word not wrap compatible with
IE6,7,FF3đwhite-space:nowrap
CSS files save as no BOM uft-8 format,
୍ᄅರྒ௹ರ
Slide 50
Slide 50 text
CSS comment avoid ‘/******/’
‘caption’ set ‘padding’ instead of
‘margin’ in IE
‘overflow:auto’ element declare
‘position:relative’ to fix its child elements
‘ position bug
No block element in inline element
More...
୍ᄅರྒ௹ರ
Slide 51
Slide 51 text
catge.blogbus.com
Thanks for reading
୍ᄅರྒ௹ರ