Where can CSS Styles be Defined?
To embed a style sheet in a web page, we place a style element in the head of
the document’s HTML and fill it with style rules, as shown here in bold:
<!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">
<head>
<title>CSS Style Sheet Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1, h2 {
color: green;
}
h3 {
color: blue;
}
</style>
</head>
The CSS rules contained in the style block apply to all the designated parts of
the current document. In this case, the first rule directs the browser to display
all level one and two headings (h1, h2) in green. The second rule displays all
level three headings (h3) in blue.
Notice that each rule starts on a new line, and each declaration within the rule
appears indented within braces on its own line. Strictly speaking, this layout isn’t
required, but it’s a good rule of thumb that improves the readability of your code,
especially if you’re used to the look of JavaScript code.
External CSS
Finally, you can define CSS rules in a file that’s completely separate from the
web page. You can link to this file by including a link element in the head of
any web page on which you want to implement those styles.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Style Sheet Demo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="corpstyle.css" />
</head>
13
Licensed to siowchen@darke.biz
Chapter 1: Getting the Lay of the Land
In this example, the file corpstyle.css contains a set of styles that have been
linked to this page. Here’s what the contents of this file might look like:
File: corpstyle.css
h1, h2 {
color: green;
}
h3 {
color: blue;
}
This is my preferred way to use CSS, for a number of reasons.
First, this is the least “locked-in” of the three basic methods designers can use to
insert styles into a web page. If you define an external style sheet file, you can
apply it to as many pages of your site as you want, simply by linking to the style
sheet from each page on which you want it used. Using external CSS also makes
your site a lot easier to maintain: changing the appearance of an element that
appears on every page of your site is a simple matter of modifying the shared
.css file. If you use embedded or—worse yet—inline styles, you’ll have to change
every single page on which the element appears.
Second, external style sheets are treated as separate files by the browser. When
the browser navigates to a new page that uses the same style sheet as a previous
page, that external style sheet will not be downloaded again. Therefore, pages
that use external styles are quicker to load.
Last, but not least, external style sheets are simply more professional. By using
them, you demonstrate an understanding of the importance of the separation of
content from presentation, and you make it much easier to discuss your style
sheets, share them with colleagues, analyze their effects, and work with them as
if they were a serious part of the site’s design, rather than an afterthought.
A Simple Example
Now that you have a basic overview of what CSS is all about, why it exists, and
why it’s an important technique for web designers to adopt, where’s the proof?
Let’s look at an example of a small but not overly simplistic web page (see Fig-
ure 1.4).
14
Licensed to siowchen@darke.biz
A Simple Example
Figure 1.4. A sample web page demonstrating embedded styles
Here’s the HTML that will produce that page if we use embedded CSS. Don’t
let the complexity of the code intimidate you—by the end of Chapter 3 you
should be able to infer the meaning of most of it without my help. For now, you
can download the code archive from the book’s web site and marvel at the results
in your browser. The file is called ch1sample.html.
File: ch1sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic 3-Column Sample Page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: teal;
margin: 20px;
padding: 0;
font-size: 1.1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
15
Licensed to siowchen@darke.biz
Chapter 1: Getting the Lay of the Land
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 0 15px 0;
padding: 0;
color: #888;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0;
padding: 0;
font-size: 1.1em;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.1em;
margin: 0 0 16px 0;
padding: 0;
}
.content>p {
margin: 0;
}
.content>p+p {
text-indent: 30px;
}
a {
color: teal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 600;
}
a:link {
color: teal;
}
a:visited {
color: teal;
}
a:hover {
background-color: #bbb;
}
/* All the content boxes belong to the content class. */
.content {
position: relative;
width: auto;
min-width: 120px;
margin: 0 210px 20px 170px;
border: 1px solid black;
background-color: white;
padding: 10px;
16
Licensed to siowchen@darke.biz
A Simple Example
z-index: 3;
}
#navleft {
position: absolute;
width: 128px;
top: 20px;
left: 20px;
font-size: 0.9em;
border: 1px dashed black;
background-color: white;
padding: 10px;
z-index: 2;
}
#navleft ul {
list-style: none;
margin: 0;
padding: 0;
}
#navright {
position: absolute;
width: 168px;
top: 20px;
right: 20px;
border: 1px dashed black;
background-color: #eee;
padding: 10px;
z-index: 1;
}
</style>
</head>
<body>
<div class="content">
<h1>Getting the Lay of the Land</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat?</p>
</div>
<div class="content">
<h2>CSS in Context</h2>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur
aut odit aut fugit, sed quia consequuntur magni
17
Licensed to siowchen@darke.biz
Chapter 1: Getting the Lay of the Land
dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem.</p>
</div>
<div class="content">
<h2>Keep Adding Content</h2>
<p>You can see that as you keep adding content to this page,
it adds nicely boxed and centered material down the
center of the page.</p>
</div>
<div id="navleft">
<h2>Some Links</h2>
<ul>
<li><a href="http://www.rachelandrew.co.uk/"
title="Rachel Andrew's personal site">Rachel
Andrew</a></li>
<li><a href="http://www.sitepoint.com/"
title="SitePoint Home Base">SitePoint Home</a></li>
<li><a href="http://www.sitepoint.com/forums"
title="SitePoint Discussion Forums">SitePoint
Forums</a></li>
<li><a href="http://www.mozilla.org/firefox"
title="Firefox at The Mozilla Foundation">Firefox</a>
</li>
<li><a href="http://www.microsoft.com/ie"
title="Internet Explorer at Microsoft's Site">Internet
Explorer</a>
<li><a href="http://www.opera.com/"
title="Opera Home Page">Opera</a></li>
<li><a href="http://www.apple.com/safari"
title="Safari on Apple's Web Site">Safari</a></li>
</ul>
</div>
<div id="navright">
<h2>Why CSS is Better</h2>
<p>At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias excepturi
sint occaecati cupiditate non provident.</p>
</div>
</body>
</html>
18
Licensed to siowchen@darke.biz
Summary
Summary
You should now understand the historical and technological contexts in which
CSS has emerged, the major problems it is designed to solve, and how it works
on a superficial level. You also know why tables aren’t suited to being used as a
web page layout device, even though they have other perfectly valid uses.
In addition, you can identify both the parts of a CSS rule, and at least three ways
in which these rules can be applied to your web pages.
Chapter 2 drills more deeply into the prospective issues surrounding CSS. It
clears up some of the misconceptions you may have about this technology, and
describes some of the important issues you’ll have to take into consideration be-
cause of the way web browsers work (or don’t) with CSS rules.
19
Licensed to siowchen@darke.biz
20
Licensed to siowchen@darke.biz
2
Putting CSS into Perspective
In Chapter 1, we took a 10,000-foot view of CSS. We began by looking at why
using tables for web page layout is generally a bad idea. Then, we examined the
types of CSS rules, and which aspects of a web page our style sheets could affect.
This chapter provides an overview of CSS’s place in the web development cosmos.
First, we’ll discuss what CSS can and can’t do for you. We’ll spend a little time
examining the advantages of CSS design, and see how using CSS can help you
to create better sites by doing things that old-style tables and spacer GIFs can’t
do.
After a quick look at how CSS interacts with the ever-shifting world of web
browsers, we’ll discover how we can create CSS that accommodates those browsers
that don’t provide full support for CSS standards, either because they predate
the standard, or they tried to support the standard but got it wrong.
What can CSS Do?
Recall from Chapter 1 that one of the key advantages of CSS is that it separates
the content of a web site from its appearance or presentation. This separation is im-
portant because it allows us to create web sites that enable writers to create the
information the web site is intended to convey, while leaving the design of the
site—how it looks and how it behaves—to designers and programmers.
Licensed to siowchen@darke.biz
Chapter 2: Putting CSS into Perspective
It follows, then, that CSS would be useful for defining the appearance of a site,
but not necessarily for dictating its behavior.
However, like many such generalizations, this statement is true only most of the
time. Why? Because the dividing line between appearance and behavior is neces-
sarily fuzzy.
For example, as we’ll see when we develop our layouts in the second part of this
book, CSS can be used effectively to create context-sensitive menus, along with
other elements of the interface with which your users will interact. You may be
familiar with menu designs whose interactivity relies heavily on JavaScript, or
some other scripting language, but we’ll learn some techniques that avoid scripting,
while allowing us to do some fairly creative things with navigation.
Later on, this book provides detailed instructions and examples of how you can
alter the appearance of colors, fonts, text, and graphics using CSS; the rest of
this section provides some ideas about the kinds of tasks for which you can use
CSS. My intention here is less to teach you how to do these things than it is to
whet your appetite and start you thinking about the possibilities …
Color and CSS
You can use style sheet rules to control the color of any HTML element that can
be displayed in color. The most common elements for which you’ll find yourself
setting the color are:
❑
text
❑
headings (which are really a special form of text)
❑
page backgrounds
❑
background colors of text and headings
This may not seem like much, but knowing when and how to apply color to these
elements—and, perhaps more importantly, how to combine the use of color in
interconnected elements—can really expand your web design capabilities.
22
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét