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

ptg 550 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.5 Types of Style Sheets There are several ways to define style sheets within a document: 1. Embedded—The style is defined within the <style> tags for the HTML document. 2. Inline—The style is defined for a specific HTML element. 3. External—The style is defined in an external file. 14.5.1 The Embedded Style Sheet and the <style> Tag A style sheet that is created with the HTML <style></style> tags right in the current document is called an embedded style sheet. The <style> Tag. The <style></style> tags were introduced into HTML to allow the style sheets to be inserted right into an HTML document. They are used to create a set of rules to define the style of an HTML element(s). The <style></style> tags are placed between the <head></head> tags in the document, as shown here: <html><title>CSS Example</title> <head> <style> h1 { color: blue ; } </style> </head> The type Attribute. Because it is possible to have more than one style sheet language, you can tell the browser what type of style sheet you are using with the type attribute of the HTML <style> tag. When the browser loads the page, it will ignore the style sheet if it doesn’t recognize the language; otherwise it will read the style sheet. The following example specifies that the type is text/css; that is, text and CSS. FORMAT <style type="style sheet language"> Example: <style type="text/css"> From the Library of WoweBook.Com ptg 14.5 Types of Style Sheets 551 EXAMPLE 14.9 <html> <head><title>Cascading Style Sheets</title> 1 <style type="text/css"> <! 2 body { background-color: lightblue; } 3 p { background:yellow; text-indent:5%; margin-left: 20%; margin-right: 20%; border-width:10px; border-style:groove; padding: 15px; font-family: times,arial; font-size:150%; font-weight:900 } 4 h1, h2, h3 { text-align: center; background:blue; border-width:5px; border-style:solid; border-color:black; margin-left:20%;margin-right:20%; font-family:courier, arial; font-weight:900; color: white; } 5 h2,h3 { font-size:24; } 6 em { color: green;font-weight: bold } > 7 </style> </head> <body> 8 <div align="center"><h1>Stylin' Web Page</h1></div> 9 <p>HTML by itself doesn't give you much other than structure in a page and there's no guarantee that every browser out there will render the tags in the same way. So along came style sheets. Style sheets enhance HTML as a word processor enhances plain text. <p>But no guarantees what a browser might do with a style sheet, any more than what a stylist might do to your hair, but we can hope for the best. 10 <h2><center>An H2 Element</center></h2> <h3><center>An H3 Element</center></h3> 11 <p>This is not a <em>designer's dream style</em>, but it illustrates the power.</p> </body> </html> From the Library of WoweBook.Com ptg 552 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXPLANATION 1 The HTML <style> tag belongs within the <head></head> tags. The is the start of an embedded CSS. 2 A rule is defined for the HTML body element. The background color of the document will be light blue. 3 A rule is defined for the HTML p (paragraph) element. The left and right margins are set at 20%, meaning that they will be moved inward 20% from their respective edges. They will be surrounded by a grooved border, with the text given a 15-pixel size padding. The font is Times or Arial (whichever works on your browser), point size 150% bigger than its default, and weight 900 is the boldest of the bold. 4 A rule is defined for a group of selectors (heading levels h1, h2, and h3). They will be centered on the page, and the text will be white against a blue bordered background in a Courier or Arial font. 5 The rule for the <h2> and <h3> tags sets the font size to 24 points. 6 A rule is defined for an em element. Text will be green and bold. 7 This marks the end of the HTML header that encloses the style sheet. 8 As shown in the output (see Figure 14.11), the heading level is displayed according to the style defined in the style sheet, line 4. 9 This paragraph is displayed according to the rule set in the style sheet, line 3. No- tice how both the left and right margins have moved toward the center. 10 The heading level is displayed according to the rule set in the style sheet, lines 4 and 5, and the first paragraph is indented. 11 The <em> tag is embedded within the <p> tag. It inherits from the <p> tag every- thing but the font color and weight. These paragraph properties were overridden in the style sheet defined on line 6 for the em element. From the Library of WoweBook.Com ptg 14.5 Types of Style Sheets 553 14.5.2 The Inline Style and the <style> Attribute Inline style sheets are also embedded within an HTML document, but are assigned as an attribute of the <style> tag in the body of the document and are useful for overriding an already existing style for a particular element in a linked style sheet. On the negative side, they have to be redefined for any element that requires that style, element by element. For example, if the h1 element has been defined to be blue and you want to temporarily change it to red, you can define the style as an attribute of the style tag for that element: <h1 style= "color: red; "> This is red text</h1> Figure 14.11 HTML and CSS—An embedded style sheet. EXAMPLE 14.10 <html> <head><title>Inline Style Sheets</title> 1 <style type="text/css"> 2 body { background-color: orange; color:darkblue; /* color of text */ } Continues Left Margin Indent Right Margin From the Library of WoweBook.Com ptg 554 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript </style> </head> <body> 3 <h1 style="color:darkred; text-align:center; text-decoration:underline;">Inline Stylin'</h1> 4 <p style="color:black; background:white; font-family:sans-serif;font-size:large"> This paragraph uses an inline style. As soon as another paragraph is started, the style will revert back to its default. 5 <p> This paragraph has reverted back to its default style, and so has the following heading.</p> <h1>Default heading</h1> </body> </html> EXPLANATION 1 A CSS starts here in the head of the document. 2 The background color is set to orange and the color of the font is set to dark blue. 3 This h1 uses an inline style, an attribute of the <h1> tag and effective for this heading only. The color will be red, the text centered and underlined. 4 This is an inline style for the paragraph tag. It is an attribute of the <p> tag and is only good for this paragraph. The text of the paragraph will be black, the background color of the paragraph will be white, and the font family, sans serif, large. The next time a <p> tag is used, the style will revert to its former style. 5 This paragraph has reverted to its former style. See Figure 14.12. Figure 14.12 Inline styles are temporary. EXAMPLE 14.10 (CONTINUED) From the Library of WoweBook.Com ptg 14.6 The External Type with a Link 555 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. EXAMPLE 14.11 <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> EXPLANATION 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. If necessary, use a complete path to the file. Continues From the Library of WoweBook.Com . ptg 550 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript 14.5 Types of Style Sheets There are several ways to define style sheets within a document: 1 Library of WoweBook.Com ptg 552 Chapter 14 • Introduction to CSS (Cascading Style Sheets) with JavaScript EXPLANATION 1 The HTML <style> tag belongs within the <head></head>. tag in the body of the document and are useful for overriding an already existing style for a particular element in a linked style sheet. On the negative side, they have to be redefined for