css the missing manual读书笔记

GEM IN THE ROUGH Divs and Spans

Chapter 1 introduced you to <div> and <span>, two generic HTML tags that you can bend to your CSS wishes. When there's no HTML tag that exactly delineates where you want to put a class or ID style you've created, use a <div> or <span> to fill in the gaps. The div tag identifies a logical division of the page like a banner, navigation bar, sidebar, or footer. You can also use it to surround any element that takes up a chunk of the page, including headings, bulleted lists, or paragraphs. (Programmer types call these block-level elements because they form a complete "block" of content, with line breaks before and after them.) The <div> tag works just like a paragraph tag: type the opening <div>, add some text, a photo, or some other content inside it, and then end it with the closing </div>. The div tag has the unique ability to contain several block-level elements, making it a great way to group tags that are logically related such as the logo and navigation bar in a page's banner, or a series of news stories that compose a sidebar. Once grouped in this way, you can apply specific formatting to just the tags inside the particular div, or move the entire div-tagged chunk of content into a particular area, such as the right side of the browser window (CSS can help you control the visual layout of your pages in this manner as described in Part 3 of this book). For example, say you added a photo to a Web page; the photo also has a caption that accompanies it. You could wrap a <div> tag (with a class applied to it) around the photo and the caption to group both elements together: <div class="photo"> <img src="holidays.jpg" alt="Penguins getting frisky"/> <p>Mom, dad and me on our yearly trip to Antarctica.</p> </div> Depending on what you put in the declaration block, the .photo class can add a decorative border, background color, and so on, to both photo and caption. Part 3 of this book shows you even more powerful ways to use <div> tagsincluding nested divs. A <span> tag, on the other hand, lets you apply a class or ID style to just part of a tag. You can place <span> tags around individual words and phrases (often called inline elements) within paragraphs to format them independently. Here, a class called .companyName styles the inline elements "CosmoFarmer.com," "Disney," and "ESPN": <p>Welcome to <span class="companyName"> CosmoFarmer.com</span>, the parent company of such well-known corporations as <span class="companyName">Disney </span> and <span class="companyName"> ESPN</span>…well, not really.</p>

2.When deciding whether to use a class or an ID, follow these rules of thumb:

• To use a style several times on a page, you must use classes.
  For example, when you have more than one photo on your page, use a class
  selector to apply stylinglike a borderto each of them.

  
  

  Use IDs to identify sections that occur only once per page.
  CSS-based layouts often rely on ID selectors to identify the unique parts of a
  Web page, like a sidebar or footer. Part 3 shows you how to use this
  technique.

  
  
• Consider using an ID selector to sidestep style conflicts,
  

  since Web browsers give ID selectors priority over class selectors. For example, when a browser encounters
  two styles that apply to the same tag but specify different background colorsthe
  ID's background color wins.

 

 3.JavaScript programming utilizes ID selectors to locate and manipulate parts of a page. For example, programmers often apply an ID to a form element like a text box for collecting a visitor's name. The ID lets JavaScript access that form element and work its magiclike making sure the field isn't empty when the visitor clicks Submit.