Học JavaScript qua ví dụ part 64 pps

564 Chapter 14 • Introduction to CSS Cascading Style Sheets with JavaScript 14.8 The ID Selector and the ID Attribute The ID Selector.. The ID selector is another way to create a style

Trang 1

564 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript

14.8 The ID Selector and the ID Attribute

The ID Selector. The ID selector is another way to create a style that is independent

of a specific HTML tag By using the ID selector, you can choose the style for the element

by assigning it a unique ID The name of the ID selector is always preceded by a hash

mark (also called a pound sign, #) The declaration block, consisting of properties and

values, follows the ID selector and is enclosed in curly braces

<ul class="square">

<li>circle</li>

<li>square</li>

<li>triangle</li>

</ul>

<ul class="none">

<li>Thanks</li>

<li>Gracias</li>

</ul>

</body>

</html>

E X P L A N A T I O N

1 A CSS class is defined for a list with different styles

2 This is an HTML list item using the “disc” class The output shown in Figure

14.17

Figure 14.17 Using a CSS class to create different styles for lists.

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

Trang 2

To apply an ID to an HTML tag, use the id attribute The attribute will be assigned the

same name given to the ID selector; so, to apply an ID selector to a <p> tag, you would

stipulate <p id=name> where name is the name of the ID selector (see Example 14.17).

The id Attribute. When JavaScript enters the picture, the id attribute is used to

iden-tify each element as a unique object so that it can be manipulated in a JavaScript

pro-gram The id should be unique for an element and not used more than once on a page

If you need to use the style more than once for multiple elements, it would be better to

use the class selector instead The ID selector can be used with a class selector of the

same name, as #big, big { }.

F O RM A T

#IDselector { declaration ; }

E X A M P L E

#menu1 { font-family: arial;

font-size: big;

color: blue; }

E X A M P L E 1 4 1 7

<html>

1 <style type="text/css">

2 p{ font-family:arial,sans-serif,helvetica;

font-style:bold;

font-size:18 }

color: red;

text-decoration:underline;

}

</style>

</head>

<body >

4 <p>When making my point, I will get quite red and underline

what I say!!</p>

5 <p id="block">This text is red and underlined!!</P>

6 <p>and now I am somewhat appeased

</body>

</html>

1 This is the start of a style sheet; it is placed between the <head></head> tags in the

document

Trang 3

14.9 Overriding or Adding a Style with the

<span> Tag

The <span></span> tags are used if you want to change or add styles to only a selected

portion of text (see Table 14.11) By doing so, you can create an inline style that will be

embedded within another element and apply only to that portion of the content In this

way you can add or override a style to an element for which a style has already been

defined Carriage returns and breaks in the text will not occur with these tags

2 The style of the paragraph element is defined This style will take effect anywhere

in the document where the <p> tag is used Note that point sizes may be different

on different browsers Pixels will give you more accuracy

3 The ID selector is called block and must be preceded by a hash mark It can be

used by any HTML element to produce red, underlined text ID selectors should

only be used once on a page to serve as a unique ID for the element

4 A paragraph containing text will be displayed according to the style defined in the

style sheet on line 2

5 By adding the ID called block, the style for this paragraph will be changed to red,

underlined text

6 The <p> tag will revert to the style defined on line 2 See Figure 14.18.

Figure 14.18 Using the ID selector in style sheets.

Table 14.11 Attributes of the HTML span Tag

class Sets a class for a specific element or elements.

id Used to apply settings to specific HTML elements.

style Used to apply style settings for the specific element included in the span tags.

title Used to give specific elements a title that might appear as a tooltip when the

mouse is held over the element.

E X P L A N A T I O N (C O N T I N U E D)

Trang 4

In Example 14.18, the paragraph style has been defined in a CSS But later in the body

of the document, the <span> tag is used to override the font size and to add margins to

the text

E X A M P L E 1 4 1 8

<html>

<head><title>Margins</title></head>

<style type="text/css">

border-width: 10px; border-style:solid;

border-color: white; padding:5px;}

font-size: 22pt;

margin-left:10;

margin-right:10;

padding:5px;

border-style:groove;

border-color:white;

background-color:cyan;}

</style>

<p>

3 <span style="margin-left:10%;font-size:26pt;">The Three

Little Bears</span>

4 </p>

<p>

Once upon a time there were three little bears, Mama bear, Papa bear, and Baby bear.

They lived very happily in the deep woods.

</p>

<p>And then there was Goldilocks!</p>

</body>

</html>

1 The style rule for the body element is defined It will have a margin distance

in-creased by 10% on all sides and a solid, white border with a padding of 5 pixels

between the margin and the border Margin borders will differ in appearance

de-pending on your browser

2 The style rule for the paragraph defines black text of a 22-point font, with both

right and left margins of 10 pixels, contained within a grooved, white border,

against a cyan background

Continues

Trang 5

The <span> tag provides no visual change by itself It allows you to change or modify the

appearance of a selected portion of a document within the tags based on a CSS class rule

Example 14.19 highlights specific portions of text between the <span></span> tags.

3 The <span> tag defines a left margin increased by 10% relative to this paragraph,

and changes the font size to 26 points The only part of the document to be

affect-ed is the paragraph in which the <span></span> tags are enclosaffect-ed The text The

Three Little Bears will be displayed according to this style.

4 The <span> tags have no effect on this paragraph The style reverts to the rule in

the style sheet See Figure 14.19

Figure 14.19 The <span> tag only affects a specific portion of the text.

E X A M P L E 1 4 1 9

<html>

<head>

1 span.highlight { background-color:yellow }

</style>

</head>

<body>

Trang 6

Virtually all selectors that are nested within selectors will inherit the property values

assigned to the outer selector unless otherwise modified For example, a color defined

for the “body” will also be applied to text in a paragraph Contextual selectors have an

inheritance basis For example, if a <b> tag is nested within a <p> tag, then the <b> tag

takes on the characteristics assigned to its parent If the <p> is green, then the bold text

will also be green If a bullet list <ul> has <li> tags nested within it, the bullets take on

the characteristics of its parent If the ul element is red, then all the bullets and the

accompanying text will be red

<p>

2 <span class="highlight"> This is a text.</span> Highlighting

text is a nice idea.<br>Whenever you apply a span style

to this paragraph, you'll see what happens.

3 <span class="highlight"> This is the highlighted text.</span>

</p>

</body>

</html>

1 This is a dependent class selector rule The class highlight can only be applied to

<span> </span> tags

2 The class attribute is assigned the name of a class called “highlight” The class will

be in effect for only the portion of text between the <span></span> tags The

back-ground color of the text is changed to yellow as shown in Figure 14.20

3 The text between the <span></span> tags will be highlighted based on the class

rule

Figure 14.20 Highlighting text between <span></span> tags using the class attribute.

Trang 7

E X A M P L E 1 4 2 0

<html>

<head><title>Contextual Selector</title>

1 table td { color: blue; /* Table cells will take this style */

font-size: 18pt;

font-family: verdana; }

</style>

</head>

<h1><em>The Three Bears</em></h1>

<tr>

2 <td>Mama Bear</td>

</tr>

<tr>

3 <td>Papa Bear</td>

</tr>

<tr>

4 <td>Baby Bear</td>

</tr>

</table>

</div>

</body>

</html>

1 A rule is defined for a table cell The table’s data will be blue, the font size 18

points, and the font family, Verdana Whenever you create a table, each of the table

cells, defined by the <td> tag, will have this style.

2–4 The table data in these cells will take on the style described in line 1 The output

is shown in Figure 14.21

Trang 8

When you create a contextual selector, the last element in the selector list is the one that

is affected by the style when it is used in context of the elements preceding it For example,

if you have a selector list: table td em { color: blue ;}, then the em element, the last in the list,

will be affected by the style only when it is inside a table cell at which point the table cell

will be contain blue italic text This doesn’t define the style for the <td> tag, only the <em>

tag if it is used in the context of <td>; as in <td><em> See Example 14.21

Figure 14.21 A table with stylized cells.

E X A M P L E 1 4 2 1

<html>

<head><title>Contextual Selector</title>

1 table td em { color: blue; /* Table cells take this style */

font-size: 18pt;

font-family: verdana; }

</style>

</head>

2 <h1><em>The Three Bears</em></h1>

<tr>

3 <td><em>Mama Bear</em></td>

</tr>

<tr>

4 <td>Papa Bear</td>

</tr>

<tr>

Trang 9

14.10 Positioning Elements and Layers

One of the most important features of CSS is the ability to position objects on a page, to

size them, and to make them either visible or invisible This feature makes it possible to

5 <td>Baby Bear</td>

</tr>

</table>

</div>

</body>

</html>

1 When a table is defined, the data cells will take on this style only if the <em> tag

is used within the cell See line 3

2 The <em> tag used within this <h1> tag is not affected by the contextual selector

because it is not within a table cell; that is, it is out of context

3 The <em> tag is embedded within a <td> tag The table’s data will follow the style

defined on line 1; it is in context

4 This table cell is not using the <em> tag, so will not be affected by the style rule

on line 1 It can only be affected if in context

5 This table cell will not be affected by the style rule either because it doesn’t use

the <em> tag See Figure 14.22.

Figure 14.22 A table cell is defined by the contextual selector.

Định dạng
Số trang	9
Dung lượng	875,75 KB