Tự học HTML và CSS trong 1 giờ - part 27 ppt

Here’s how it is used with hexadecimal color specifications: To use color names, just use the name of the color as the value to bgcolor: There are also attributes of the tag that can

Trang 1

Another is Adobe Kuler at http://kuler.adobe.com/ It makes it easy to create your own

color schemes and to browse and rate color schemes created by others It’s a great place

to find inspiration if you’re thinking about adding color to a site

Changing Colors Using CSS

There are two key properties when it comes to assigning colors to elements using CSS—

colorandbackground-color For elements with borders, you can also set the border

color using the border-colorproperty

To indicate that a paragraph should have white text on a black background, you could

use the following code:

<p style=“color: #fff, background-color: #000”>This paragraph has

white text on a black background.</p>

You can also use these properties to adjust the colors on the whole page by applying

them to the body tag Here’s an example:

<body style=“color: #fff; background-color: #00f”>

This page will have white text on a blue background You can also specify colors as part

of the backgroundandborderproperties, which allow you to set the values for a whole

family of properties at once The backgroundproperty will be discussed later in this lesson

Changing Page Colors in HTML

Before CSS was introduced, page colors were changed using attributes for the <body>

tag Many web developers still use these attributes, but they have been deprecated since

HTML 4 and were left out of HTML5 entirely The values of all the color-related HTML

attributes can be specified using hexadecimal notation or with color names

To set the background color for a page, use the bgcolorattribute Here’s how it is used

with hexadecimal color specifications:

<body bgcolor=“#ffffff”>

<body bgcolor=“#934ce8”>

To use color names, just use the name of the color as the value to bgcolor:

<body bgcolor=“white”>

<body bgcolor=“green”>

There are also attributes of the <body>tag that can be used to set the text colors for the

page The attributes and their use are as follows:

text Controls the color of all the page’s body text except for link text,

including headings, body text, text inside tables, and so on.

236 LESSON 9: Adding Images, Color, and Backgrounds

Download from www.wowebook.com

Trang 2

link Controls the color of link text for links that the user has not

already clicked on.

vlink Controls the color of links that the user has already visited.

alink Controls the color of a link while the user is clicking on it When

the user clicks on a link, it changes to this color When he releases the mouse button, it switches back.

Like the bgcolorattribute, these attributes have been dropped from HTML5 You may still

see them in older pages, but you should use CSS when you’re creating your own pages

Remember the haunted house image that you inserted on a page earlier? The page would

be decidedly spookier with a black background, and orange text would be so much more

appropriate for the holiday To create a page with a black background, orange text, and

deep red unvisited links, you might use the following <body>tag:

<body bgcolor=“#000000” text=“#ff9933” link=“#800000”>

Using the following color names for the background and unfollowed links would

pro-duce the same effect:

<body bgcolor=“orange” text=“black” link=“#800000”>

Both these links would produce a page that looks something like the one shown in

Figure 9.18

9

FIGURE 9.18

Background and

text colors.

The same effect can be achieved using the background-colorandcolorproperties in

CSS Here’s the <body> tag that specifies the color using CSS:

<body style=”background-color: #000000; color: #ff9933”>

Trang 3

Thatstyleattribute does not specify a color for links as the original body tag does To

set the link color for all the links on a page, you need to use a style sheet for the page

and specify the style for the <a>tag, like this:

<style type=”text/css”>

a { color: #ff9933; }

</style>

What about active links and visited links? CSS provides pseudo-selectors that apply to

links in particular states, as follows:

a:visited Applies to links which the user has visited.

a:hover Applies to links when the user has her mouse pointer over the

link.

a:active Like the alink attribute, this selector is used when the user is

clicking on the link.

As you can see, these selectors provide access to an additional state that the old attributes

did not, the hover state Here’s an example that specifies the colors for links in each of

their states:

a { color: #ff9933; }

a:visited { color: #bbbbbb; }

a:hover { color: #E58A2E; }

a:active { color: #FFA64D; }

</style>

Image Backgrounds

The last topic in this lesson is using an image as a background for your pages, rather

than simply a solid-colored background When you use an image for a background, that

image is tiled; that is, it’s repeated in rows to fill the browser window.

To create a tiled background, you need an image to serve as the tile Usually, when you

create an image for tiling, you must make sure that the pattern flows smoothly from one

tile to the next You can do some careful adjusting of the image in your favorite

image-editing program to make sure that the edges line up The goal is for the edges to meet

cleanly so that you don’t have a seam between the tiles after you’ve laid them end to end

(See 9.19 for an example of tiles that don’t line up very well.) You also can try clip art

packages for wallpaper or tile patterns that are designed as tiles Some graphics

pack-ages, such as Photoshop, can also modify your images so that they work as tiles This

feature works better with some kinds of images than others

Trang 4

You can include background images on your pages using CSS To include a background

image on a page (or under any block element), the background-imageproperty is used

Here’s an example, the results of which are shown in Figure 9.19:

9

FIGURE 9.19

Tiled images with

seams.

You can also use the backgroundattribute of the <body>tag to specify an image to use

as the page background, however, this attribute is not valid in HTML5:

You may still see the backgroundattribute used in older web pages, but you should use

CSS for specifying backgrounds

By default, background images are tiled both horizontally and vertically However, CSS

provides a number of options for controlling how backgrounds are applied The

back-ground-repeatproperty is used to specify how background images are tiled Options

includerepeat(which tiles the image horizontally and vertically), repeat-x(tile

hori-zontally only), repeat-y(tile vertically only), and no-repeat You can also specify

whether the background image scrolls along with the content of the page or remains in a

fixed position using the background-attachmentproperty The two values there are

scrollandfixed So, if you want to put one background image in the upper-left corner

of the browser window and have it stay there as the user scrolls down the page, you

would use the following:

<body style=“background-image: url(backgrounds/rosemarble.gif);

background-repeat: no-repeat; background-attachment: fixed”>

What if you want the background image to appear somewhere on the page other than the

upper-left corner? The background-positionproperty enables you to position a

back-ground image anywhere you like within a page (or element) The backback-ground-position

property is a bit more complex than most you’ll see You can either pass in two

Trang 5

ages, or the horizontal position (left,right, center), or the vertical position (top,

bottom, center) or both the horizontal and vertical position Here are some valid settings

for this property:

Upper right 0% 100%

top right right top right

Center 50% 50%

center center

Bottom center 50% 100%

bottom center center bottom

Here’s a <body>tag that places the background in the center right of the window and

does not scroll it with the page:

<body style=“background-image: url(backgrounds/rosemarble.gif);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center right”>

Instead of using all these different properties to specify the background, you can use the

backgroundproperty by itself to specify all the background properties With the

back-groundproperty, you can specify the background color, image, repeat setting,

attach-ment, and position All the properties are optional, but they must appear in a specific

order Here’s the structure of the property:

background: color image repeat

background-attachment background-position;

To condense the preceding specification into one property, the following tag is used:

<body style=“background: url(backgrounds/rosemarble.gif)

no-repeat fixed center right”>

If you like, you can also include a background color Here’s what the new tag looks like:

<body style=“background: #000 url(backgrounds/rosemarble.gif)

no-repeat fixed center right”>

Trang 6

Specifying Backgrounds for Elements

The CSS background properties can be used to apply a background to any block-level

element—a<div>, a <form>, a <p>, a <table>, or a table cell Specifying the

back-grounds for these elements is the same as setting the background for an entire page, and

is an easy way to add decorative elements to a page For example, I want to add an arrow

to the left of all the major headings on my web page to really emphasize them I could

stick an <img>tag inside each of the <h1>elements on my page, but that would be

repet-itive, and the images don’t make sense as part of the contents of the page So instead, I

can apply the images using CSS The results are in Figure 9.20

Here’s the style sheet:

h1 {

background: url(arrow_right.png) no-repeat center left;

line-height: 60px;

padding-left: 60px;

}

</style>

The heading tag is completely normal:

<h1>This Heading Has a Background</h1>

9

FIGURE 9.20

A heading with an

image background.

In the style sheet, I use the backgroundproperty to specify the background image and its

position for the <h1>tag One extra benefit is that this style will be applied to all the

<h1>tags on the page I use the backgroundproperty to specify the image and to

posi-tion it I use no-repeatbecause I want only one copy of the image and center leftto

position it at the left end of the header, in the middle I use the line-heightproperty to

make sure there’s plenty of space for my background image, which is 50 pixels tall,

regardless of the font size of the heading Then I add 60 pixels of padding to the left of

the heading so that the text will not appear over the background image

Trang 7

CSS Backgrounds and the <img> Tag

Applying backgrounds to elements using CSS is an alternative to using the <img>

tag to place images on a page There are many situations in which both options will

work (For example, if you want to layer text over an image, you can place the text in

a <div> and use the image as the background for that <div> , or you can use the

<img> tag and then use CSS positioning to place the text over the image.)

However, there is a rule of thumb that many web designers use when choosing

between the two alternatives If an image is purely decorative, it should be included

on the page as a background If an image is part of the content of the page, you

should use an <img> tag So if the page is a news article, and you’re including an

image to illustrate the article, the <img> tag is appropriate If you have a photo of a

landscape that you want to use to make the heading of your page more attractive,

it makes more sense to use CSS to include the image as a background in the

heading.

The reason for this rule is that it makes things easier for visually challenged users

who may be visiting a page using a screen reader If you include your pretty header

image using the <img> tag, their screen reader will tell them about the image on

every page they visit On the other hand, they probably would want to know about

the photo accompanying a news article.

Another simple rule is to think about what you would put in the alt attribute for an

image If the alternate text is interesting or useful, you should use the <img> tag If

you can’t think of anything interesting to put in the alternate text for an image, it

probably should be a background for an element instead.

Using Images As Bullets

In Lesson 5, “Organizing Information with Lists,” I discussed the list-style-image

property, which enables you to use images as bullets for lists Specifying the image URL

for bullets is the same as specifying the URL for background images in CSS The

browser will substitute the default bullets with the image you specify Here’s an example,

the results of which are shown in Figure 9.21

Input▼

<!DOCTYPE html>

<html>

<head>

<title>Southern Summer Constellations</title>

<style type=”text/css” media=”screen”>

ul {

Trang 8

list-style-image: url(“Bullet.png”);

}

</style>

</head>

<body>

<h1>Southern Summer Constellations</h1>

<ul>

<li>Canis Major</li>

<li>Cetus</li>

<li>Eridanus</li>

<li>Gemini</li>

<li>Orion</li>

<li>Perseus</li>

<li>Taurus</li>

</ul>

</body>

</html>

9

Output

FIGURE 9.21

A list that uses

images for bullets.

You can also supply both the list-style-imageandlist-style-typeproperties so that

if the image is not found, the list will use the bullet style of your choosing

What Is an Imagemap?

Earlier in this lesson, you learned how to create an image that doubles as a link simply

by including the <img>tag inside a link tag (<a>) In this way, the entire image becomes

a link

In an imagemap, you can define regions of an image as links You can specify that

cer-tain areas of a map link to various pages, as in Figure 9.22 Or you can create visual

metaphors for the information you’re presenting, such as a set of books on a shelf or a

photograph with a link from each person in the picture to a page with his or her

biogra-phy on it

Trang 9

FIGURE 9.22

Imagemaps:

different places,

different links.

washington.html

minnesota.html

ohio.html

florida.html alaska.html

california.html

texas.html HTML5 supports the <map>element for creating image maps If you don’t want to use

the<map>tag, you can also use CSS to position links over an image and hide the

con-tents of those links, making it appear as though regions of an image are clickable I

dis-cuss both techniques in this lesson

ImageMaps and Text-Only Browsers

Because of the inherently graphical nature of image maps, they work well only in

graphi-cal browsers Lynx, the most popular text-based browser, provides limited support for

client-side imagemaps If you load a page in Lynx that contains a client-side imagemap,

you can get a list of the links contained in the imagemap

Getting an Image

To create an imagemap, you need an image (of course) This image will be the most

use-ful if it has several discrete visual areas that can be selected individually For example,

use an image that contains several symbolic elements or that can be easily broken down

into polygons Photographs generally don’t make good imagemaps because their various

elements tend to blend together or are of unusual shapes Figures 9.23 and 9.24 show

examples of good and poor images for imagemaps

Trang 10

FIGURE 9.24

A not-so-good

image for an

imagemap.

9

FIGURE 9.23

A good image for

an imagemap.

Determining Your Coordinates

Client-side imagemaps consist of two parts; the first is the image used for the imagemap

The second is the set of HTML tags used to define the regions of the imagemap that

serve as links To define these tags, you must determine the exact coordinates on your

image that define the regions you’ll use as links

You can determine these coordinates either by sketching regions and manually noting the

coordinates or by using an imagemap creation program The latter method is easier

because the program automatically generates a map file based on the regions you draw

with the mouse

Định dạng
Số trang	10
Dung lượng	917,18 KB