Tự học HTML và CSS trong 1 giờ - part 17 docx

You can nest character tags—for example, using both bold and italic for a set of charac-ters—as follows: Text that is both bold and italic However, the result on the screen is browser-de

Trang 1

You can nest character tags—for example, using both bold and italic for a set of

charac-ters—as follows:

<b><i>Text that is both bold and italic</i></b>

However, the result on the screen is browser-dependent, like all HTML tags You won’t

necessarily end up with text that’s both bold and italic You might end up with one style

or the other:

Input▼

<p>In Dante’s <i>Inferno</i>, malaboge was the eighth circle of hell,

and held the malicious and fraudulent.</p>

<p>All entries must be received by <b>September 26, 1999</b>.</p>

<p>Type <tt>lpr -Pbirch myfile.txt</tt> to print that file.</p>

<p>Sign your name in the spot marked <u>Sign Here</u>:</p>

<p>People who wear orange shirts and plaid pants <s>have no taste</s>

are fashion-challenged.</p>

<p>RCP floor mats give you <big>big</big> savings over the

competition!</p>

<p>Then, from the corner of the room, he heard a <small>tiny voice

</small>.</p>

<p>In heavy trading today Consolidated Orange Trucking

rose <sup>1</sup>/<sub>4</sub>

points on volume of 1,457,900 shares.</p>

Figure 7.2 shows some of the physical tags and how they appear

136 LESSON 7: Formatting Text with HTML and CSS

Output

FIGURE 7.2

Physical styles

displayed in a

browser.

Trang 2

Character Formatting Using CSS

You’ve already seen how styles can modify the appearance of various elements Any of

the effects associated with the tags introduced in this lesson can also be created using

CSS Before I go into these properties, however, I want to talk a bit about how to use

them As I’ve said before, the styleattribute can be used with most tags However, most

tags somehow affect the appearance of the text that they enclose There’s a tag that

does-n’t have any inherent effect on the text that it’s wrapped around: the <span>tag It exists

solely to be associated with style sheets It’s used exactly like any of the other tags

you’ve seen in this lesson Simply wrap it around some text, like this:

<p>This is an example of the <span>usage of the span tag</span>.</p>

Used by itself, the <span>tag has absolutely no effect Paired with the styleattribute, it

can take the place of any of the tags you’ve seen in this lesson and can do a lot more

than that, as well

The Text Decoration Property

Thetext-decorationproperty is used to specify which, if any, decoration will be

applied to the text within the affected tag The valid values for this property are

underline,overline,line-through, and blink The application of each of them is

self-explanatory However, here’s an example that demonstrates how to use each of them:

<p>Here is some <span style=’text-decoration: underline”>underlined

text</span>.</p>

<p>Here is some <span style=”text-decoration: overline”>overlined

<p>Here is some <span style=”text-decoration: line-through”>line-through

<p>Here is some <span style=”text-decoration: blink”>blinking text</span>.</p>

The cool thing is that you can use this, and all the properties you’ll see in this lesson,

with any tag that contains text Take a look at this example:

<h1 style=”text-decoration: underline”>An Underlined Heading</h1>

Using the styleattribute, you can specify how the text of the heading appears Choosing

between this approach and the <u>tag is a wash—if you want to remove the underlining

from the heading, you have to come back and edit the tag itself, regardless of whether

you used the <u>tag or style attribute Later, you’ll see how to use style sheets to control

the appearance of many elements simultaneously

7

Download from www.wowebook.com

Trang 3

Font Properties

When you want to modify the appearance of text, the other major family of properties

you can use is font properties You can use font properties to modify pretty much any

aspect of the type used to render text in a browser One of the particularly nice things

about font properties is that they’re much more specific than the tags that you’ve seen

so far

First, let’s look at some of the direct replacements for tags you’ve already seen The

font-styleproperty can be used to italicize text It has three possible values: normal,

which is the default; italic, which renders the text in the same way as the <i>tag; and

oblique, which in theory is somewhere between italic and normal, and is rendered by

nearly all browsers as regular italics Here are some examples:

<p>Here’s some <span style=”font-style: italic”>italicized text</span>.</p>

<p>Here’s some <span style=”font-style: oblique”>oblique text</span>

(which may look like regular italics in your browser).</p>

Now let’s look at how you use CSS to create boldfaced text In the world of HTML, you

have two options: bold and not bold With CSS, you have (theoretically) many more

options The reason I say theoretically is that browser support for the wide breadth of

font weights available using CSS can be spotty To specify that text should be boldface,

thefont-weightproperty is used Valid values are normal(the default), bold,bolder,

lighter, and 100 through 900, in units of 100 Here are some examples:

<p>Here’s some <span style=”font-weight: bold”>bold text</span>.</p>

<p>Here’s some <span style=”font-weight: bolder”>bolder text</span>.</p>

<p>Here’s some <span style=”font-weight: lighter”>lighter text</span>.</p>

<p>Here’s some <span style=”font-weight: 700”>bolder text</span>.</p>

You can also set the typeface for text using the font-familyproperty In addition, you

can set the specific font for text, but I’m not going to discuss that until later in the lesson

In the meantime, let’s look at how you can set the font to a member of a particular font

family The specific font will be taken from the user’s preferences The property to

mod-ify is font-family The possible values are serif,sans-serif,cursive,fantasy, and

monospace So, if you want to specify that a monospace font should be used with CSS

rather than the <tt>tag, you use the following code:

<p><span style=”font-family: monospace”>This is monospaced text.</span></p>

Now let’s look at one capability not available using regular HTML tags Using the

font-variantproperty, you can have your text rendered so that lowercase letters are replaced

with larger capital letters The two values available are normalandsmall-caps Here’s

Trang 4

The web page in Figure 7.3 contains some text that uses the font-variantproperty as

well as all the other properties described in this section

7

Output

FIGURE 7.3

Text styled using

CSS.

Preformatted Text

Most of the time, text in an HTML file is formatted based on the HTML tags used to

mark up that text In Lesson 3, “Introducing HTML and XHTML,” I mentioned that any

extra whitespace (spaces, tabs, returns) that you include in your HTML source is stripped

out by the browser

The one exception to this rule is the preformatted text tag <pre> Any whitespace that

you put into text surrounded by the <pre>and</pre>tags is retained in the final output

With these tags, the spacing in the text in the HTML source is preserved when it’s

dis-played on the page

The catch is that preformatted text usually is displayed (in graphical displays, at least) in

a monospaced font such as Courier Preformatted text is excellent for displaying code

examples in which you want the text formatted with exactly the indentation the author

used Because you can use the <pre>tag to align text by padding it with spaces, you can

use it for simple tables However, the fact that the tables are presented in a monospaced

font might make them less than ideal (You’ll learn how to create real tables in Lesson

10, “Building Tables.”) The following is an example of a table created with <pre>:

Trang 5

Input▼

<pre>

Diameter Distance Time to Time to (miles) from Sun Orbit Rotate

(millions

of miles)

————————————————————————————————————

Mercury 3100 36 88 days 59 days

Venus 7700 67 225 days 244 days

Earth 7920 93 365 days 24 hrs

Mars 4200 141 687 days 24 hrs 24 mins

Jupiter 88640 483 11.9 years 9 hrs 50 mins

Saturn 74500 886 29.5 years 10 hrs 39 mins

Uranus 32000 1782 84 years 23 hrs

Neptune 31000 2793 165 days 15 hrs 48 mins

Pluto 1500 3670 248 years 6 days 7 hrs

</pre>

Figure 7.4 shows how it looks in a browser

Output

FIGURE 7.4

A table created

using<pre>,

shown in a

browser.

When you’re creating text for the <pre>tag, you can use link tags and character styles

but not element tags such as headings or paragraphs You should break your lines with

hard returns and try to keep your lines to 60 characters or fewer Some browsers might

have limited horizontal space in which to display text Because browsers usually won’t

reformat preformatted text to fit that space, you should make sure that you keep your text

within the boundaries to prevent your readers from having to scroll from side to side

Be careful with tabs in preformatted text The actual number of characters for each tab

stop varies from browser to browser One browser might have tab stops at every fourth

character, whereas another may have them at every eighth character You should convert

any tabs in your preformatted text to spaces so that your formatting isn’t messed up if it’s

viewed with different tab settings than in the program you used to enter the text

Trang 6

The<pre>tag is also excellent for converting files that were originally in some sort of

text-only form, such as mail messages or Usenet news postings, into HTML quickly and

easily Just surround the entire content of the article within <pre>tags and you have

instant HTML, as in the following example:

<pre>

To: lemay@lne.com

From: jokes@lne.com

Subject: Tales of the Move From Hell, pt 1

I spent the day on the phone today with the entire household

services division of northern California, turning off services,

turning on services, transferring services and other such fun

things you have to do when you move.

It used to be you just called these people and got put on hold for

and interminable amount of time, maybe with some nice music, and

then you got a customer representative who was surly and hard of

hearing, but with some work you could actually get your phone

turned off.

</pre>

One creative use of the <pre>tag is to create ASCII art for your web pages The

follow-ing HTML input and output example shows a simple ASCII-art cow:

Input▼

<pre>

( )

Moo (oo)

\/———\

|| | \

||—-W|| *

|| ||

</pre>

Figure 7.5 displays the result

7

Trang 7

Output

FIGURE 7.5

A bit of ASCII art

that illustrates

how preformatted

text works.

Horizontal Rules

The<hr>tag, which has no closing tag in HTML and no text associated with it, creates a

horizontal line on the page Rule lines are used to visually separate sections of a web

page—just before headings, for example, or to separate body text from a list of items

Closing Empty Elements

The <hr> tag has no closing tag in HTML To convert this tag to XHTML and to

ensure compatibility with HTML browsers, add a space and a forward slash to the

end of the tag:

<hr />

If the horizontal line has attributes associated with it, the forward slash still appears

at the end of the tag, as shown in the following examples:

The following input shows a rule line and a list as you would write it in XHTML 1.0:

Input▼

<hr />

<h2>To Do on Friday</h2>

<ul>

<li>Do laundry</li>

<li>Send FedEx with pictures</li>

<li>Have lunch with Mollie</li>

<li>Read Email</li>

<li>Set up Ethernet</li>

</ul>

Trang 8

Figure 7.6 shows how they appear in a browser

7

Output

FIGURE 7.6

An example of how

horizontal rules

are used around a

list.

There are a number of attributes that can be used to modify the appearance of a

horizon-tal rule Although they work in current browsers, they have been removed from HTML5,

and you should use CSS instead The sizeattribute indicates the thickness, in pixels, of

the rule line The default is 2, and this also is the smallest that you can make the rule

line Figure 7.7 shows the sample rule line thicknesses created with the following code:

Input▼

<h2>2 Pixels</h2>

<hr size=”2” />

<h2>4 Pixels</h2>

<hr size=”4” />

<h2>8 Pixels</h2>

<hr size=”8” />

<h2>16 Pixels</h2>

<hr size=”16” />

Output

FIGURE 7.7

Examples of rule

line thicknesses.

Trang 9

To change the thickness of an <hr> with CSS, use the heightattribute, which I’ll discuss

in Lesson 8, “Using CSS to Style a Site.”

Thewidthattribute specifies the horizontal width of the rule line You can specify the

exact width of the rule in pixels You can also specify the value as a percentage of the

browser width (for example, 30% or 50%) If you set the width of a horizontal rule to a

percentage, the width of the rule will change to conform to the window size if the user

resizes the browser window Alternatively, you can use the widthCSS property instead

I’ll also talk about width in the following lesson Figure 7.8 shows the result of the

fol-lowing code, which displays some sample rule line widths:

Input▼

<h2>100%</h2>

<hr />

<h2>75%</h2>

<hr width=”75%” />

<h2>50%</h2>

<hr width=”50%” />

<h2>25%</h2>

<hr width=”25%” />

<h2>10%</h2>

<hr width=”10%” />

Output

FIGURE 7.8

Examples of rule

line widths.

If you specify a widthsmaller than the actual width of the browser window, you can also

specify the alignment of that rule with the alignattribute, making it flush left

Trang 10

Finally, in most current browsers, the noshadeattribute shown in the following example

causes the browser to draw the rule line as a plain line without the three-dimensional

shading, as shown in Figure 7.9

7

Handling Attributes Without Values

In HTML 4.01 and, more recently, HTML5, a value isn’t required by the noshade

attribute The method you use to apply this attribute appears as follows:

To comply with XHTML 1.0, however, all attributes require a value The HTML 4.01

specification requires that Boolean attributes (such as noshade ) have only the name

of the attribute itself as the value The following example demonstrates how to apply

the noshade attribute to the <hr> tag in compliance with the XHTML 1.0

specifica-tion To comply with HTML5, you would drop all of the attributes and use CSS

instead (The noshade attribute can be duplicated by changing the borders and

back-ground of the horizontal rule.)

<h1 align=”center”>NorthWestern Video</h1>

<h2 align=”center”>Presents</h2>

Output

FIGURE 7.9

Rule lines without

shading.

Line Break

The<br>tag breaks a line of text at the point where it appears When a web browser

encounters a <br>tag, it restarts the text after the tag at the left margin (whatever the

current left margin happens to be for the current element) You can use <br>within other

elements, such as paragraphs or list items; <br>won’t add extra space above or below

the new line or change the font or style of the current entity All it does is restart the text

at the next line

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