XHTML Structure
DOCTYPE declarations:
Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"Transitional:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"Frameset:
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XML namespace declaration:
<html xmlns=http://www.w3.org/1999/xhtml lang="en" xml:lang="en">Content type declaration:
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />Symbols such as <, &:
http://htmlhelp.com/reference/html40/entities/A simple template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=http://www.w3.org/1999/xhtml lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Title for your Web page</title>
</head>
<body>
</body></html>
Four ways of CSS declaration:
- embed <style></style> section in the head element
- link to external CSS file: <link href="mystylesheetprint.css" media="screen" rel="stylesheet" type="text/css">, for print, just change media="print"
- in-line style, just specify at each tag, e.g. <p style="font-size: 25pt; color: red;">
- use @import in <style></style> section in the head element. The only downside is that IE6 might have so called FOUC (Flash of Un-styled Content) problem, meaning the content will be momentarily displayed without CSS formatting. See more at http://bluerobot.com/web/css/fouc.asp
CSS syntax-related stuff:
Contextual selector:
this limits style to parent element, e.g. p em{color:green;} makes only those <em> within <p> elements green color.Class selector:
e.g. p.green{color:green;} <p class="green">green text</p>, note that if multiple classes exist, the last one declared in CSS definition file wins.Id selector:
p#green{color:green;} <p id="green">green text</p>Difference between id and class selector is that one id value is unique to one element and id is usually used in javascript as well. So, for those styles unique to an element, use id, for styles that can be shared among different elements, use class selector.
Attribute selector:
select element based on attribute existence or values, e.g. this example add a pdf icon after links to pdf files, use [href|="foo"] to specify link names that start with "foo"a[href$=".pdf"] {
background:transparent url(images/iconpdf.gif) no-repeat scroll right center;
padding-right:18px;
}
No comments:
Post a Comment