|
Cascading Style Sheets
Customizing Other Tags
A Motivational Example |
Redefining The Tags |
Including CSS Rules |
Customizing Other Tags |
Customizing Tags |
Classes
We've seen how to use css to create example customized
versions of the <h1>...<h6> tags, and we've
seen the various ways to implement these definitions on
our HTML pages. Now let's look at some css rules for customizing
a few other tags.
Customizing the Body Tag
You can even use a css rule to customize the <body>
tag. In this rule you can specify the face, size, style,
and color of a page's main text font. You can also set a
page background color and / or image as well as other features.
Defining a rule for <body> is particularly useful
if you want an easy way to impose a consistent look over
a set of HTML pages. To get such consistency without css
you'd have to make sure every page used the same body tag.
In addition, you'd have to separately set the main font
on each page. For example, every page to which you wanted
to apply your "look" would need something like:
| |
<body bgcolor="#339999"
background="back1.gif"
TEXT="#00cccc">
<font face="Arial, Helvetica, sans-serif">
|
But if you're using cascading style sheets, you can create
a css rule to specify the desired properties of the body
tag and save this in an external file. Then simply connect
each HTML file that you want to have a consistent look to
this css file with a <link> tag (as we described above).
Once linked to the external file, the individual HTML files
only need the simplest possible form for the body tag: <body>.
In Example
5 we link the HTML file to a style sheet file named
stylefile2.css. This external file is the same as our earlier
stylefile1.css except that we've now added the following
rule for the body tag:
| |
body {font-family: Arial,
Helvetica, sans-serif;
font-size: 10.5pt; color: #000000;
background-color: #eeeeee;
background-image: url(back1.gif);}
|
This rule has the same format as the ones we used to customize
the <h1>,..., <h6> tags. We begin by giving
the name of the tag that we want to reconfigure, in this
case body. Then there's a left
brace {. Then comes the list
of definitions that we apply to customize the tag: each
definition consists of a property name, followed by a colon,
followed by the value that we want to assign to the property.
Finally, we close the rule with a right brace }.
(Don't forget to separate the individual definitions
within the rule by semicolons!)
A body tag rule is a natural candiate for an external
css file. (You wouldn't gain much by adding css inside the
body tag itself or in a page's head.) As we've emphasized,
using an external style sheet file for customizing the body
tag helps make it easy to impose a uniform look to a set
of pages. Such a rule also greatly simplifies the task of
modifying that look for all of the pages if you ever need
to redesign your site.
A note on font sizes: Let's take another quick
look at the above rule for body. Note the value we've specified
for the page's main font size: 10.5pt.
What we want to emphasize here is that css gives you far
more control over font sizes than HTML alone does. With
HTML you can use the size attribute
of the font tag to choose one
of (only) seven different sizes. You can use something like
<font size=5> to set
a font at a specific size or you can use something like
<font size="+2"> to specify
a size relative to the surrounding text.
With css you can specify a font size in a number of ways.
You can use a keyword that chooses from a group of preset
font sizes. Or you can use percentages that specify font
sizes relative to the size of the surrounding text. But
probably the most useful option is that you can set a font
size with a numerical value, for example 10pt or 12pt (here
pt specifies points, a traditional size unit in typesetting).
As we see in the above example, you can even specify fractional
numerical values for font sizes.
Customizing the <B> Tag
The default behavior of the <B> tag is to make text
bold. But you can use a css rule to give the tag
additional features (which, if you wish, could even include
not making text bold). For instance, you can create
a rule that will cause the <B> tag to display text
in a large font, in a particular face and color: Example
6. This example uses the following rule for the <B>
tag:
| |
B {font-size: 24pt; color:
#32cd32;
font-family: Arial, Helvetica, sans-serif;}
|
Note that the format for this rule is the same as for
the rules for the <h1>,..., <h6> and <body>
tags. Also note that we've redefined some of the same properties
for B that we did for the headings and for body.
When reconfiguring <B>, you can even set a background
color for text that's inside your customized bold tag: Example
6b. This example used the rule:
| |
B {font-weight: bolder; font-size:
24pt; color: #32cd32;
font-family: Arial, Helvetica, sans-serif;
background-color: #ffff00;}
|
A note on background colors: This is only one of
many situations where css lets you set the background color
of an element. HTML lets you set the background color of
a page as a whole or of a table, but with css you can define
the background-color property
to give distinct colors to the backgrounds of many types
of page elements.
Customizing the <P> Tag
Now let's consider using a css rule to customize the <P>
tag. Be careful with this tag: the customization should
only take effect for material contained inside a <P>...</P>
container.
We can, for example, arrange for text inside a <P>
... </P> container to have a different background
color, font, and indentation than other elements on the
page: Example
7. (These are only some of the properties we can redefine
for the tag.) In this example we've given the <P>
tag (actually the <P> ... </P> container) the
rule:
| |
P {background-color: #ffff00;
font-size: 10pt;
font-family: "times new roman", times, garamond;
margin-left: 50px;}
|
Warning: Some browsers can get confused when displaying
pages that mix the use of <P>...</P> and just
<P> alone: Example
7b. If you are going to customize the P tag, you should
probably stick diligently to using <P>...</P>.
We may also give the P tag a different background image
by specifying a value for the background-image
property: Example
7c. This example uses the following rule for P:
| |
P {background-image:
url(orange_paper.gif);
background-color: #ffff00; font-size: 10pt;
font-family: "times new roman", garamond;
margin-left: 50px;}
|
In this example some of the paragraphs now have an orange
textured background.
For that matter, we can also have a css rule specify a
background image for a B tag (and lots of other tags). In
addition, we can use css to give background colors or images
for I tags, blockquotes, and numerous other elements (including,
of course, tables and the body). In each of these cases
we just have to define the background-color
or background-image property
in the css rule for the corresponding tag, exactly as we
have done in the examples for B and P.
|
Video Central 影像
SMJK Gallery 华中廊
