Thông tin tài liệu
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 . 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. 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. style="border: 2px solid; -moz-border-radius: 10px;"> border: 2px solid;<br/>-moz-border-radius: 10px;< /p& gt; < ;p style="border: 6px outset; -moz-border-radius: 6px;"> border:
Ngày đăng: 06/07/2014, 18:20
Xem thêm: HTML cơ bản - p 18 pps
