Học JavaScript qua ví dụ part 63 pdf

To link the external file to the existing HTML file, a link is created as shown here: The following examples demonstrate the use of external style sheets.. Using an external CSS file ke

Trang 1

14.6 The External Type with a Link

14.6.1 The <link> Tag

In Chapter 1, we talked about the three layers of a Web page: HTML/XHTML, CSS, and

JavaScript The CSS layer can be separated from the HTML document by placing style

sheets in external files In fact, external style sheets are the most powerful type if you

want the style to affect more than one page; in fact, you can use the same style for

hun-dreds, thousands, or millions of pages The file name for the external style sheet has a

.css extension, just as the HTML file has an html or htm extension, and a JavaScript

external file has a js extension

To link the external file to the existing HTML file, a link is created as shown here:

<link rel=stylesheet href="style_file.css" type="text/css">

The following examples demonstrate the use of external style sheets Example 14.11

is the HTML file containing a link to the external file and Example 14.12 is the css file

It contains the style sheet, but notice it does not contain <style></style> tags.

E X A M P L E 1 4 1 1

<html>

<head><title>External Style Sheets</title>

1 <link rel=stylesheet type="text/css"

href="extern.css" media="all">

<! Name of external file is extern.css See Example 14.12 >

2 </head>

3 <body>

<h1><u>External Stylin'</u></h1>

<h2>Paragraph Style Below</h2>

<p>The style defined for this paragraph is found in an external CSS document The filename ends with <em>.css</em> Now

we can apply this style to as many pages as we want to.</p>

<h2>An H2 Element</h2>

<h3>An H3 Element</h3>

<p>This is not a <em>designer's dream style</em>, but it illustrates the power Don't you think so?</p>

</body>

</html>

E X P L A N A T I O N

1 The link tag is opened within the <head> tags of your HTML document The link

tag has a rel attribute that is assigned stylesheet This tells the browser that the link

is going to a style sheet type document The href attribute tells the browser the

name of the CSS file containing the style sheet This is a local file called extern.css

Trang 2

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

2 The <head> tag ends here.

3 In the body of the document, each of the HTML tags will be affected by the style

defined in the external CSS file See Figure 14.13 for output

E X A M P L E 1 4 1 2

(The external extern.css file)

1 body { background-color: pink; }

2 p {

margin-left:20%;

margin-right:20%;

font-family: sans-serif;

font-size: 14

3 }

h1, h2, h3 { text-align: center;

font-family: sans-serif;

color: darkblue }

4 em { color: green;

font-weight: bold }

1 This is the external CSS file that will be linked to the file in Example 14.12 Using

an external CSS file keeps the main file size smaller and allows the style sheet to

be shared by multiple files First use the <link> tag, then the rel attribute tells the

browser that this is a link to a style sheet, the href specifies the location of the CSS

file, and type specifies the type of information that will be linked (i.e., text in this

example) You may also specify a media type If you add media=”all” then all

me-dia types will be included

2 The paragraph <p> style is set to have a margin in 20% from the left and right, the

text in size 14, and font family sans serif

3 The heading levels 1, 2, and 3 styles are set to be centered with a dark blue font,

from the sans serif family

4 The <em> style will be a bold, green font.

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

Trang 3

14.6.2 Importing with @import

You can also import CSS files with the @import rule This rule allows you to import one

external CSS file into another by adding the @import rule in other external CSS files

The format for doing this is:

Figure 14.13 External style sheets.

F O RM A T

@import url(externalfile.css);

E X A M P L E

@import url(http://www.mystyles.com/style.css);

@import url(/stylesheets/.css);

h1 { color: blue }

</style>

Trang 4

Cascading Order. You can import as many files as you want, but keep in mind that

when multiple style sheets are used, the style sheets may conflict over which selector

has control There must be rules that determine what style sheet’s rule has precedence

The order that determines the outcome of the type of conflict is called the cascading

order A full discussion can be found at

http://www.w3.org/TR/CSS2/cascade.html#cascad-ing-order.

14.7 Creating a Style Class

Rather than globally defining a style for an element, you can customize the style by

defining a class The class style can be applied to individual tags when needed The class

name, called the class selector, is preceded by a period and followed by the declaration

enclosed in curly braces

Once you have defined a class, it can be used on any of the HTML elements in the

body of the document as long as that element understands the style you have applied to

it To apply the class, you use the class attribute The class attribute is assigned the name

of the class; for example, for the <p> tag, you would stipulate <p class=name> where

name is the name of the class

F O RM A T

.classname { style rules; }

E X A M P L E

.header { font-family: verdana, helvetica ; }

E X A M P L E 1 4 1 3

<html>

1 <head><title>CSS Class Name</title>

2 <style>

3 p { margin-right: 30%;font-family: arial;

font-size: 16pt;

color:forestgreen; }

4 .bigfont { font-size: x-large; color:darkblue;

font-style:bold;}

5 .teenyfont { font-size:small;

font-style: italic;color:black;}

</style>

</head>

Trang 5

<body>

6 <p>The text in this paragraph is green and the point size

is 16 The font family is <em>arial</em>.</p>

7 <p class="bigfont"> This paragraph has a bigger font and is

dark blue in color.</p>

8 <p>The font style is specified as a class called

<em>.bigfont</em>.</p>

9 <h1 class="bigfont">Testing the Class on an H1 Element</h1>

10 <p class="teenyfont">Is this a small font?"</p>

<p>Let's start a new paragraph This is green with a font size of 16 What style is in effect here?</p>

</body>

</html>

1 The style is defined in the <head> of the document.

2 The CSS starts here

3 A rule is defined for the paragraph (p selector) All paragraphs will have a right

margin, 30% in from both left and right The Arial font will be 12 point and forest

green

4 A class selector called bigfont is defined Class names start with a period When

used on an HTML element, the font will be extra large, dark blue, and bold

5 The class selector called teenyfont is defined All HTML elements that use this

class will have a small, italic, black font

6 The paragraph is styled according to the rule on line 3

7 This paragraph is assigned the bigfont class The text will be in the style defined

for this class on line 4

8 This paragraph reverts to the style rule on line 3

9 The <h1> tag is using the bigfont class defined on line 4.

10 The <p> tag is using the teenyfont class defined on line 5 See Figure 14.14.

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

Trang 6

14.7.1 Styling a Simple Table with Class

A class can be applied to tables as with any other element By default the browser

deter-mines the size of the table cells based on the elements and text they contain and expands

the cells accordingly With images, the edge of the image will be the edge of the cell The

browser will not shrink the image to fit the text, but will stretch the text to fit the image

Text is stretched out until the first line break or until a paragraph ends You can specify

table width with the CSS width property Example 14.14 uses both a table and an image

width class

Figure 14.14 Testing the CSS classes.

E X A M P L E 1 4 1 4

<html>

<head><title>Bengaluru, India</title>

1 <style type="text/css">

2 table, td{ border:groove darkgreen; }

4 .caption { font-size: 8em;font-style:italic; }

</style>

Trang 7

<body>

5 <table border=0 class="size">

6 <tr><td><img src="indiacows.jpg" width="200"

height="150" alt="Cows Rule"></td></tr>

7 <tr><td class="caption">Some cows take a leisurly stroll

down the Jayanagar Block after a morning rain in Bengaluru, India.</td></tr>

</table>

</body>

</html>

1 The CSS style sheet starts here

2 The table and the td elements are given a grooved dark green border.

3 This is a class to define the width of an HTML element

4 This style defines a class called caption defining font size and style of an HTML

element

5 The class attribute of the HTML table defines the width of the table

6 The first row and cell of the table is the image Its border was defined as grooved

and dark green in the CSS on line 2

7 The second row of the table contains a class called “caption” to style the text font

in the cell This cell also uses the style for a grooved, green border The output is

shown in Figure 14.15

Trang 8

14.7.2 Using a Specific Class Selector

In previous examples we have defined a class style that can be used by all HTML

ele-ments The following class can be applied to all HTML elements:

.center {text-align: center;}

With a class selector you can define different styles for a specific HTML element For

example, if you want different styles for just the <p> tag, you can specify a class

descrip-tion by appending a dot to the element followed by the class name:

p.right {text-align: right}

p.center {text-align: center}

/* These classes apply only to the paragraph element */

When the class selector is applied to a style, then you use the class attribute in your

HTML document as follows:

This paragraph will be right-aligned

</p>

This paragraph will be center-aligned

</p>

Note: To apply more than one class per given element, the syntax is:

This is a paragraph

</p>

This paragraph will be styled by a class called “center” and a class “bold”

E X A M P L E 1 4 1 5

<html>

<head>

1 p.normal-cursive {

font-variant: normal;

font-family: cursive }

2 p.small { font-variant: small-caps }

</style>

</head>

3 <p class="normal-cursive">This is a paragraph</p>

Trang 9

1 A specific class selector is defined to describe the style of a paragraph’s font, and

only a paragraph

2 Another class selector is defined for a paragraph’s font

3 Now to use the class with the <p> tag, the class name is specified and the text will

be printed in cursive

4 The class for this paragraph will style the text in small capital letters Output is

shown in Figure 14.16

Figure 14.16 Using the class selector to style a paragraph.

E X A M P L E 1 4 1 6

<html>

<head>

1 ul.disc {list-style-type: disc}

ul.circle {list-style-type: circle}

ul.square {list-style-type: square}

ul.none {list-style-type: none}

</style>

</head>

2 <ul class="disc">

<li>Coffee</li>

</ul>

<ul class="circle">

<li>yellow</li>

Trang 10

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

<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>

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.

Định dạng
Số trang	10
Dung lượng	1 MB