Learning Web Design Third Edition- P29 pot

padding-top, padding-right, padding-bottom, padding-left Values: length measurement | percentage | auto | inherit Default: auto Applies to: all elements Inherits: no padding Valu

Trang 1

scroll

When scroll is specified, scrollbars are added to the element box to let users scroll through the content Be aware that when you set the value to

scroll, the scrollbars will always be there, even if the content fits in the specified height just fine

auto

The auto value allows the browser to decide how to handle overflow In most cases, scrollbars are added only when the content doesn’t fit and they are needed

Padding

Padding is the space between the content area and the border (or the place the border would be if one isn’t specified) I find it helpful to add a little padding to elements when using a background color or a border It gives the content a little breathing room, and prevents the border or edge of the back-ground from bumping right up against the text

You can add padding to the individual sides of any element (block-level or inline) There is also a shorthand padding property that lets you add padding

on all sides at once

padding-top, padding-right, padding-bottom, padding-left

Values: length measurement | percentage | auto | inherit

Default: auto

Applies to: all elements

Inherits: no

padding

Inherits: no

With the padding-top, padding-right, padding-bottom, and padding-left properties, you can specify an amount of padding for each side of an element

as shown in this example and Figure 14-5 (note that I’ve also added a back-ground color to make the edges of the padding area apparent)

1em

Figure 14-5. Adding padding around an element.

blockquote {

padding-top: 1em;

padding-right: 3em;

padding-bottom: 1em;

padding-left: 3em;

background-color: #D098D4;

}

Trang 2

You can specify padding in any of the CSS length units (see the At a Glance

sidebar for a refresher) or as a percentage of the width of the parent element

Yes, the width is used as the basis even for top and bottom padding, and if the

width of the parent element should change, so will the padding values on all

sides of the child element

The shorthand padding property

As an alternative to setting padding one side at a time, you can use the

short-hand padding property to add padding all around the element The syntax is

kind of interesting; you can specify four, three, two, or one value for a single

padding property Let’s see how that works, starting with four values

When you supply four padding values, they are applied to each side in

clockwise order, starting at the top Some people use the mnemonic device

“TRouBLe” for the order Top, Right, Bottom, Left

{ padding: top right bottom left; }

Using the padding property, we could reproduce the padding specified with

the four individual properties in the previous example like this:

blockquote {

padding: 1em 3em 1em 3em;

}

If the left and right padding are the same, you can shorten it by supplying

only three values The value for “right” (the second value in the string) will be

mirrored and used for “left” as well It is as though the browser assumes “left”

value is missing, so it just uses the “right” value on both sides The syntax for

three values is as follows:

{ padding: top right/left bottom; }

This rule would be equivalent to the previous example because the padding

on the left and right edges of the element should be set to 3em

blockquote {

padding: 1em 3em 1em;

}

Continuing with this pattern, if you provide only two values, the first one is

used for the top and the bottom edges, and the second one is used for the left

and right edges:

{ padding: top/bottom right/left; }

Again, the same effect achieved by the previous two examples could be

accomplished with this rule

blockquote {

padding: 1em 3em;

}

The CSS units of measurement are:

Relative units:

em Em = font size

ex Ex = height of “x”

px Pixel

Absolute units:

pt Point

in Inches

mm Millimeters

cm Centimeters

A t A G l A n c e

The CSS units of measurement are:

Relative units:

em Em = font size

ex Ex = height of “x”

px Pixel

Absolute units:

pt Point

in Inches

mm Millimeters

cm Centimeters

Shorthand Values

1 value

padding: 10px;

Applied to all sides.

2 values

padding: 10px 6px;

First is top and bottom;

Second is left and right.

3 values

padding: 10px 6px 4px;

First is top;

Second is left and right;

Third is bottom.

4 values

padding: 10px 6px 4px 10px;

Applied clockwise to top, right, bottom, and left edges consecutively (TRBL).

A t A G l A n c e Shorthand Values

1 value

padding: 10px;

Applied to all sides.

2 values

First is top and bottom;

Second is left and right.

3 values

padding: 10px 6px 4px;

First is top;

Second is left and right;

Third is bottom.

4 values

Applied clockwise to top, right, bottom, and left edges consecutively (TRBL).

Trang 3

Note that all of the previous examples have the same visual effect as shown

in Figure 14-5 Finally, if you provide just one value, it will be applied to all four sides of the element This declaration applies 15 pixels of padding on all sides of a div

element

div#announcement { padding: 15px;

border: 1px solid;

} Padding doesn’t need to be so conservative or symmetrical You can use pad-ding to dramatic effect for pushing content around inside its own border or colored background The examples in Figure 14-6 are a little more “out there” and may give you a different perspective on how padding can be used

padding: 10px 33%;

padding: 10px 10px 10px 50%;

Figure 14-6 Extreme padding.

padding: 10px 33%;

padding: 10px 10px 10px 50%;

Figure 14-6 Extreme padding.

exercise 14-1 | Adding a little padding

In this exercise, we’ll use basic box properties to improve the appearance of a fictional shopping site, JenWARE.com I’ve given you a big headstart by marking up the source document and creating a style sheet that handles text formatting and

backgrounds The document, jenware.html, is available in the materials directory

(www.learningwebdesign.com/materials)

Figure 14-7 shows before and after shots of the JenWARE home page It’s going to take a few steps to get this page into presentable shape, and padding is just the beginning.

Figure 14-7 Before and after shots of the JenWARE home page.

Trang 4

Borders

A border is simply a line drawn around the content area and its (optional)

padding Thankfully, it doesn’t have to be as boring as that last sentence

makes it sound You can choose from eight border styles and make them any

width and color you like You can apply the border all around the element or

just a particular side or sides You can even apply different border styles to

sides of the same element We’ll start our border exploration with the various

border styles

Border style

The style is the most important of the border properties because, according

to the CSS specification, if there is no border style specified, the border does

Start by opening jenware.com in a browser and a text editor to see what you’ve

got to work with The document has been divided into three div elements

(“intro,” “testimonials,” and “products”) Background colors have been added to the

body, testimonials, and products sections There is also a horizontally repeating

background image along the top of the body that creates the gradient (color fade)

at the top of the page, and an exclamation point image in the top-left corner of

the testimonials section The remaining rules are for formatting text.

The first thing we’ll do is add padding to the “products” div Two ems of padding

all around ought to be fine Find the #products selector and add the padding

declaration.

#products {

padding: 2em;

background-color: #FFF;

line-height: 2em;

}

Next, we’ll get a little fancier with the “testimonials” section I want to clear some

space in the left side of the div so that my nifty exclamation point background

image is visible There are several approaches to applying different padding

amounts to each side, but I’m going to do it in a way that gives you practice at

deliberately overriding earlier declarations.

Use the padding shorthand property to add 1 em of padding on all sides of the

testimonials div Then write a second declaration that adds 60 pixels of padding

to the left side only Because the padding-left declaration comes second, it will

override the 1em setting applied with the padding property.

#testimonials {

padding: 1em;

padding-left: 60px;

background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left

top;

line-height: 1.2em;

}

Save your work and look at it in the browser The testimonials and product

descriptions should look a little more comfortable in their boxes Figure 14-8

highlights the padding additions.

1.

2.

3.

4.

1em 60px

1em 2em

2em

Figure 14-8. The pink area indicates padding added to the testimonials section Blue indicates the products section padding.

1em 60px

1em 2em

2em

Figure 14-8. The pink area indicates padding added to the testimonials section Blue indicates the products section padding.

Trang 5

not exist In other words, you must always declare the style of the border, or the other border properties will be ignored

Border styles can be applied one side at a time or by using the shorthand

border-style property

border-top-style, border-right-style, border-bottom-style, border-left-style

Default: none

Inherits: no

border-style

Default: none

Inherits: no

The value of the border-style properties is one of nine keywords describing the available border styles, as shown in Figure 14-9

Figure 14-9. The available border styles (shown at the default medium width)

You can use the side-specific border style properties (border-top-style,

border-right-style, border-bottom-style, and border-left-style) to apply

a style to one side of the element If you do not specify a width, the default medium width will be used If there is no color specified, the border uses the foreground color of the element (same as the text)

In the following example, I’ve applied a different style to each side of an ele-ment to show the single-side border properties in action (Figure 14-10)

WARNING

There is a bug in Internet Explorer 6 for

Windows that causes borders specified as

dotted to render as dashed.

WARNING

There is a bug in Internet Explorer 6 for

Windows that causes borders specified as

dotted to render as dashed.

Trang 6

div#silly {

border-top-style: solid;

border-right-style: dashed;

border-bottom-style: double;

border-left-style: dotted;

width: 300px;

height: 100px;}

The border-style shorthand property works on the clockwise (TRouBLe)

system described for padding earlier You can supply four values for all four

sides or fewer values when the left/right and top/bottom borders are the

same The silly border effect in the previous example could also be specified

using the border-style property as shown here, and the result would be the

same as shown in Figure 14-10

border-style: solid dashed double dotted;

Border width (thickness)

Use one of the border width properties to specify the thickness of the border

Once again, you can target each side of the element with a single-side

prop-erty, or specify several sides at once in clockwise order with the shorthand

border-width property

border-top-width, border-right-width,

border-bottom-width, border-left-width

Values: length units | thin | medium | thick | inherit

Default: medium

Inherits: no

border-width

Values: length units | thin | medium | thick | inherit

Default: medium

Inherits: no

The most common way to specify the width of borders is using a pixel

mea-surement; however, you can also specify one of the keywords (thin, medium,

or thick) and leave the rendering up to the browser

I’ve included a mix of values in this example (Figure 14-11) Notice that I’ve

also included the border-style property because if I didn’t, no border would

render at all

div#help {

border-top-width: thin;

border-right-width: medium;

border-bottom-width: thick;

border-left-width: 12px;

border-style: solid;

width: 300px;

height: 100px; }

Figure 14-10. Border styles applied to individual sides of an element. Figure 14-10. individual sides of an element. Border styles applied to

Trang 7

or div#help {

border-width: thin medium thick 12px;

width: 300px;

height: 100px; }

12px

thin

thick

medium

Figure 14-11. Specifying the width of borders.

Border color

Border colors are specified in the same way: using the side-specific properties

or the border-color shorthand property When you specify a border color, it overrides the foreground color as set by the color property for the element

border-top-color, border-right-color, border-bottom-color, border-left-color

Values: color name or RGB value | transparent | inherit

Default: the value of the color property for the element

Inherits: no

border-color

Values: color name or RGB value | transparent | inherit

Default: the value of the color property for the element

Inherits: no

You know all about specifying color values, and you should be getting used

to the shorthand properties as well, so I’ll keep this example short and sweet (Figure 14-12) Here, I’ve provided two values for the shorthand border-color

property to make the top and bottom of a div maroon and the left and right sides aqua

div#special { border-color: maroon aqua;

border-width: 6px;

width: 300px;

height: 100px;

}

Note

CSS2 added the transparent keyword

value for border colors that allows

the background of the parent to show

through the border, yet holds the width

of the border as specified This may be

useful when creating rollover (:hover)

effects with CSS because the space where

the border will appear is maintained

when the mouse is not over the element.

Unfortunately, the transparent value

is not supported by Internet Explorer

for Windows (versions 6 and earlier)

Support in IE7 is not yet documented

as of this writing, so you’ll have to test it

out yourself.

Note

CSS2 added the transparent keyword

value for border colors that allows

the background of the parent to show

through the border, yet holds the width

of the border as specified This may be

useful when creating rollover (:hover)

effects with CSS because the space where

the border will appear is maintained

when the mouse is not over the element.

Unfortunately, the transparent value

is not supported by Internet Explorer

for Windows (versions 6 and earlier)

Support in IE7 is not yet documented

as of this writing, so you’ll have to test it

out yourself.

Trang 8

Figure 14-12. Specifying the color of borders.

Combining style, width, and color

The authors of CSS didn’t skimp when it came to border shortcuts They also

created properties for providing style, width, and color values in one

declara-tion Again, you can specify the appearance of specific sides, or use the border

property to change all four sides at once

border-top, border-right, border-bottom, border-left

Values: border-style border-width border-color or inherit

Default: defaults for each property

Inherits: no

border

Values: border-style border-width border-color or inherit

Default: defaults for each property

Inherits: no

The values for border and the side-specific border properties may include

style, width, and color values in any order You do not need to declare all

three, but keep in mind that if the border style value is omitted, no border

will render

The border shorthand property works a bit differently than the other

short-hand properties that we covered in that it takes one set of values and always

applies them to all four sides of the element In other words, it does not use the

clockwise, “TRBL” system that we’ve seen with other shorthand properties

Here is a smattering of valid border shortcut examples to get an idea for how

they work

h1 { border-left: red 5em solid; } left border only

h2 { border-bottom: 1px solid; } bottom border only

p.example { border: 2px dotted #663; } all four sides

Now it is time to try your hand at borders Exercise 14-2 will not only give you

some practice, but it should also give you some ideas on the ways borders can

be used to add graphic interest to CSS-based page designs

Trang 9

exercise 14-2 | Border tricks

In this exercise, we’ll have some fun with borders on the JenWARE home page In addition to putting subtle borders around content sections on the page, we’ll use borders to beef up the product headlines and as an alternative to underlines under links.

Open jenware.html in a text editor if it isn’t already We’ll start simple by using the

shorthand border property to add an orange (#F26521) dashed rule around the testimonials section Add the new declaration to the rule for the “testimonials” div.

#testimonials {

border: 1px dashed #F26521;

padding: 1em;

padding-left: 60px;

background: #FFBC53 url(images/ex-circle-corner.gif) no-repeat left top;

line-height: 1.2em;

}

Next, add a double rule around the “products” area that is an even lighter orange (#FFBC53) so as not to call too much attention to itself.

#products {

border: double #FFBC53;

padding: 2em;

background-color: #FFF;

line-height: 2em;

}

Just for fun (and practice), we’ll add decorative borders on two sides of the headlines in the products section I want the borders to be the same color as the text, so we don’t need to specify the border-color Find the existing rule for h2 elements in the “products” div, and add a declaration that adds a 1-pixel solid rule on the top of the headline Add another declaration that adds a thicker, 3-pixel solid rule on the left side Finally, to prevent the text from bumping into that left border, we can add a little bit of padding (1em) to the left of the headline content.

#products h2 {

border-top: 1px solid;

border-left: 3px solid;

padding-left: 1em;

font-size: 1.2em;

color: #921A66;

}

The last thing we’ll do is replace the standard text underline under links with a decorative bottom border

You will find that there are already rules in the style sheet for changing the colors

of the four link states Start by turning the underline off for all of the link states by setting the text-decoration to none in each of the rules.

text-decoration: none;

Next, add a 1-pixel dotted border to the bottom edge of each state by adding this declaration to each link rule:

border-bottom: 1px dotted;

1.

2.

3.

4.

Subtle Outlines

Keeping the color of the rule close

to the background color and

keeping the width of the rule quite

thin, we can achieve a very subtle

effect, creating a texture more than a

strong outline

D e S I G n t I P

Subtle Outlines

Keeping the color of the rule close

to the background color and

keeping the width of the rule quite

thin, we can achieve a very subtle

effect, creating a texture more than a

strong outline

Bottom Borders

Instead of

Underlines

Turning off link underlines and

replacing them with a custom

bottom border is a common design

technique in modern web design

It lightens the look of links while

still making them stand out from

ordinary text.

Bottom Borders

Instead of

Underlines

Turning off link underlines and

replacing them with a custom

bottom border is a common design

technique in modern web design

It lightens the look of links while

still making them stand out from

ordinary text.

Note

Internet Explorer 6 users will see dashed

borders instead of dotted borders under

links due to buggy support for the dotted

keyword.

Note

Internet Explorer 6 users will see dashed

borders instead of dotted borders under

links due to buggy support for the dotted

keyword.

Trang 10

Margins

The last remaining component of an element is its margin, which is an

optional amount of space that you can add on the outside of the border

Margins keep elements from bumping into one another or the edge of the

browser window You can even use margins to make space for another column

of content (we’ll see how that works in Chapter 16, Page Layout with CSS) In

this way, margins are an important tool in CSS-based page layout

The side-specific and shorthand margin properties work much like the

pad-ding properties we’ve looked at already, however, margins have some special

behaviors to be aware of

margin-top, margin-right, margin-bottom, margin-left

Inherits: no

Notice that because we want the border to have the same color as the links, we do

not need to specify a color However, if you try this on your own pages, you can easily

change the color and style of the bottom border.

As is often the case when you add a border to an element, it is a good idea to also

add a little padding to keep things from bumping together Add some padding to

the bottom edges only, like so:

I’m noticing that there are a lot of redundant declarations here, and

although it isn’t necessary, let’s take the time to condense our style

sheet by grouping the selectors for these underline effects, then use

separate rules to change only the colors (and background for the :hover

state) The final links section of the style sheet should look like this:

a:link, a:visited, a:hover, a:active {

text-decoration: none;

border-bottom: 1px dotted;

}

a:link, a:active {

color: #CC0000;

}

a:visited {

color: #921A66;

}

a:hover {

background-color: #FCF191;

color: #921A66;

}

See Figure 14-3 for what the page looks like

Figure 14-13. The results of our border additions

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