Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P34 ppsx

You can also specify titles for your style sheets using the title attribute, as well as alternative style sheets by setting the rel attribute to "alternative style sheet".. Here's the sy

Trang 1

h2 { font-size: large; font-weight: bold }

In truth, the extension of the file is irrelevant, but the extension .css is the de facto standard for style sheets, so you should probably use it Once you've created the style sheet file, you can include it in your page using the <link> tag, like this:

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

The type attribute is the same as that of the <style> tag The href tag is the same as that of the <a>

tag It can be a relative URL, an absolute URL, or even a fully qualified URL that points to a different server As long as the browser can fetch the file, any URL will work This means that you can just as easily use other people's style sheets as your own, but you probably shouldn't

There's another attribute of the link tag as well: media This enables you to specify different style sheets for different display mediums For example, you can specify one for print, another for screen display, and others for things like aural browsers for use with screen readers Not all browsers support the

different media types, but if your style sheet is specific to a particular medium, you should include it The options are screen, print, projection, aural, braille, tty, tv, and all

You can also specify titles for your style sheets using the title attribute, as well as alternative style sheets by setting the rel attribute to "alternative style sheet" Theoretically, this means that you

could specify multiple style sheets for your page (with the one set to rel="stylesheet" as the preferred style sheet) The browser would then enable the user to select from among them based on the title you provide Unfortunately, none of the major browsers support this behavior

As it is, you can include links to multiple style sheets in your pages, and all the rules will be applied This means that you can create one general style sheet for your entire site, and then another specific to a page or to a section of the site as well

As you can see, the capability to link to external style sheets provides you with a powerful means for managing the look and feel of your site Once you've set up a sitewide style sheet that sets up the basic look-and-feel parameters for your pages, changing things such as the headline font and background color for your pages or other such settings becomes trivial Before CSS, making these kinds of changes required a lot of manual labor or a facility with tools that had search and replace functionality for

multiple files Now it requires quick edits to a single linked style sheet

Trang 2

Selectors

You've already seen one type of selector for CSSelement names Any tag can serve as a CSS selector, and the rules for that selector will be applied to all instances of that tag on the page You can add a rule

to the <b> tag that sets the font weight to normal if you choose to do so, or italicize every paragraph on your page by applying a style to the <p> tag Applying styles to the <body> tag using the body selector enables you to apply pagewide settings However, there are also a number of ways to apply styles on a more granular basis and to apply them across multiple types of elements using a single selector

Let's say that you want all unordered lists, ordered lists, and paragraphs on a page to be displayed

using blue text Rather than writing individual rules for each of these elements, you can write a single rule that applies to all of them Here's the syntax:

p, ol, ul { color: blue }

A comma-separated list indicates that the style rule should apply to all the tags listed The preceding rule is just an easier way to write

p { color: blue }

ol { color: blue }

ul { color: blue }

Contextual Selectors

There are also contextual selectors available These are used to apply styles to elements only when

they're nested within other specified elements Take a look at this rule:

p ol { color: blue }

The fact that I left out the comma indicates that this rule applies only to ol elements that are nested within p elements Let's look at two slightly different rules:

p cite { font-style: italic; font-weight: normal }

li cite { font-style: normal; font-weight: bold }

In this case, <cite> tags that appear within <p> tags will be italicized If a <cite> tag appears inside a list item, the contents will be rendered in boldface Let's add in one more rule:

cite { color: green }

p cite { font-style: italic; font-weight: normal }

li cite { font-style: normal; font-weight: bold }

In this case, we have one rule that applies to all <cite> tags, and the two others that you've already seen In this case, the contents of all <cite> tags will be green, and the appropriately nested <cite> tags

file:///G|/1/0672328860/ch09lev1sec2.html (1 von 3) [19.12.2006 13:49:08]

Trang 3

will take on those styles as well Here's one final example:

cite { color: green }

p cite { font-style: italic; font-weight: normal; color: red }

li cite { font-style: normal; font-weight: bold; color: blue }

In this case, the nested styles override the default style for the <cite> tag The contents of <cite> tags that don't meet the criteria of the nested rules will appear in green The nested rules will override the color specified in the less-specific rule, so for <cite> tags that are inside <p> tags, the contents will be red Inside list items, the contents will be blue

Classes and IDs

Sometimes selecting by tag (even using contextual selectors) isn't specific enough for your needs, and you must create your own classifications for use with CSS There are two attributes supported by all HTML tags: class and id The class attribute is for assigning elements to groups of tags, and the id

attribute is for assigning identifiers to specific elements

To differentiate between classes and regular element names in your rules, you prepend . to the class name So, if you have a tag like this

<div class="important">Some text.</div>

then you write the rule like this

.important { color: red; font-weight: bold; }

Any element with its class set to important will appear in bold red text If you want to give this

treatment to only important <div>s, you can include the element name along with the class name in your rule

div.important { color: red; font-weight: bold; }

p.important { color: blue; font-weight: bold; }

In this case, if a <p> tag is assigned to the important class, the text inside will be blue If a <div> is in the important class, its text will be red You could also rewrite the preceding two rules as follows:

.important { font-weight: bold; }

div.important { color: red; }

p.important { color: blue; }

All members of the important class will be bold and important <div>s will be red, whereas important paragraphs will be blue If you put a list in the important class, the default color would be applied to it Whenever you want to specify styles for one element in a style sheet, assign it an ID As you'll learn later in the book, assigning IDs to elements is also very useful when using JavaScript or dynamic HTML

Trang 4

because doing so lets you write programs that reference individual items specifically For now, though, let's look at how IDs are used with CSS Generally, a page will have only one footer To identify it, use the id attribute:

<div id="footer">

</div>

You can then write CSS rules that apply to that element by referencing the ID Here's an example:

#footer { font-size: small; }

As you can see, when you refer to IDs in your style sheets, you need to prepend a # on the front in

order to distinguish them from class names and element names Note that there's no additional facility for referring to IDs that are associated with particular elements IDs are supposed to be unique, so

there's no need for qualifying them further Finally, there's nothing to say that you can't mix up all of these selectors in one rule, like so:

h1, #headline, heading, div.important { font-size: large; color: green; }

As you can see, I've included several types of selectors in one rule This is perfectly legal if you want to set the same properties for a number of different selectors Classes also work with contextual selectors:

ul li.important { color: red }

In this case, list items in the important class will be red if they occur in an unordered list If they're in an ordered list, the rule will not be applied

Trang 5

Units of Measure

One of the most confusing aspects of CSS is the unit of measure it provides Four types of units can be specified in CSS: length units, percentage units, color units, and URLs In this lesson, we're going to deal mostly with length and percentage units

There are two kinds of length units: absolute and relative Absolute units theoretically correspond to a unit of measure in the real world, such as an inch, a centimeter, or a point Relative units are based on

some more arbitrary unit of measure Table 9.1 contains a full list of length units

Table 9.1 Length Units in CSS

Unit Measurement

em Relative; height of the element's font

ex Relative; height of x character in the element's font

The absolute measurements seem great, except that an inch isn't really an inch when it comes to

measuring things on a screen Given the variety of browser sizes and resolutions supported, the browser doesn't really know how to figure out what an inch is For example, you might have a laptop with a

14.1" display running at 1024 by 768 I might have a 19" CRT running at that same resolution If the browser thinks that one inch is 72 pixels, a headline set to 1in may appear as less than an inch on your monitor or more than an inch on mine Dealing with relative units is much safer

In this lesson, I'm going to use one length unit: px It's my favorite for sizing most things However, other relative units can also be useful For example, if you want paragraphs on your page to appear as double spaced, you can specify them like this:

p { line-height: 2em; }

Percentage units are also extremely common They're written as you'd expect: 200% (with no spaces) The thing to remember with percentages is that they're always relative to something If you set a font size to 200%, it will be double the size of the font that's currently being used If you set a <div>'s width

to 50%, it will be half as wide as the enclosing element (or the browser window, if there's no enclosing element) When you use percentages, always keep in mind what you're talking about a percent of

Trang 6

Units of Measure

Using Percentage Units

When you use percentages as units, bear in mind that the percentage applies not to the

size of the page, but rather to the size of the box that encloses the box to which the style

applies For example, if you have a <div> with its width set to 50% inside a div with its

width set to 500px, the inner <div> will be 250 pixels wide On the other hand, if the outer

<div> were also set to 50%, it would be half as wide as the browser window, and the inner

<div> would be 25% of the width of the browser window

I already discussed units of color back in Lesson 7, "Adding Images, Color, and Backgrounds," so I'll move on to URLs Most of the time, when you use URLs, they're used in the <a> tag or <img> tag In CSS, they're usually included to specify the location of a background image or a bullet image for a list Generally, URLs are specified like this:

url(http://www.example.com/)

Trang 7

Box Properties

In previous lessons, my discussion of cascading style sheets has dealt mostly with properties that can work at a block or a character level, and are designed to change the way text looks There are also a number of properties that pertain to blocks but not characters These properties are used to position elements, control the white space around them, and to apply effects such as borders to them They're

referred to as box properties, because they work on box-shaped regions of the page.

Once you've mastered these properties, you can forget about using tables to lay out a page CSS offers all the capabilities that tables do, with less markup and the capability to maintain the layout in one CSS file rather than on each page of your site

When discussing box properties, I'm going to start off with a humble <div> People who lay out pages using CSS love the <div> tag because it brings absolutely nothing to the table in terms of modifying the appearance of a page It's just a container that you can apply styles to

With box properties, there are general properties that enable you to set specific attributes of a more general property individually, or you can use the general property to set several attributes at once If you want to set different values for each side of the box, you should use the properties that set

individual attributes The CSS specification says that you can set individual values for each side using the general property, but some browsers don't support that usage

Controlling Size

There are two properties for controlling the size of a box element: width and height They enable you to set the size of the box to an absolute size, or if you prefer, to a size relative to the browser window For example, to make the header of your page 100 pixels high and half the width of the browser, you could use the following rule:

#header { width: 50%; height: 100px; }

Unlike tables, which, unless you say differently, are only as large as the widest bit of content, many other block-level elements are as wide as the browser window by default For example, paragraphs and

<div>s are both the full width of the browser window by default If the following text were wrapped in a table, it would be very narrow But inside a regular paragraph, the box containing the text will be as wide as possible unless you specifically indicate that it should have a particular width

<p>one.<br />two.<br />three.<br /></p>

Of course, when you place elements side by side, you can also squeeze them down We'll look at that a bit later

Borders

CSS provides several properties for controlling borders around elements When you worked with tables, you got a taste of borders In the CSS world, you can apply them to any box First, let's look at the

Trang 8

Box Properties

border property by itself:

border: width style color;

When you use the border property by itself, there are three values associated with it (any of which can

be eliminated) The first is the width of the border You can also use any unit of measurement you like

to specify the border width, or if you prefer, you can use thin, medium, or thick The actual width of borders specified using the keywords is entirely dependent upon the user's browser

The next option is style The default here is none for most elements; the other options are dotted,

dashed, solid, double, groove, ridge, inset, and outset Not all browsers support all the border styles

The last option is color As is the case with all properties that accept multiple values, you aren't required

to specify any of them You need specify only the values that you want to change Here are some

examples that use the border property:

Input

.one { border: thin dotted black; }

.two { border: 2px solid blue; }

.three { border: 3px groove red; }

.four { border: thick double #000; }

Figure 9.1 is a screenshot of the previous styles applied to some paragraphs

Output

Figure 9.1 Four usages of the border property.

There are a number of additional properties that can be used to modify the border of the page You can set the styles for each side's border individually using border-top, border-right, border-bottom, and

border-left That enables you to create styles like this:

Trang 9

.one { border-top: thick dotted black;

border-right: thick solid blue;

border-bottom: thick groove red;

border-left: thick double #000; }

This is also useful if you want to create effects like marking quotes with a line down the left margin, like so:

blockquote { border-left: 3px solid red; }

You can see both of these rules in action in Figure 9.2

Figure 9.2 Using directional properties to give individual borders to different

sides of a box.

One thing that's obvious from the two previous screenshots is that there's not much space between the border and the text I'll take care of that when I get to the padding property Another option is to specify each specific property that's built into the composite border property individually These properties are

border-style, border-width, and border-color Here's an example:

p { border-style: solid dashed;

border-width: 2px 4px 6px;

border-color: blue red green black; }

If you supply only one value for the property, it will be applied to all four sides of the box If you supply two values, as I did for the border-style property, the first value will be applied to the top and bottom, and the second will be applied to the left and right side For the border-width property, I supplied three values In this case, the first value is applied to the top, the second to the left and right, and the third to the bottom As you can see, the values are applied to the sides of the box in a clockwise fashion, and if

a value isn't supplied for a particular side, the value assigned to the opposite side is used The last property, border-color, has four values, so the values are applied to all four sides, clockwise The

resulting page appears in Figure 9.3

Trang 10

Box Properties

Figure 9.3 A different way to apply border styles.

There are also four more properties: border-top-width, border-right-width, border-left-width, and

border-bottom-width These properties aren't particularly useful when you can just use border-width to set any or all four at the same time

Margins and Padding

There are two sets of properties used to control white space around boxes: margin properties and

padding properties There's a reason why I discussed the border property before discussing margin and

padding The padding property controls white space inside the border, and the margin property controls the white space between the border and the enclosing block Let's look at an example The web page that follows has one <div> nested within another The outer <div> has a solid black border; the inner

<div> has a dotted black border The page appears in Figure 9.4

Input

<html>

<head>

<title>CSS Example</title>

.outer { border: 2px solid black; }

.inner { border: 2px dotted black;

padding: 0px;

margin: 0px; }

</style>

</head>

<body>

Outer

Friends, Romans, countrymen, lend me your ears;<br />

I come to bury Caesar, not to praise him.<br />

Tiêu đề	Including Style Sheets in a Page
Trường học	Standard University
Chuyên ngành	Web Publishing
Thể loại	Bài viết
Năm xuất bản	2006
Thành phố	City Name

Định dạng
Số trang	10
Dung lượng	153,38 KB