Học JavaScript qua ví dụ part 60 potx

CSS lets you specify a style for the fonts in a document in a variety of ways— by family, size, color, and others see Table 14.6.. Like the HTML tag, CSS lets you specify several font f

Trang 1

14.4.3 Working with Fonts

The presentation of a document would be quite boring if you only had one font face and

size available CSS lets you specify a style for the fonts in a document in a variety of ways—

by family, size, color, and others (see Table 14.6) There are a huge number of fonts to pick

from, although it’s a good idea to specify fonts that users are likely to have installed Like

the HTML <font> tag, CSS lets you specify several font families (see Table 14.7), and will go

from left to right, selecting the one available on your computer See Figure 14.5 to sample

different font styles for your operating system

Table 14.6 Font Properties

Property Value/Example

Elements Affected

font 12pt/14pt sans-serif, 80% sans-serif, x-large/110% arial,

normal small-caps

All

font-family serif, sans-serif, cursive, fantasy, monospace; or any

specific font family typeface name may be used

All

font-size 12pt, larger, 150%, 1.5em All

font-style normal, italic, oblique All

font-variant normal, small-caps All

font-weight normal, bold, bolder, lighter, 100, 200 900 All

Table 14.7 Font Families

Family Names Specific Family Typeface Names

Serif

Sans serif

Monospace

Cursive

Fantasy

Trang 2

E X A M P L E 1 4 4

<html>

<head><title>Fonts</title>

body { background-color: darkblue; }

1 h1 { color: yellow; font-size:x-large;

font-family: lucida, verdana, helvetica; }

2 h2 { color:lightgreen; font-size:large;

font-family:courier; }

3 h3 { color:lightblue; font-size:medium;

font-family:helvetica; }

4 p { color:white; font-size: 22pt;

font-style: italic;

font-family: arial;

font-variant:small-caps; }

</style>

</head>

<body>

5 <h2>My name is Mama Bear</h2>

<p>Once upon a time, yaddy yaddy yadda </p>

</body>

</html>

E X P L A N A T I O N

1 The h1 element will have yellow text and an extra-large font size from the Lucida

family of fonts If that font is not available in this browser, Verdana will be used,

and if not Verdana, then Helvetica

2 The h2 element will have a light green, large, Courier font.

3 The h3 element will have a light blue, medium, Helvetica font.

4 Paragraphs will have white text, with an italic, Arial font size of 22 points, all in

small caps

5 The <h2> tag is displayed in its big style See Figure 14.4.

Trang 3

Figure 14.4 Changing fonts.

Figure 14.5 CSS font sampler and survey at www.codestyle.org.

Trang 4

14.4.4 Working with Text

If you want to make a business card, how do you put extra space between each of the

letters of your company name? If you’re writing a science term paper, how do you deal

with exponents, equations, or subscripts? And how do you make it double-spaced? If

you’re writing a cool poem and want your text in the shape of an hourglass or a circle

to give it visual appeal, or you just want to emphasize certain words to make your

point for a presentation, then what to do? The CSS controls listed in Table 14.8 could

be your answer

Table 14.8 Text Alignment Properties

letter-spacing normal, 0.1em All

line-height normal, 1.2, 1.2em, 120% All

text-align left, right, center, justify All

text-decoration underline, overline, line-through, blink All

text-indent 3em, 15% Block-level

elements

text-transform capitalize, uppercase, lowercase, none All

vertical-align baseline, sub, super, top, text-top, middle,

bottom, text-bottom, 50%

Inline elements

E X A M P L E 1 4 5

<html>

<head><title>First Style Sheet</title>

letter-spacing: 4px;

text-decoration: underline;

text-align: center;

font-size: 22pt ; font-family:arial;

font-weight: bold;

}

Trang 5

3 p { line-height: 2;

text-indent: 6%;

font-family:arial;

font-size:18; } }

</style>

</head>

4 <p id=title>The Color Palette</p>

5 <p>The world is a colorful place Web browsers display

millions of those colors every day to make the pages seem real and interesting Browser colors are displayed in combinations of red, green, and blue, called RGB This is a system of indexing colors by assigning values of 0 to 255 in each of the three colors, ranging from no saturation (0) to full saturation (255) Black has a saturation of 0 and white has a saturation of 255 In HTML documents these colors are represented as six hexadecimal values, preceded

by a # sign White is #FFFFFF and black is #000000.</p>

6 <p>

Although there are millions of different combinations of color,

it is best when working with Web pages to use what are

called Web-safe colors.</p>

</body>

</html>

1 #title is called an ID selector, a way in the style sheet that we can allow any selector

to use a style In this example, the title of the page is going to be distinct from the

text in the rest of the page For example, if the <p> tag is used, it can identify itself

with this ID selector to produce the text style described in the declaration block

(see line 4) If the ID is not used, the rest of the paragraphs will display text as

defined by the rule in line 3 More discussion on ID selectors is presented in the

section “The ID Selector and the ID Attribute” on page 564

2 Text controls are defined in the rule The text will be centered, underlined, with

a 22-point, bold Arial font The spacing between each letter and each word is

de-fined in pixels

3 When the <p> tag is used, a line height of 2 will produce double-spaced lines The

first line of each paragraph will be indented by 6% from the left margin

4 This paragraph is identifying itself with the title ID This means that for this

para-graph, the style will follow the rule defined after line 1

5, 6 Both of these paragraphs take on the style provided by the rule in line 3 The

re-sults is shown in Figure 14.6

E X A M P L E 1 4 5 (C O N T I N U E D)

Trang 6

14.4.5 Working with Backgrounds and Images

The same way that wallpaper in a guest room can create a sense of warmth or calm,

back-ground images can add decoration and design to an otherwise blah page CSS gives you

a number of ways to control the appearance of background images Refer to Table 14.9

Figure 14.6 A report with a centered title, double-spaced lines, and indented paragraphs.

Table 14.9 Image and Background Properties

background-attachment scroll, fixed All

background-image URL (bay.gif), none All

background-position right top, top center, center, bottom, 100%

100%, 0% 0%, 50% 50%

Block-level and replaced elements

background-repeat repeat, repeat-x (horizontally), repeat-y

(vertically), no-repeat

All

Trang 7

E X A M P L E 1 4 6

<html>

<head><title>Backgrounds</title>

background-image: url('Moonbeams.jpeg');

background-repeat: no-repeat;

background-attachment: fixed background-color: #ccccff;

background-position:center 80px;

}

color:white;

font-family:cursive;

font-variant:small-caps;

}

</style>

</head>

3 <body>

4 <h2 align='center'>Looking at Moonbeams</h2>

</body>

</html>

1 CSS rules are defined for an HTML selector, the body element The declarations

define the background style of an image called Moonbeams.jpg

2 The HTML selector is an h2 element styled to have a white, cursive, font in small caps.

3 The body of the document reflects the CSS rules laid out on line 1

4 The h2 tag reflects the font style set by CSS See Figure 14.7.

Trang 8

E X A M P L E 1 4 7

<html>

<head><title>Backgrounds</title>

1 body {background-color:"pink" ;

2 background-image: url(greenballoon.gif);

4 h1 {font-size: 42pt;text-indent: 25%;

color:red; margin-top: 14%;

font-family:fantasy;}

</style>

</head>

5 <body>

6 <h1>Happy Birthday!!</h1>

<h1>Happy Birthday!!</h1>

</body>

</html>

1 The rule for the body element is to give it a pink background color.

2 The background image will come from a file called greenballoon.gif, in the current

directory The URL specifies the location of the image

3 The image will repeat itself horizontally across the screen

4 The rule for the h1 element is a red 42-point fantasy font, indented 25% from the

left of the block, where the margin is 14% from the top

5 The body of the document reflects the style that was set for it in line 1

6 The <h1> tag reflects the rule set for it in line 4 The result shown in Figure 14.8.

Trang 9

14.4.6 Working with Margins and Borders

Containers. When you look at your document, it is composed of a number of

con-tainers The <body> tag is a container and it may contain a heading, a paragraph, a table,

or other elements Each of these elements also can be thought of as a container The

<div> tag is another special type of container used to define logical divisions with the

content of a page You can use the <div> tag to center a block of content or position a

content block in a specific place on the page

Margins, Padding, and Borders. Each container has an outer margin, and the

margin can have some padding (space between it and the next container) The padding

is like the CELLPADDING attribute of a table cell On the inside of the padding is a

bor-der that separates the container from its contents The borbor-der is normally invisible You

can change the margin, create colorful borders, or increase or decrease the padding, to

give the page more style See Figure 14.9 for a graphic representation, and Table 14.10

for a list of margin and border properties Different browsers might handle the borders

differently Margins and borders will behave better if enclosed within <div> tags.

Figure 14.9 How an element is contained.

Table 14.10 Margin and Border Properties

border-bottom <border-bottom-width> or <border-style> or <color> All

border-bottom-width thin, medium, thick, 2em All

border-left <border-left-width> or <border-style> or <color> All

content

padding margin

border

Định dạng
Số trang	9
Dung lượng	0,96 MB