HTML in 10 Steps or Less- P10 docx

Part 9: Cascading Style SheetsTask 73: Writing Style Rules Task 74: Creating an Embedded Style Sheet Task 75: Creating an External Style Sheet Task 76: Defining Style Classes Task 77: De

Trang 1

Providing noframes Content

Frames weren’t initially part of the HTML specification They were intro-duced in Netscape 2.0 and adopted shortly thereafter in Internet Explorer 3.0 Earlier browsers don’t support frames To provide content for these older

browsers, noframes content has been the traditional method of making

frames-based sites backwards-compatible

1. Open the frameset document in your text editor

2. Below the closing </frameset>tag, enter an opening <noframes> tag, as shown in Listing 71-1

<html>

<head>

<title>No Frames</title>

</head>

</frameset>

</html>

Listing 71-1: Start after the closing </frameset> tag

note

• The common practice is to

simply inform the visitors

that they have reached a

frames-based site and

redirect them to another

version of your site that

isn’t frames-based.

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 2

• If you don’t have a copy of

an older browser to test your noframes content with, copy and paste the content into an ordinary document, save it, and test

it that way.

3. Enter any type of text you’d place in the body section of a normal

HTML document, as shown in Listing 71-2

<html>

<head>

<title>No Frames</title>

</head>

</frameset>

<p>Your browser doesn’t support frames.<br>

Don’t panic Simply go <a href=”index-2.html”>here </a>

</p>

</html>

Listing 71-2: Adding text to explain to people what to do if their browsers don’t support frames

4. Close the noframessection with a closing </noframes>tag:

<p>Your browser doesn’t support frames.<br>

Don’t panic Simply go <a href=”index-2.html”>here </a>

</p>

</noframes>

cross-reference

• The likelihood that anyone has a browser so old that it doesn’t support frames is pretty slim But there is a good chance that most folks have Internet Explorer Task 72 covers a frame option that only it can handle: inline frames.

Trang 3

Working with Inline Frames

Inline frames are an invention of Microsoft When rendered, they create a float-ing, scrollable pane within the body of a regular HTML file Microsoft must have figured that since Netscape invented frames, they could do them one better The only problem is that, unlike frames which are supported by virtually all browsers, no one but Internet Explorer supports inline frames Still, developers

do occasionally make use of them For example, when designing for an intranet (a closed group of users, typically within an office, who have access to a private Web server), where the browser being used is identical to all members, taking advan-tage of a proprietary feature isn’t such a risk

1. To insert an inline frame, insert an opening <iframe>tag within the body section of a document

2. Add a srcattribute and set it equal to the pathname of the document you want displayed within the frame:

3. Add a name attribute to allow the inline frame to be targeted and set

it equal to an appropriate value:

4. To specify the inline frame’s dimensions, include widthand height attributes and set them equal to pixel or percentage values:

height=”200”>

5. To control the margins inside the inline frame, add marginwidth and marginheightattributes as you would to a standard

<frame>tag:

height=”200” marginwidth=”25” marginheight=”25”>

6. To float the inline frame to the left or right, similar to an image or table, add an alignattribute and set it equal to leftor right:

height=”200” marginwidth=”25” marginheight=”25”

align=”left”>

7. Follow the opening <iframe>tag with some form of instructional content you want rendered by browsers that don’t support this tag

notes

• An inline frame aligned to

the left makes any body

text on the same line wrap

down the right side If it’s

aligned to the right, text

wraps down the left side.

• Any content placed

between the opening and

closing <iframe> tags is

rendered by non-Microsoft

browsers.

Trang 4

• See Part 3 to learn about aligning images Part 6 covers aligning tables.

8. Insert a closing </iframe>tag to complete the inline frame Listing

72-1 shows a simple inline frame document Figure 72-1 shows the effect in Internet Explorer

<html>

<head>

<title>Inline Frames</title>

</head>

width=”50%” height=”50%” align=”left”>

<a href=”http://www.highstrungproductions.com”> Go here!

</a>

</iframe>

<p>

<b>This is one of my favorite web sites It hasn’t been updated in years </b></font></p>

</body>

</html>

Listing 72-1: A simple inline frame document

Figure 72-1:Showing a simple inline frame in Internet Explorer

Trang 6

Part 9: Cascading Style Sheets

Task 73: Writing Style Rules Task 74: Creating an Embedded Style Sheet Task 75: Creating an External Style Sheet Task 76: Defining Style Classes

Task 77: Defining the font-family Property Task 78: Defining the font-size Property with Keywords Task 79: Defining the font-size Property with Lengths Task 80: Working with Font Styling

Task 81: Using the Font Property Shorthand Task 82: Working with Foreground and Background Colors Task 83: Controlling Character and Word Spacing

Task 84: Controlling Line Spacing and Vertical Alignment Task 85: Defining the text-decoration Property

Task 86: Defining the text-transform Property Task 87: Controlling Text Alignment and Indentation

Task 89: Defining CSS Padding Properties Task 90: Defining Border Style Properties Task 91: Defining Border Width Properties Task 92: Defining Border Color Properties Task 93: Using the Border Property Shorthand Task 94: Working with Margin Properties

Task 96: Working with the float Property Task 97: Controlling List-Item Bullet Styles Task 98: Controlling List-Item Number Styles Task 99: Creating Layers with Absolute Positions Task 100: Creating Layers with Relative Positions Task 101: Defining a Layer’s Clipping Area

Trang 7

Writing Style Rules

To quote its creators, “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.” The purpose is

to separate structure from style, leaving HTML to deal with the former while CSS takes over the latter With the birth of CSS, any HTML markup that deals

purely with how things should look is deprecated (no longer approved of) Instead,

CSS should be used CSS’s syntax is slightly different from HTML Angle brack-ets, equal signs, and quotation marks disappear in favor of curly braces, colons,

and semicolons Where HTML uses tags and attributes, CSS rules use selectors (the element that the style defines), selectors have declarations (which contain

properties), and properties are assigned values (see Figure 73-1)

Figure 73-1:Anatomy of a CSS style rule

1. Define a selector for the style rule

2. Follow the selector with an opening curly brace

3. Enter a property name, followed by a colon

4. Follow the colon with a space, supply a value for the property, and conclude the property/value pair with a semicolon

5. Move to a new line, and enter the second property/value pair

Conclude each pair with a semicolon

6. When the declaration contains all the properties you want to add, end the declaration with a closing curly brace

Selector Declaration

note

• Value types vary with

the property See our

Web site at www.wiley

.com/compbooks/

10simplestepsorless

for more information.

Trang 8

• You can see a list of CSS property names and value types on our Web site, www wiley.com/compbooks/ 10simplestepsorless.

• You can embed style defini-tions in the head section of

an HTML document (see Task 74), place them in their own CSS document and link to them (see Task 75), or define them inline, using the style attribute, as shown in Step 7.

Listing 73-1 shows a style rule for the <p>tag

p { font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #000000 }

Listing 73-1: A style rule with three defined properties

7. To assign a single declaration to a series of selectors, simply enter the

selectors as a comma-separated list, as shown here:

h1, h2, h3 { font-family: Arial, Helvetica, sans-serif }

8. To set selectors so that they only affect a tag when it appears under

specific circumstances, separate a number of selectors with a space

For example:

h1 b { color: red }

This type of style definition (called a descendant style) tells the browser

only to apply this style to bold text used with level-1 headings

9. To use CSS syntax within the flow of an HTML document, add a

style attribute to the tag you want to affect and set it equal to an appropriate series of property/value pairs, each separated by semi-colons, as shown in Listing 73-2

Listing 73-2: CSS syntax applied inline to a paragraph tag

Trang 9

Creating an Embedded Style Sheet

By embedding a style sheet we mean placing CSS code within the HTML document itself The code is written within a style element (defined by opening and closing <style>tags) located in the head section of the document (defined by opening and closing <head>tags) Embedded style sheets affect only the specific HTML document in which the CSS code resides

1. In the head section of an HTML document, enter an opening

<style>tag

2. Define a typeattribute for the <style>tag and set it equal to text/css

3. Insert one or two new lines and enter an opening comment tag, so that your head section resembles Listing 74-1

<head>

<title>Embedded Styles</title>

<! </head>

Listing 74-1: The opening <style> tag

4. Insert another line or two and begin entering selectors and declara-tions, as described in Task 73

5. To close the embedded style sheet, enter a closing comment tag, followed by a closing </style>tag

caution

• Each declaration must be

encapsulated within

open-ing and closopen-ing curly

braces Each property/

value pair must be

sepa-rated by semicolons.

Trang 10

• To define an identical style for a series of selectors, separate each selector by a comma For example:

p, td { font-family: Verdana }

To create something called

a contextual selector, enter

a series of selectors in a row, separated only by spaces, then follow it with

a declaration, like so:

td p { font-family: Verdana }

This creates a style for paragraphs only when they occur inside a table cell.

Listing 74-2 shows a completed embedded style sheet

<head>

<title>Embedded Style Sheets</title>

<!

p { font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #000000; }

h1 { font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 22px;

color: #000000; }

font-size: 18px;

color: #000000; }

font-size: 14px;

color: #000000; }

>

</style>

</head>

Listing 74-2: An embedded style sheet

cross-reference

• An embedded style sheet only defines styles for the specific document You can use an external style sheet

to attach styles to multiple documents The advantage

of this approach is that you only need to edit a single style sheet document to affect style changes across all linked documents (see Task 75).

Trang 11

Creating an External Style Sheet

External style sheets are separate documents containing nothing but style rules You attach these style sheets to HTML documents using a link reference, effectively allowing you to attach a single style sheet document to as many Web pages as you like This way you only need to change one style sheet document to update the formatting of elements across every page to which the style sheet document is attached

1. Open a new blank document in your editor and enter the styles you wish to define Listing 75-1 provides an example

body { color: #000000;

background: #FFFFFF;

margin-left: 100px;

margin-right: 100px;

margin-top: 100px }

h1 { font-family: Arial, Helvetica, sans-serif;

font-size: 20px;

font-weight: bold }

p { font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

text-align: Justify }

Listing 75-1: A sample style sheet

2. Save the file with a css extension within the directory you’re using for your local site files (see Figure 75-1)

Figure 75-1:Saving the style sheet

3. Open the HTML documents to which you want to attach the style sheet Within the head section of each document, insert a <link>

tag with a relattribute set equal to stylesheet, and a type attribute set equal to text/css

Trang 12

• As these code samples indicate, CSS provides many different properties that HTML doesn’t dupli-cate To learn more about margin properties, see Task 94 To learn more about font properties, see Tasks 77–81 To learn more about background proper-ties, see Tasks 82 and 88.

4. Add a final attribute to the <link>tag, href, and set it equal to the

appropriate pathname of the css file you saved in Step 2 Listing 75-2 shows the complete code and Figure 75-2 shows the document rendered in a browser

<html>

<head>

<title>External Style Sheets</title>

href=”10_steps.css” />

</head>

<body>

<h1>Creating an External Style Sheet</h1>

<p>External style sheets are separate documents containing nothing but style rules These types of style sheets are attached to HTML documents using a link reference, effectively allowing you to attach a single style sheet document to as many web pages as you like Using this approach you only need to make change to the individual style sheet document to update the formatting of elements across every page to which the style sheet document is attached.</p>

</body>

</html>

Listing 75-1: A sample HTML document containing a link reference to an external style sheet

Figure 75-2:An HTML page whose formatting is defined solely in an external style sheet

tips

• When you develop a Web site, structure your local files as they would appear

on the Web server This allows you to assign rela-tive pathnames when creating hyperlinks and other file references within your HTML code.

• The rel attribute stands for “relationship.” The

text/css value of the type attribute indicates that the code is text-based and written in CSS.

Định dạng
Số trang	20
Dung lượng	566,16 KB