Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Chapter 9 Using the Box Properties Principles of Web Design, 4th Edition Objectives • Understand the CSS visual formatting model • Use the CSS box model • Use the margin properties • Use the padding properties • Use the border properties • Use the special box properties • Apply special box properties Principles of Web Design, 4th Edition 9-2 The CSS Visual Formatting Model Principles of Web Design, 4th Edition 9-3 The CSS Visual Formatting Model • Describes how the element content boxes should be displayed by the browser – Based on the hierarchical structure of the HTML document and element display type • Elements fall into three display type categories – Block - (e.g., paragraphs) block elements contain inline boxes that contain element content – Inline - contain the content within the block-level elements; they do not form new blocks of content – List-item - create a surrounding containing box and listitem inline boxes Principles of Web Design, 4th Edition 9-4 Principles of Web Design, 4th Edition 9-5 Specifying Element Display Type • The CSS display property determines the display type of an element • The following style rule changes the default display type for an <h1> element from block to inline: h1 {display: inline;} Principles of Web Design, 4th Edition 9-6 Principles of Web Design, 4th Edition 9-7 Using the CSS Box Model Principles of Web Design, 4th Edition 9-8 Using the CSS Box Model • Describes the rectangular boxes that contain content on a Web page • Each block-level element created is displayed as a box containing content in the browser window • Each content box can have margins, borders, and padding (specified individually) Principles of Web Design, 4th Edition 9-9 Principles of Web Design, 4th Edition 9-10 Principles of Web Design, 4th Edition 9-11 Principles of Web Design, 4th Edition 9-12 Principles of Web Design, 4th Edition 9-13 Measurement Values • The margin, border, and padding properties allow two types of measurement: – Length • Absolute or relative values – Percentage • Based on width of containing box Principles of Web Design, 4th Edition 9-14 Using the Margin Properties Principles of Web Design, 4th Edition 9-15 Using the Margin Properties • Specifying Margins – Shorthand property that sets all four individual margins with one declaration p {margin: 2em;} Principles of Web Design, 4th Edition 9-16 Principles of Web Design, 4th Edition 9-17 Principles of Web Design, 4th Edition 9-18 Specifying the Individual Margin Properties • Sets the individual margin properties p {margin-left: 2em; margin-right:2em;} Principles of Web Design, 4th Edition 9-19 Principles of Web Design, 4th Edition 9-20 Negative Margins • Negative margins can be set to achieve special effects – Example: • Override the default browser margin by setting a negative value p {margin-left: -10px;} • Can also be used to remove the default margins from other elements Principles of Web Design, 4th Edition 9-21 Principles of Web Design, 4th Edition 9-22 Principles of Web Design, 4th Edition 9-23 Collapsing Margins • To ensure spacing is consistent, the browser will collapse vertical margins between elements • By default, browser selects the greater of the two margins (top and bottom) Principles of Web Design, 4th Edition 9-24 Principles of Web Design, 4th Edition 9-25 Using the Padding Properties • Control the padding area in the box model – Area between the element content and the border • Padding area inherits the background color of the element • If a border is added to an element, padding should be adjusted to increase legibility and enhance the presentation Principles of Web Design, 4th Edition 9-26 Principles of Web Design, 4th Edition 9-27 Specifying Padding • Shorthand property that sets all four individual padding values with one rule • The most common usage of the padding property is to state one value for all four padding sides, as shown in the following style rule: p {padding: 2em;} Principles of Web Design, 4th Edition 9-28 Principles of Web Design, 4th Edition 9-29 Specifying the Individual Padding Properties • Controls the individual padding areas • The following style sets the top and bottom padding areas for the paragraph, along with complementing borders and a white background: p {padding-top: 2em; padding-bottom: 2em; border-top: solid thin black; border-bottom: solid thin black; background-color: #ffffff;} Principles of Web Design, 4th Edition 9-30 Principles of Web Design, 4th Edition 9-31 Using the Border Properties • Control the appearance of borders around elements – Area between the margin and the padding • There are five basic border properties: – – – – – border border-left border-right border-top border-bottom Principles of Web Design, 4th Edition 9-32 Principles of Web Design, 4th Edition 9-33 Specifying Border Style Border style keywords: • • • • • • • • • none — no border on the element (default) dotted — dotted border dashed — dashed border solid — solid line border double — double line border groove — 3-D embossed border ridge — 3-D outward extended border inset — 3-D inset border (entire box) outset — 3-D outset (entire box) Principles of Web Design, 4th Edition 9-34 Specifying Border Style (continued) • p {border-color: red; borderwidth: 1px; border-style: solid;} Principles of Web Design, 4th Edition 9-35 Principles of Web Design, 4th Edition 9-36 Individual Border Styles • Can be specified with the following border-style properties: – – – – border-left-style border-right-style border-top-style border-bottom-style Principles of Web Design, 4th Edition 9-37 Principles of Web Design, 4th Edition 9-38 Specifying Border Width • Allows setting border width with either a keyword or a length value • You can use the following keywords to express width: – thin – medium (default) – thick p {border-color: red; border-width: 1px; border-style: solid;} Principles of Web Design, 4th Edition 9-39 Principles of Web Design, 4th Edition 9-40 Principles of Web Design, 4th Edition 9-41 Individual Border Widths • Can be specified with the following border-width properties: – border-left-width – border-right-width – border-top-width – border-bottom-width Principles of Web Design, 4th Edition 9-42 Specifying Border Color • Allows setting of element border color • To set a border color, use the property as shown in the following rule: p {border-color: red; border-width: 1px; border-style: solid;} Principles of Web Design, 4th Edition 9-43 Principles of Web Design, 4th Edition 9-44 Principles of Web Design, 4th Edition 9-45 Specifying Individual Border • Can be specified with the following border-color properties: – border-left-color – border-right-color – border-top-color – border-bottom-color Principles of Web Design, 4th Edition 9-46 Using the Border Shorthand Properties • The border property lets you state the properties for all four borders of an element – You can state the border-width, border-style, and border-color in any order • The following rule sets the border-style to solid − The border-weight is 1 pixel; the border color is red p {border: solid 1px red;} Principles of Web Design, 4th Edition 9-47 Using the Special Box Properties • Allow floating of images or boxes to the left or right of content on the page • Special box properties: – width – height – float – clear Principles of Web Design, 4th Edition 9-48 Width • Sets the horizontal width of an element • Width is not intended for normal block-level elements, but you can use it to create floating text boxes or with images div {width: 200px;} Principles of Web Design, 4th Edition 9-49 Height • Sets the vertical height of an element • Like width, height is not intended for normal block-level elements, but you can use it to create floating text div {height: 150px;} Principles of Web Design, 4th Edition 9-50 Float • The float property lets you position an element to the left or right edge of its parent element • Float is most commonly used for <img> elements, allowing alignment of an image to the left or right of text • You can also use the float property to align a text box to the left or right edge of its parent Principles of Web Design, 4th Edition 9-51 Float (continued) • Float property can be used to float a text box to the left or right of text • Advantage: tables aren’t required, just a single simple CSS style rule is all that is required Principles of Web Design, 4th Edition 9-52 Floating Text Boxes .floatbox {width: 125px; height: 200px; float: left; background-color: #cccccc;} Principles of Web Design, 4th Edition 9-53 Principles of Web Design, 4th Edition 9-54 Principles of Web Design, 4th Edition 9-55 Clear • Controls the flow of text around floated elements • You only use the clear property when you are using the float property • Clear lets you force text to appear beneath a floated element, rather than next to it <h2 style=”clear: left;”> Principles of Web Design, 4th Edition 9-56 Principles of Web Design, 4th Edition 9-57 Principles of Web Design, 4th Edition 9-58 Summary • The box model controls spacing around the element content • Values of margin, border, and padding can be designated for all sides or individual sides • Choose relative length units (e.g., ems and pixels) to build scalable Web pages • The browser collapses vertical margins to ensure even spacing between elements Principles of Web Design, 4th Edition 9-59 Summary (continued) • Margins are transparent • Border properties allow the addition of borders to individual sides or all sides of an element • Special box properties allow the creation of floating images of text boxes • Use all properties judiciously to increase legibility (not for novelty effects) Principles of Web Design, 4th Edition 9-60