Friday, October 29, 2010

Notes for by Craig Grannell

1. CSS shorthand for boxes:



margin: 10px — applies to all edges
margin: 10px, 20px — 10px applies to the top and bottom edges; 20px applies to left and right edges
margin: 10px, 20px, 30px — 10px applies to the top, 20px to the left and right, 30px to the bottom
margin: 10px, 20px, 30px, 40px — clockwise order starting from the top (top, right, bottom, and left)



2. Applying styles to a Web page:



a) use a link tag:
[link rel=”stylesheet” type=”text/css” href=”mystylesheet.css” /]



b) use import:
[style type=”text/css”]
@import url(mystylesheet.css);
[/style]



c) embed styles in HTML document:
[head]
[style type=”text/css” media=”all”]
p{
color: black;
}



navigation p{



color: blue;
font-weight: bold;
font-size: 120%;
}
[/style]
[/head]



d) inline styles:
[p style=”color: red;”]This is painted in Red.[/p]



3. DOCTYPE declarations:



a) XHTML strict:
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”]



b) XHTML transitional: good for depreciated tags
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”]



c) XHTML frameset:
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”]



4. Go to top of a page:



a) [a id=”top” name=”top”][/a]
[a href=”#top”]Back to top[/a]



b) some browsers ignore empty elements, so we need to put a single
space in between; if we use XHTML Strict, we need to put elements into
a block element such as [p] or [div].
[div id=”topOfPageAnchor”]
[a id=”top” name=”top”] [/a][/div]



define CSS
div#topOfPageAnchor{
position: absolute;
top: 0;
left: 0;
height: 0;
}



c) use Javascript:
[div id=”topOfPageAnchor”]
[a id=”top” name=”top”] [/a][/div]



[a href=”#top” onclick=”javascript: scrollTo(0,0);”]Top of page[/a]



5. Attaching Javascript:



a) External
[script type=”text/javascript” src=”javascriptfile.js”][/script]



b) Internal
[script type=”text/javascript”] script content [/script]



6. Toggling div visibility with Javascript:



function swap(targetID){
if(document.getElementByID){
target = document.getElementById(targetId);
if(target.style.display == “none”){
target.style.display == “block”;
}else{
target.style.display == “none”;
}
}
}



[div][a href=”#” title=”show text” onclick=”swap(’hiddenDiv’);return false;”]show text[/a][/div]
[div id=”hiddenDiv” style=”display: none;”][p]hello[/p][/div]



7. pseudo-class selectors:



For anchors



a{color: #3366cc;}
a:link{color: #3366cc;}
a:visited{color:#777700;}
a:active{color:#cc00ff;}
a:hover{color:#0066ff;}



Useful resources:



CSS hacks for different Web browsers
W3C Markup Validation
W3C Link Checker
W3C CSS Validation
iCapture shows your page in Safari
CSS switcher demo

No comments:

Post a Comment