- </a>. - </p>. - Figure 3.22 shows how this code is displayed in two browser windows. - In the window on the right, the mouse is on the link, and the mouse button is held down, causing the first paragraph to disappear.. - Figure 3.22: Changing the display property of a sibling element using the :active pseudo-class. - Changing an element’s display property from block to none has the effect of making it look as if the element never existed on the page. - The content follow- ing the element is moved up to occupy the space the element once occupied.. - Of course, the element still exists and can be accessed by scripting methods.. - Setting a block element’s display property to the value inline-block instructs the browser to treat the element the same way an inline image is treated. - The element loses its margins to become part of the content flow of its parent ele- ment but keeps its other box properties, including height , width , padding , and. - Example 3.22: disappearing an element by using the display property (continued). - baseline of its bottom line of text with the baseline of the parent’s text. - Example 3.23: HTML and CSS coding for inline-block elements. - Figure 3.23 shows how this code appears in a typical browser. - Notice how the second inline block paragraph’s position is offset to align the middle line (4 5 6) with the baseline of the parent element’s text. - ptg Figure 3.23: Paragraphs embedded as inline-block elements. - This setting provides a means to mash one element into the begin- ning of the following block element. - Example 3.24 shows how a heading can be made to flow into the following element as if it were an inline part of that element.. - Figure 3.24 shows how the merged elements look in a browser. - Figure 3.24: Creating a run-in heading to a paragraph. - When working with content management systems and generated content, it often happens that the amount of content for an element may be more than the element can accommodate. - The default value is visible for all elements, meaning that content visi- bly overflows the edges of the element. - The value of hidden causes any excess content to be clipped at the element’s edges. - The auto value, on the other hand, instructs the browser to enable scrolling only if necessary.. - Any HTML block element can be made to float so that it moves to either the left or right extent of its containing element, and the remaining content flows around it. - For an element floated left, web authors typically set the left margin. - and padding to 0 to make its left edge align with the left edge of the content above and below it. - They also provide enough right margin or padding to visu- ally separate the element from the content flowing around it. - Whether to use margin or padding depends on where you want the background of the floated element to be.. - A float value of none does not cause an element to sink.. - The value exists because it is the default and a means to turn off the floating behavior of an element that may have been set by previous CSS statements. - The clear property, applied to an element, defines the sides of the element on which no other element may float. - on an element that follows a floating element is to add enough space above the cleared element so that its top edge moves below the bottom of the floated object. - If the element in ques- tion is already clear of all floating elements, no additional space is added. - The right and left values can be used to fine-tune an element’s clearing behavior.. - It exists only to override any previous CSS clear values in effect for the element.. - Font properties are dependent on the fonts that reside on the readers’. - Foreground and background colors can be specified using color names, decimal, hexadecimal, and percentage red-green-blue values. - Images can be used as backgrounds for any element.. - Document elements can be removed from the normal content flow and explicitly positioned anywhere in the browser’s viewport.. - Elements can be displayed in a manner contrary to their nature using the display property. - Block elements can be made to flow like an inline element inside other content, and inline elements can be made to act like blocks.. - Tools of the Trade Blogging. - YouTube, for example, provides snippets of HTML code on its video pages that can be copied and pasted into a web page to embed a video. - If you work on the Web, the more knowledge of HTML, CSS, and JavaScript you have, the more you can do on the Web.. - Because many services filter out or disable any HTML that might be dangerous, the level of HTML used in this chapter is on the simple side. - Tools of the Trade. - Figures 4.1 through 4.4 show the location of the View Source option in the Internet Explorer, Firefox, Safari, and Chrome web browsers.. - Figure 4.1: Location of the View Source option in Microsoft’s Internet Explorer. - ptg Figure 4.3: Location of the View Source option in Apple’s Safari browser. - Figure 4.4: Location of the View Source option in Google Chrome. - In Figure 4.4, notice that at the bottom of the menu is an option called Inspect element. - This opens an advanced tool that allows the user to inspect a document element’s properties, including its CSS settings, HTML attributes, event handlers, and relationship to the DOM. - Even better, the element inspec- tor allows you to select a document element and edit many of its properties in situ. - The element inspector is available in all four of the browsers shown in the preceding figures. - You can access it in Firefox, Safari, and Chrome by Alt-clicking an element and choosing Inspect Element from the context menu.. - Figure 4.5 shows how the Element Inspector looks in Google Chrome when you inspect a paragraph element.
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt