HTML cơ bản - p 18 pps
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (831.14 KB, 10 trang )
ptg
154 Chapter 3: Elements of Style
MARGINS AND PADDING
Most HTML elements are rendered with some amount of space between
them. For elements without a border, this space is composed of margin and
padding on each of the element’s four sides. For elements with a border, the
margin is the amount of space on the outside of the borders, and the pad-
ding is the amount of space on the inside of the border. Both the
margin and
padding properties can take any size value, including a percentage value and
the keyword auto. A margin value can be negative and will cause an element’s
position to be shied, possibly to overlap another element. A negative padding
value is eectively taken as 0. It will not cause the content to be shied into the
border or margin areas.
Example 3.13 is an HTML page with three paragraphs, each one having
dierent margin and padding values. e rst paragraph has a 0 margin and
2 em of padding. e third paragraph reverses that with a 2 em margin and
0 padding. e paragraph in the middle has 1 em each of margin and pad-
ding. e text is from a children’s story by the English mathematician Charles
Lutwidge Dodgson.
4
All body elements are given a light gray background to
illustrate the eects. Figure 3.13 shows how the HTML appears in a typical
browser.
Example 3.13: Use of margin and padding for block elements
<!DOCTYPE html>
<html>
<head>
<title>Example 3.13</title>
<style type="text/css">
body * { font-family: Comic Sans MS,cursive; background-color: #ccc; }
#p1 { margin: 0em; padding: 2em; }
#p2 { margin: 1em; padding: 1em; }
#p3 { margin: 2em; padding: 0em; }
</style>
</head>
<body>
<p id="p1">In a minute or two the Caterpillar took the hookah out of
its mouth and yawned once or twice, and shook itself. </p>
4. Writing under the pseudonym Lewis Carroll in Alice’s Adventures in Wonderland.
From the Library of Wow! eBook
ptg
Box Properties 155
<p id="p2">Then it got down off the mushroom, and crawled away in the
grass, merely remarking as it went,</p>
<p id="p3">"One side will make you grow taller, and the other side will
make you grow shorter."</p>
</body>
</html>
Figure 3.13: An element with different amounts of margin and padding
Notice that there are a few pixels of space between the rst paragraph,
which has 0 margins, and the edges of the browser’s window. Where does this
space come from? A bit of experimentation shows that this space is the body
element’s margin! is is a bit illogical. You might expect the body element
to have some amount of padding so that content doesn’t mash up against the
window’s edges, but it should not need any margin to separate itself from
other content elements, because there are none. e body element does, in fact,
have a parent element, the
html element, that can be given margins, padding,
borders, and background that will be recognized by most browsers. However,
how browsers should behave at the extreme margins is not well dened. Web
developers should avoid assigning any styles to the
html element.
e body element’s default margin amount may be due to historical reasons,
but it does have a consequence. Unlike other HTML elements, any background
color or image assigned to the body element is extended to the edges of the
From the Library of Wow! eBook
ptg
156 Chapter 3: Elements of Style
browser’s window. In other words, the document body acts as if it has a 0 mar-
gin and a few pixels of padding when it comes to backgrounds, but its margin
controls the position of its child elements. A web author must explicitly set
the body’s margin to 0 to eliminate the default space between the edges of the
browser’s window and any content elements.
e
margin and padding properties are actually shorthand notations for sets
of properties:
margin-top padding-top
margin-right padding-right
margin-bottom padding-bottom
margin-left padding-left
Any single value given to the margin or padding properties is applied to the
margins or padding on each side of the element. is shorthand notation
allows the author to specify dierent amounts on each side of an element in
the following manner:
p.intro { margin: 0 .5em 20px .5em; }
e ordering is clockwise: top, right, bottom, left. erefore, the preceding
rule is the same as this one:
p.intro {
margin-top: 0; /* zero amounts do not need units */
margin-right: .5em;
margin-bottom: 20px;
margin-left: .5em;
}
When given a value consisting of fewer than four amounts, the existing
amounts are recycled. us, this
p.intro { padding: 0 2%; }
is the same as this:
p.intro { padding: 0 2% 0 2%; }
From the Library of Wow! eBook
ptg
Box Properties 157
BORDERS
Element borders are created by using one or more of the border properties
to set values for the width, color, and style of the border. e border-width
property can take any nonnegative numeric value or one of the keywords thin,
medium, thick, or inherit, with medium as the default value. e permissible
values for the border-style property are none, hidden, solid, dotted, dashed,
double, ridge, groove, inset, outset, and inherit. e default for all HTML
elements is a border with a style of none. erefore, an element must have its
border-style property set to some other value for a border to appear. Older
browsers may not support all values. Example 3.14 illustrates the use of a table
to display the dierent border style values. Figure 3.14 shows how this code
appears in a typical browser.
Example 3.14: Using a table to display border styles
<!DOCTYPE html>
<html>
<head>
<title>Example 3.14</title>
<style type="text/css">
body { font: bold 9pt Tahoma,Verdana,sans-serif; }
td { border-width: 5px; padding: 1em; background-color: #ddd; }
td:before { content: attr(style); } /* insert style content */
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="8">
<tr>
<td style="border-style: none"></td>
<td style="border-style: hidden"></td>
<td style="border-style: solid"></td>
<td style="border-style: dotted"></td>
<td style="border-style: dashed"></td>
</tr>
<tr>
<td style="border-style: double"></td>
<td style="border-style: ridge"></td>
<td style="border-style: groove"></td>
continues
From the Library of Wow! eBook
ptg
158 Chapter 3: Elements of Style
<td style="border-style: inset"></td>
<td style="border-style: outset"></td>
</tr>
</table>
</body>
</html>
Figure 3.14: Ten different border style types
e border-style value of hidden appears to have the same eect as the
value none. at is, both values cause the browser to draw a border with a 0
width. is is unfortunate, because it would be useful to keep the border’s
space and color without showing it. Consider the following HTML, which sets
up a horizontal menu of two links:
<style type="text/css">
li { list-style-type: none; float: left; padding: 1em; }
li a { text-decoration: none; }
li a:hover { border-style: solid; }
</style>
. . .
<ul>
<li><a href="here.html">link 1</a></li>
<li><a href="there.html">link 2</a></li>
</ul>
Example 3.14: Using a table to display border styles (continued)
From the Library of Wow! eBook
ptg
Box Properties 159
When the reader’s mouse hovers over the rst link in the list, a medium
border is drawn around it. However, this border takes up an additional num-
ber of pixels on the right and le of the link and pushes the second link to the
right. Coding this
li a { border-style: hidden; }
doesn’t help. e following CSS is needed to toggle the link borders on and o
without shiing the following elements to the right:
li a { border-style: solid; border-color: transparent; }
li a:hover { border-style: solid; border-color: black; }
e border property is a shorthand method for setting color, style, and width
in one statement. e ordering does not matter. For example:
div.greeting { border: 2px solid rbg(220,240,250); }
#sidebar .widget { border: white dotted; }
#main .button { border: #456 3px outset; }
Each of the four sides of an HTML block element has its own set of border
properties by using one of the following:
border-top-width border-top-color border-top-style
border-right-width border-right-color border-right-style
border-bottom-width border-bottom-color border-bottom-style
border-left-width border-left-color border-left-style
A shorthand notation can also be used. e border-width, border-style, and
border-color properties can each take up to four values to specify the values for
the top, right, bottom, and le borders, respectively. Also, the four properties
border-top, border-right, border-bottom, and border-left can use the same
shorthand notation as the border property. Here are some examples:
p { border-right: thin solid gray; }
p { border-style: none none solid none; } /* just a bottom border */
p { border-color: red blue; }
Highlighting elements that you want to draw attention to by giving
them borders is a nice touch. But borders with rounded corners are cool!
CSS3 includes the border-radius property for this purpose. Currently, the
From the Library of Wow! eBook
ptg
160 Chapter 3: Elements of Style
border-radius property is not supported by all browsers. However, several
browser manufacturers have added proprietary CSS properties to set border
corners. ese are -moz-border-radius for Mozilla browsers such as Firefox,
and -webkit-border-radius for Webkit browsers (Safari and Chrome). Inter-
net Explorer does not support border-radius as of IE version 8. Authors are
encouraged to use all proprietary properties when coding CSS for rounded
corners for the best results across all browsers. For example:
p.welcome {
border: medium solid blue;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
}
Example 3.15 demonstrates the creation of borders with rounded corners
for browsers built on the Mozilla engine, such as Firefox. Figure 3.15 shows
how the HTML is displayed on the Firefox browser.
Example 3.15: HTML for borders with rounded corners
<!DOCTYPE html>
<html>
<head>
<title>Example 3.15</title>
<style type="text/css">
body { font: 9pt Tahoma,Verdana,sans-serif; padding: 1em; }
p { padding: 1em; background-color: #ddd; }
</style>
</head>
<body>
<p style="border: 2px solid; -moz-border-radius: 10px;">
border: 2px solid;<br/>-moz-border-radius: 10px;</p>
<p style="border: 6px outset; -moz-border-radius: 6px;">
border: 6px outset;<br/>-moz-border-radius: 6px;</p>
<p style="border: 6px dashed; -moz-border-radius: 10px;">
border: 6px dashed;<br/>-moz-border-radius: 10px;</p>
</body>
</html>
From the Library of Wow! eBook
ptg
List Styles 161
Figure 3.15: Rounded corners
List Styles
CSS provides three properties that help authors create lists with style: list-
style-type, list-style-position, and list-style-image. A fourth shorthand
property, list-style, allows the author to specify all list properties in a single
statement. List properties can be applied to list and list item elements. A
list item element that doesn’t have its own list style properties set inherits
those property values from its parent list element. Here are some examples of
list-style:
ul.nav { list-style-type: none; }
li.selected { list-style: url(images/check.gif) inside; }
e set of permissible values for the list-style-type property has under-
gone some changes over time. e CSS2 specication has about 20 values,
whereas CSS2.1 has only a dozen. e dra specication for CSS3 expands
the permissible values a couple orders of magnitude with support for many
national language symbol sets.
e
list-style-image property allows a web designer to use a custom image
for a list bullet. e list-style-position property has three permissible values:
inside, outside (the default), and inherit. e outside value places the marker
some distance outside the list item’s border. How far outside is browser-
dependent. e inside value places the item marker inside the list item’s
content box as if it were an inline element. You can easily see the dierence by
putting a border around the list items, as shown in Figure 3.16.
From the Library of Wow! eBook
ptg
162 Chapter 3: Elements of Style
For unordered lists, the following values are supported by most browsers:
none, disc, circle, square, and inherit. Figure 3.16 illustrates the rst four of
these values in two lists. e rst has a list-style-position value of outside,
and the second has the value inside. Example 3.16 contains the HTML and
CSS code that produces Figure 3.16.
Example 3.16: HTML and CSS for two lists with different list-style
properties
<!DOCTYPE html>
<html>
<head>
<title>Example 3.16</title>
<style type="text/css">
body { padding: 1em; }
ul li { border: 1px #999 solid; padding: .25em; }
lh { font-weight: bold; }
li:before { content: attr(style); }
#l1 { list-style-position: outside; }
#l2 { list-style-position: inside; }
</style>
</head>
<body>
<ul id="l1">
<lh>Outside position</lh>
<li style="list-style-type: none;"></li>
<li style="list-style-type: disc;"></li>
<li style="list-style-type: circle;"></li>
<li style="list-style-type: square;"></li>
</ul>
<ul id="l2">
<lh>Inside position</lh>
<li style="list-style-type: none;"></li>
<li style="list-style-type: disc;"></li>
<li style="list-style-type: circle;"></li>
<li style="list-style-type: square;"></li>
From the Library of Wow! eBook
ptg
List Styles 163
</ul>
</body>
</html>
Figure 3.16: List style positions and list style types
For ordered lists the appropriate list-style-type values are decimal,
decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha,
lower-greek, and armenian.
In the ordered list element shown in Example 3.17, each list item is given
one of these ordered values. Figure 3.17 shows the result in a typical browser.
Example 3.17: HTML and CSS for displaying ordered list style types
<!DOCTYPE html>
<html>
<head>
<title>Example 3.17</title>
<style type="text/css">
body { padding: 1em; font-family: sans-serif; }
li:before { content: attr(style); line-height: 1.5em; }
</style>
</head>
continues
From the Library of Wow! eBook
