Thông tin tài liệu
Figure 7-36
2. Take a look at the following XHTML page:
<?xml version=”1.0” encoding=”iso-8859-1”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
<head>
<title>Font test</title>
<link rel=”stylesheet” type=”text/css” href=”tableStyles.css” />
</head>
<body>
<table>
<tr>
<th>Quantity</th>
<th>Ingredient</th>
</tr>
<tr class=”odd”>
<td>3</td>
<td>Eggs</td>
</tr>
<tr>
<td>100ml</td>
<td>Milk</td>
</tr>
271
Chapter 7: Cascading Style Sheets
59313c07.qxd:WroxPro 3/24/08 11:40 PM Page 271
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<tr class=”odd”>
<td>200g</td>
<td>Spinach</td>
</tr>
<tr>
<td>1 pinch</td>
<td>Cinnamon</td>
</tr>
</table>
</body>
</html>
Now create the tableStyles.css style sheet that makes this example look like it does in
Figure 7-37.
Figure 7-37
Don’t worry about getting the sizes exactly the same as the screenshot, but do make sure you
have padding in the cells and a border around the outside. The white border is created by
default in IE and you find out how to remove this in Chapter 8.
272
Chapter 7: Cascading Style Sheets
59313c07.qxd:WroxPro 3/24/08 11:40 PM Page 272
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
8
More Cascading
Style Sheets
In this chapter, you learn more about working with CSS. You will start by working through many
of the remaining properties from the CSS specifications that allow you to control presentation of
links, backgrounds, list styles, table styles, and outlines around boxes (the last of which are different
from borders). You then learn about the
:before and :after pseudo-classes that allow you to add
content that was not in the source document that you are styling before or after a specified element.
Finally, you will see how CSS can be used to position boxes on the page — and therefore how they
can be used to create layouts instead of using tables.
By the end of the chapter, you will know more about how to use CSS to control the following:
❑ Presentation of links
❑ Backgrounds of document
❑ Styles of bullet points and numbered lists
❑ Appearance of tables
❑ Outlines around boxes
❑ Boxes that can gain focus or are active
❑ Addition of content to the XHTML document before or after an element
❑ The three positioning schemes that allow you to determine where on a page a box will
appear — something that prepares you to use CSS to create layouts
Some of the features you learn about in this chapter are not yet widely supported in browsers.
They are, however, worth learning about so that you are aware of the direction in which CSS
is going.
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 273
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Links
You have already seen that the color property can change the color of the text inside any element, and
web designers commonly use this property in rules that apply to
<a> elements in order to change the
colors of links. When you do this, however, the link will always be that one color — even the links that
you have visited, are hovering over, or are clicking on.
The ability to change slightly the color of links you have visited can help users navigate your site, and
changing the color when someone hovers over a link can encourage the user to click it. So, when you
create a rule that changes the color of links, the pseudo-classes listed in the table that follows can help dif-
ferentiate styles associated with links in different states.
The following are properties you will likely use with these pseudo-classes:
❑
color: Often used to change the colors of the links. As mentioned, it is helpful to differentiate
slightly between different links that have already been visited and those not yet visited, as this
helps users see where they’ve been. Furthermore, changing the color slightly when a user hovers
over a link can help encourage clicking on the link.
❑
text-decoration: Often used to control whether the link is underlined or not. Links always
used to be underlined on the Web, although since the late 1990s it has been more popular not to
underline links. Using the
text-decoration property, you can specify that your links should
not be underlined, and you can even set them to be underlined only when the user hovers over
the link or selects it.
❑
background-color: Highlights the link, as if it had been highlighted with a highlighter pen. It
is most commonly used when the user hovers over a link, just offering a slight change in color.
Here is an example that will change the styles of links as users interact with them (
ch08_eg01.css):
body {background-color:#ffffff;}
a {
font-family: arial, verdana, sans-serif;
font-size:12px;
font-weight:bold;}
a:link {
color:#0000ff;
text-decoration:none;}
a:visited {
color:#333399;
Pseudo-class Purpose
link
Styles for links in general
visited
Styles for links that have already been visited
active
Styles for links that are currently active (being clicked)
hover
Styles for when someone is hovering over a link
274
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 274
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
text-decoration:none;}
a:active {
color:#0033ff;
text-decoration:underline;}
a:link:hover {
background-color:#e9e9e9;
text-decoration:underline;}
Figure 8-1 gives you an idea of how this style sheet will look with (ch08_eg01.html), although it is
rather hard to see the full effect of this in print, with the links changing as the user rolls the mouse over
links and visits the sites, so try the example out with the downloaded code for this chapter.
Figure 8-1
There are also two pseudo-classes called
:focus and :active that alter the style of an element as it
gains focus or becomes active. You learn about these pseudo-classes later in the chapter.
Backgrounds
The table that follows lists the six properties in CSS that allow you to specify how the background of
either the whole browser window or any individual box should appear.
Continued
Property Purpose
background-color
Specifies a color that should be used for the background of the
page or box
background-image
Sets an image to be in the background of a page or box
background-repeat
Indicates whether the background image should be repeated across
the page or box
275
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 275
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
You might be interested to note that the shorthand background property is better supported in older ver-
sions of some browsers than the individual properties, but you need to learn what values the properties
can take before going on to use the shorthand.
The background-color Property
The background-color property allows you to specify a single solid color for the background of your
pages and the inside of any box created by CSS.
The value of this property can be a hex code, a color name, or an RGB value (colors are covered in
greater depth in Appendix D). For example (
ch08_eg02.css):
body {background-color:#cccccc; color:#000000;}
b {background-color:#FF0000; color:#FFFFFF;}
p {background-color: rgb(255,255,255);}
When the background-color property is set for the <body> element, it affects the whole document,
and when it is used on any other element it will use the specified color inside the border of the box cre-
ated for that element. Figure 8-2 shows the preceding styles used with (
ch08_eg02.html):
Figure 8-2
I add a rule for the
<body> element to set the background-color property for nearly every style
sheet I write, for the simple reason that some people set their computers to have a background other than
plain white (often because it causes less strain on their eyes). When the background color of an operat-
ing system is changed, the background color of the web browser is usually that color (as are applications
such as word processors). If you do not specify this property, you cannot guarantee that the visitor to
the site has the same background color as you.
Property Purpose
background-attachment
Indicates a background image should be fixed in one position on
the page, and whether it should stay in that position when the user
scrolls down the page or not
background-position
Indicates where an image should be positioned in either the window
or the containing box
background
A shorthand form that allows you to specify all of these properties
276
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 276
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The background-image Property
As its name suggests, the background-image property allows you to add an image to the background
of any box in CSS, and its effect can be quite powerful. The value it takes is as follows, starting with the
letters
url, and then holding the URL for the image in brackets and quotes:
body {background-image: url(“images/background.gif);” }
The background-image property overrides the background-color property. It is good practice, how-
ever, to supply a
background-color property with a value that is similar to the main color in the image
even when you want to use a background image, because the page will use this color while the page is
loading or if it cannot load the image for any reason.
Here is an example of using a single background image which is 200 pixels wide and 150 pixels high.
By default, this image is repeated all across the page (ch08_eg03.css). The background-color
prop
erty is set to be the same color as the background of the image (just in case the image cannot be
loaded):
body {
background-image: url(“images/background.gif”);
background-color: #cccccc;}
Figure 8-3 shows what this looks like in a browser (ch08_eg03.html).
Figure 8-3
This is not a great example of a background image, but it makes an important point. The problem is that
there is not enough contrast between the colors used in the background image and the text that appears
on top of it, which makes the text harder to read.
You must make sure that there is sufficient contrast between any background image and the writing that
appears on top of it; otherwise, users will have trouble reading the text. Furthermore, low-contrast images
(images that are made up of similar colors) often make better backgrounds because it is harder to find a
color that will be readable on top of a high-contrast image.
Figure 8-4 shows an improved example of the background image, where the text is on a solid color,
which makes it easier to read. This time I have also used a larger image (
ch08_eg03b.html).
277
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 277
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 8-4
You should note that there is no way to express the intended width and height of a background image,
and it is not able to have an
alt attribute (alternate text for those not able to see the image for any reason);
therefore, a background image should never be used to convey any important information because it is not
accessible to those unable to see the image.
You should also be wary of using large files as background images because they can be slow to load.
The
larger the file size of the image, the longer it takes to load and render.
The background-image property works well with most block-level elements, although some older
browsers can have problems showing background images in tables.
The background-repeat Property
By default, the background-image property repeats across the whole page, creating what is affection-
ately known as wallpaper. The wallpaper is made up of one image that is repeated over and over again,
and which (if the image is designed well) you will not see the edges of. Therefore, it is important that
any patterns should tessellate, or fit together, well. Wallpaper is often made up of textures such as paper,
marble, or abstract surfaces, rather than photos or logos.
If you do not want your image to repeat all over the background of the page, you should use the
background-repeat property, which has four helpful values, as you can see in the table that
follows.
278
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 278
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
These different properties can have interesting effects. It is worth looking at each in turn. You have already
seen the effect of the repeat value, so the next one to look at is repeat-x, which creates a horizontal
bar following the browser’s x-axis (
ch08_eg04.css):
body {
background-image: url(“images/background_small.gif”);
background-repeat: repeat-x;
background-color: #ffffff;}
You can see the result of using this property in Figure 8-5.
Figure 8-5
The
repeat-y value works just like repeat-x but in the other direction: vertically following the
browser’s y-axis (
ch08_eg05.css):
body {
background-image: url(“images/background_small.gif”);
background-repeat: repeat-y;
background-color: #ffffff;}
Value Purpose
repeat
This causes the image to repeat to cover the whole page.
repeat-x
The image will be repeated horizontally across the page (not down the whole
page vertically).
repeat-y
The image will be repeated vertically down the page (not across horizontally).
no-repeat
The image is displayed only once.
279
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 279
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
In Figure 8-6, you can see the result with the sidebar coming down the left.
Figure 8-6
The final value was
no-repeat, leaving one instance of the image that by default will be in the top-left
corner of the browser window (
ch08_eg06.css):
body {
background-image: url(“images/background_small.gif”);
background-repeat: no-repeat;
background-color: #eaeaea;}
You can see the result in Figure 8-7; note how the background color of the page has been set to the same
color as the image we have been using.
Figure 8-7
280
Chapter 8: More Cascading Style Sheets
59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 280
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... specified using a selector, and is with the :before and :after pseudo-elements The content property is then used with these pseudo-elements to specify what should be inserted into the document The :before and :after pseudo-elements work to a limited degree in Netscape 6 and later, and in IE7, and have good support in Firefox The :before and :after Pseudo-Elements The :before and :after pseudo-elements... text, a hand over a link, and so on) crosshair A crosshair or plus sign default Usually an arrow pointer A pointing hand (in IE 4, this value is hand) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Continued 301 59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 302 Chapter 8: More Cascading Style Sheets Value Description move A grasping hand (ideal if you are doing drag -and- drop... of text and therefore wraps to a second line should align with the first line or start underneath the start of the marker list-style-image Specifies an image for the marker rather than a bullet point or number list-style Serves as shorthand for the preceding properties marker-offset Specifies the distance between a marker and the text in the list Please purchase PDF Split-Merge on www.verypdf.com to... IE 5 and later supports table-header-group and table-footer-group ❑ Netscape 6 and Firefox support inline-table, table-row, table-column-group, table-column, table-row, and table-cell Outlines Outlines are similar to the borders that you met in the last chapter, but there are two crucial differences: ❑ An outline does not take up space ❑ Outlines do not have to be rectangular 294 Please purchase PDF. .. will be of particular use with the :focus and :active pseudo-classes, which are covered next, to indicate which element is currently active or has focus The :focus and :active Pseudo-Classes You may remember that in Chapter 5, the topic of focus came up An element needs to be able to gain focus if a user is going to interact with it; typically such elements are form controls and links When an element... Property (the shorthand) The list-style property is a way of expressing the other three properties at once They can appear in any order For example: ul {list-style: inside circle;} Remember that you can also set the border, padding, and margin properties for , , , , , and elements, as each element has its own box in CSS 286 Please purchase PDF Split-Merge on www.verypdf.com to remove... (section) “ “; } h2 {counter-increment: section; } Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 299 59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 300 Chapter 8: More Cascading Style Sheets Figure 8-22 Quotation Marks The values open-quote and close-quote can be used with the content property to add quote marks before and after occurrences of specified elements Unfortunately, these... should try them out and see how they work.) separate Separate rules are observed and different properties are available to further control appearance Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 289 59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 290 Chapter 8: More Cascading Style Sheets Here you can see two tables: the first has a border-collapse property with a value of collapse,... style sheet without even a space before it The value is held in quotes and should be one of the language codes specified in Appendix G @charset “iso-8859-1” The !important Rule As you know, part of the aim of CSS and the separation of style from content was to make documents more accessible to those with visual impairments So, after you have spent your valuable time learning about CSS and how to write... out your pages without the use of tables and even present information in a different order than it appeared in the XHTML document Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 305 59313c08.qxd:WroxPro 3/22/08 5:14 PM Page 306 Chapter 8: More Cascading Style Sheets In CSS2, there are three types of positioning to help control layout of a page: normal, float, and absolute . purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
8
More Cascading
Style Sheets
In this chapter, you learn more about working with CSS over
links and visits the sites, so try the example out with the downloaded code for this chapter.
Figure 8-1
There are also two pseudo-classes called
:focus and
Ngày đăng: 21/01/2014, 16:20
Xem thêm: Tài liệu Web Programming with HTML, XHTML, and CSS- P7 pdf, Tài liệu Web Programming with HTML, XHTML, and CSS- P7 pdf
