Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
2,35 MB
Nội dung
If the name of the font family has more than one word, enclose it in quotes. Here are
some examples of CSS rules using
font-family:
body { font-family: Arial, sans-serif; }
h1 { font-family: “Courier New”, monospace; }
h2 { font-family: “Times New Roman”, serif; }
You’ll learn more about font families and how to use them in Hour 8.
A Simple Style Sheet
Using just the simple properties and values you’ve learned so far this hour, you already can
create a basic style sheet; an example of a complete style sheet is shown in Listing 2.1.
LISTING 2.1 A Basic Style Sheet with Color, Size, and Font Declarations
/* basic-2.1.css */
/* Written by Kynn Bartlett <kynn@kynn.com> */
body { font-family: Arial;
color: black;
background-color: white; }
/* I think Verdana looks nice for headlines */
h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif; }
/* This puts the second level heading in red */
h2 { color: red; }
address { font-family: Verdana, sans-serif;
font-size: smaller; }
You can find a copy of this style sheet on the Web at
http://CSSin24hours.com/02/basic-2.1.css.
Linking a Style Sheet to an HTML Page
A style sheet by itself doesn’t really do anything except sit there on your hard drive or
Web server. If you try to load it in your browser, it will just display as plain text. To actu-
ally use the CSS rules, you need to have a file with markup, such as an HTML page, and
you need to add an HTML tag to link the CSS file to the Web page.
A Simple HTML Page for Styling
Listing 2.2 shows the structure of a basic HTML page like one you might find on the
Web; it has headlines, paragraphs, horizontal rules, and even a little table on the side. You
32 Hour 2
05 0672324091 ch02 6/13/02 10:39 AM Page 32
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
can download a copy of this file from http://CSSin24hours.com/02/basic-2.2.html
because that’s easier than typing in the whole thing.
LISTING 2.2 A Simple HTML File That Needs Styling
<! basic-2.2.html >
<html>
<head>
<title>
Review - The Lord of the Rings: Fellowship of the Ring
</title>
</head>
<body>
<h1>Movie Review</h1>
<table border=”1” align=”right”>
<tr> <th colspan=”2”>Rating Scale</th> </tr>
<tr> <td>One *</td> <td>Not recommended</td> </tr>
<tr> <td>Two **</td> <td>Mediocre</td> </tr>
<tr> <td>Three ***</td> <td>Above Average</td> </tr>
<tr> <td>Four ****</td> <td>Highly Recommended</td></tr>
<tr> <td>Five *****</td> <td>A Must-See!</td> </tr>
</table>
<h2>
The Lord of the Rings:
<br>
Fellowship of the Ring
</h2>
<h3>Rating: Four ****</h3>
<p>
This movie perfectly captures the feelings of reading
<cite>The Lord of the Rings</cite> books by J.R.R. Tolkien
— large, impressive, fantastic, and mythic, but also
large, ponderous, slow, and meandering.
</p>
<p>
Now, I like the original books as much as any other
Science-fiction and fantasy fan, despite getting only
halfway through the second of three books before giving
up. Nevertheless, I gaped in awe at the majestic
landscapes of Middle Earth depicted on the big screen rather
than only in my imagination. I saw elves, hobbits, wizards,
dwarves, orcs, and even a few humans come to life, and it
all <em>felt right</em> — but it also felt very long,
nearly 3 hours in length, even with the plot pared
down for the movie.
Getting Started with CSS 33
2
continues
05 0672324091 ch02 6/13/02 10:39 AM Page 33
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
</p>
<p>
Some story points were inexplicably confusing; bit
characters wander off and onto the screen, and none ever
stop to really explain what the big deal is about the
ring. If I hadn’t read the first book already, I might
have been scratching my head in confusion. But
ultimately, <cite>Fellowship of the Ring</cite> is a treat
designed especially for anyone who loves Tolkien’s epic
work of mythic fantasy; it’s a faithful, if exhausting,
adaptation of this 20th-century classic.
</p>
<hr>
<address>
Reviewed by
<a href=”mailto:kynn@kynn.com”>Kynn Bartlett</a>
</address>
</body>
</html>
As seen in the screenshot in Figure 2.3, this displays as a rather plain page without CSS.
This is our “before” picture.
34 Hour 2
FIGURE 2.3
Internet Explorer 5’s
default rendering of
basic-2.2.html.
LISTING 2.2 Continued
05 0672324091 ch02 12/3/02 12:14 PM Page 34
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Getting Started with CSS 35
2
Linked Style Sheets in HTML
To apply the style sheet to our HTML page, we’ll need to tell the browser which style
sheet to use. We do this by using the <link> element of HTML, and we’ll use the
basic-2.1.css file from Listing 2.1.
The
<link> tag can appear only within the <head> section of our HTML page. To link
the style sheet, I open the HTML file and add the following line (shown in bold):
<head>
<title>
Review - The Lord of the Rings: Fellowship of the Ring
</title>
<link type=”text/css” rel=”stylesheet” href=”basic-2.1.css”>
</head>
The effect of applying the style sheet can be seen in Figure 2.4; compare this with
Figure 2.1 to see the difference some styles make.
FIGURE 2.4
Styles change the
appearance of the
plain HTML page.
Adding More Styles
If we want to add more to our page, we can just fire up the text editor and change the
CSS file. Alternately, we could create a different style sheet and change the <link> tag’s
href attribute.
Listing 2.3 shows a longer style sheet, and Figure 2.4 is our “after” shot, applying the new
style sheet (which can be downloaded from
http://CSSin24hours/02/basic-2.3.css).
05 0672324091 ch02 12/3/02 12:14 PM Page 35
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
LISTING 2.3 More Styles to Make Our HTML Page Interesting
/* basic-2.3.css */
/* Written by Kynn Bartlett <kynn@kynn.com> */
body { font-family: Arial;
color: navy;
background-color: white; }
h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif; }
h1 { color: maroon; }
h2 { color: red; }
h3 { color: green; }
p { color: black; }
th, td { font-size: smaller; }
th { color: navy;
font-family: Verdana, sans-serif; }
td { color: green;
font-family: Times, sans-serif; }
em { color: red; }
cite { color: teal; }
address { font-family: Verdana, sans-serif;
font-size: smaller; }
a { color: fuchsia; }
36 Hour 2
FIGURE 2.5
A few simple
CSS rules spice
up the appearance
of the page.
05 0672324091 ch02 12/3/02 12:14 PM Page 36
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Viewing Your Style Sheet
Once you’ve created a style sheet, you’ll want to take a look at it to ensure that it works.
Uneven browser support for CSS means that it’s important to check how it appears in
various browsers, as well as to make sure you got the syntax correct.
To view the style sheet, simply view the HTML file that links to your CSS file. Don’t try
viewing the CSS file directly; it will just look like source code in many browsers. The
way to know if it worked is to look at the HTML page that’s being styled.
Recommended Browsers
You’ll want to verify your style sheet in at least the major browsers because they repre-
sent the greatest number of users who may access your page. You’ll also want to test in
browsers that have good support for the CSS standard. Browsers can vary between oper-
ating systems; Internet Explorer on Microsoft Windows handles CSS quite differently
from Internet Explorer on a Macintosh.
Naturally, it’s difficult for one person to have access to every different browser combination
available, but the more you’re able to use, the better your results will be. I recommend a
standard testing suite consisting of four browsers:
•Internet Explorer (5.0, 5.5, or 6.0 on Windows; 5.0 or 5.1 on Macintosh)
• Netscape (4.7 or higher; Windows, Macintosh, or Linux)
• Mozilla (0.9 or higher; Windows, Macintosh, or Linux) or Opera (5.0 or 6.0;
Windows, Macintosh, or Linux)
•Lynx (2.7 or higher; Windows, Macintosh, or Linux)
These browsers represent a good cross-section for testing, and are generally widely avail-
able on most popular operating systems. In Hour 3 and Hour 18, “Web Design with
CSS,” you’ll learn more about testing strategies.
Summary
In this hour, you learned about using text editors and specialized software to create and
edit style sheets, which are just ordinary text files of CSS rules. You learned the general
structure of a CSS rule and its component parts, including the selector, the declaration,
the property name, and the property value. You learned how and why to include com-
ments in your CSS files. You got to see a few simple styles change an HTML page, set-
ting the text color, size, and font, and you learned how the HTML <link> tag associates
a style sheet with a Web page. Finally, you learned how to display your page in your
browser and see your CSSin action.
Getting Started with CSS 37
2
05 0672324091 ch02 6/13/02 10:40 AM Page 37
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Q&A
Q I’m not sure what the “RGB” values used for colors are. Can you explain?
A Sure! RGB triples are one of the most common ways to specify color on the Web,
in both HTML and CSS. RGB stands for Red-Green-Blue and is a standard way
for specifying a color as a composite of three values: the amount of red, the
amount of green, and the amount of blue. In HTML and CSS these are written in
hexadecimal numbers (base 16), which start with 0, go up to 9, and then continue
on to A, B, C, D, E, and F. If you don’t know how to use RGB hexadecimal values,
you can use the
rgb() function to specify colors, like this:
h1 { color: rgb(100%, 50%, 25%); }
Q Can I set the font-size to a specific value, such as 12 point?
A Yes, you can; 12 point is written as
12pt (no space). This is what’s known as an
absolute font size, though, and it can cause problems for users who need to adjust
their preferences to account for visual impairments. For now I recommend sticking
with the relative values given earlier in this hour, like larger and x-small,but if
you want you can read ahead to Hour 8 for more font size units.
Workshop
The workshop contains quiz questions and activities to help reinforce what you’ve
learned in this hour. If you get stuck, the answers to the quiz can be found after the
questions.
Quiz
1. What kind of software is needed to create a CSS file?
2. What is the name of the part of a CSS rule that goes within the curly braces?
(a.) The selector
(b.) The declaration
(c.) The property name
(d.) The property value
3. You want to make all of your HTML headings (
<h1>,and so on) blue and in Arial
font. What CSS rule(s) do you write?
38 Hour 2
05 0672324091 ch02 6/13/02 10:40 AM Page 38
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Answers
1. Because CSS files are just ordinary text files, anything that can create or edit text
files can make a style sheet. This includes text editors, style sheet editors, Web
development tools, and word processors. The important thing is to save the files as
plain text, usually with a .css file extension suffix.
2. The declaration, which consists of the one or more pairs of property names and
values, is the part of the CSS rule between curly braces.
3. Here’s the easiest way to make headings blue and Arial:
h1, h2, h3, h4, h5, h6
{
color: blue;
font-family: Arial;
}
You could also write this as several rules—as many as 12—but this combined form
is the easiest way to do it.
Activity: Create Your First Style Sheet
Learning by doing is the key to understanding Cascading Style Sheets, and building your
own style sheet is the first step in the process. Follow these instructions to create and test
your own CSS:
1. Select an HTML page to style. This could be one you’ve created before, a brand
new one, or perhaps the
basic-2.2.html file used earlier this hour.
2. Create a new CSS file using the text editor of your choice. Using the style proper-
ties you learned this hour, add style rules to apply to your HTML page. Change the
color of the text, the background color, the font sizes, and the text font. Save this
file with a
.css extension.
3. Use the
<link> tag in your HTML to associate the style sheet with the HTML
page. Be sure the HTML and CSS files are in the same directory, or else the
browser might not be able to find the CSS file. (You can use full URL paths if you
want, but for now, it’s easiest to have HTML and CSSin the same location.)
4. Open your page in your primary Web browser and view the results of your work.
You may want to go back and tweak the CSS to see what effect additional styles
have; go right ahead!
5. If you have any of the other recommended browsers, try the page with those. You
probably won’t see much difference because the CSS properties introduced are rel-
atively safe and reasonably well supported.
Getting Started with CSS 39
2
05 0672324091 ch02 6/13/02 10:40 AM Page 39
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
05 0672324091 ch02 6/13/02 10:40 AM Page 40
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
HOUR
3
Browser Support for CSS
To be able to master the full power of Cascading Style Sheets, you need to
understand the biggest issue related to using CSS—browser support. No
other Web-related technology has been more limited by poor browser
implementation than Cascading Style Sheets. However, the situation con-
tinues to improve, as recent browsers are getting closer and closer to full
support for CSS.
In this hour, you’ll learn
• What the browser problem is and why it’s a problem
•The general categories of browsers and how each type affects your
CSS Web designs
•The essential need for workarounds and how to measure the cost of
failure
•How the current browsers use Cascading Style Sheets
•How to read the Browser Support Report Card found in each subse-
quent hour of this book
06 0672324091 ch03 6/13/02 10:36 AM Page 41
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... to HTML, so you’ll get the same styling effects if you use linked, embedded, or inline style rules Linked Style Sheets In Hour 2, “Getting Started with CSS, ” you learned about how to create external style sheets and link them with the element in HTML Linking style sheets in this manner gives you the greatest portability and ease of maintenance when designing your styles for your Web site 4 66... http://www.microsoft.com/windows/ie/default.asp The css/ edge spiral as displayed by Internet Explorer 6 for Windows is shown in Figure 3.2 FIGURE 3.2 Internet Explorer 6 (Windows) displays the css/ edge spiral Browser Support for CSS 49 IE 5 and 5.1 for Macintosh As mentioned before, Internet Explorer for Macintosh should be considered a completely different species of browser than its Windows cousin Internet Explorer... font-size property A The font-family property A Combining selectors A Combining declarations A The tag in HTML Notes A How to Read the Grades As you can see, all of the CSS features on this report card, which were introduced in Hour 2, “Getting Started with CSS, ” get a grade of A (This was intentional; I didn’t want to introduce problematic CSS until you’d learned more about the browsers, so... archive 2 Install the browser and fire it up for surfing the Web 3 Visit several Web sites that use CSS, including Eric Meyer’s css/ edge spiral and the site for this book, http://www.CSSin24hours.com 4 How does your experience using these browsers differ from your experience using your normal browser-of-choice? Note whether the CSS support is better or worse, and rank the browser you’re using as “older,”... your pages by applying them as linked style sheets The content-type attribute of the tag indicates the styling language of the linked style sheet For Cascading Style Sheets—Level 1 and Level 2 alike—this should be "text /css" This is also the MIME type that your server should return when serving up CSS files All modern Web servers will recognize the file extension .css as being a CSS file and will... was far ahead of the Windows counterpart Version 5.1 continued this strong support for CSS and other standards The Web site for Internet Explorer for Mac is http://www.microsoft.com/ mac/products/ie/ You can see the css/ edge spiral displayed as it’s meant be shown in Figure 3.3 FIGURE 3.3 The css/ edge spiral in Internet Explorer 5.1 for Macintosh Older Versions of Internet Explorer Internet Explorer 3... “compliant.” 3 HOUR 4 Using CSS with HTML In previous hours, you’ve used Cascading Style Sheets to style your HTML pages by linking in an external CSS file The true power of CSS and HTML really shines through only when you understand both of these complementary languages, how they relate to each other, and how they can be used effectively HTML and CSS blend together well not by coincidence but by design;... know their stuff! Since version 3, Opera has consistently had great CSS support, improving incrementally with each release Opera 6 Opera 6 is the current version available for Windows, and I highly recommend getting a copy if you’re a Windows user In addition to the CSS support, it also features one-click buttons to turn off and on CSS rendering, user style sheets, and more, which combine to make this... or printers In Hour 21, “Accessibility and Internationalization,” and Hour 22, “User Interface and Generated Content,” you’ll learn more about designing for alternate output devices As seen in Hour 2, linked style sheets are created by using the HTML element in the section of the page A number of attributes can be used with the element, but for our purposes only the following options... the buggy CSS implementation in Internet Explorer 3 really isn’t a factor in current CSS usage The current front-runner in broken browsers—causing the most headaches for CSS developers around the world—is Netscape 4 Unlike Netscape 3, Netscape 4 does indeed attempt to support Cascading Style Sheets but fails miserably in many ways For example, Netscape 4 doesn’t understand many of the key CSS properties . Macintosh, or Linux)
• Mozilla (0.9 or higher; Windows, Macintosh, or Linux) or Opera (5.0 or 6.0;
Windows, Macintosh, or Linux)
•Lynx (2.7 or higher; Windows,. from http://CSSin24hours.com/02/basic-2.2.html
because that’s easier than typing in the whole thing.
LISTING 2.2 A Simple HTML File That Needs Styling
<!