CSS Cookbook- P2

Tìm hiểu làm thế nào để giải quyết những vấn đề thực tế bạn phải đối mặt với CSS. sách dạy nấu ăn này cung cấp hàng trăm ví dụ thực tiễn cho việc sử dụng CSS để định dạng các trang web của bạn, và bao gồm các mẫu mã bạn có thể sử dụng ngay. Bạn sẽ tìm thấy chính xác những gì bạn cần, từ cơ bản đến phức tạp và cách giải quyết hacks
Nội dung trích xuất từ tài liệu:
CSS Cookbook- P2 Linking to certain elements within a web page You can also link to certain elements within an HTML document by creating anchors. You can create an anchor by assigning an id attribute to an HTML element: Hire Me Then, link to that anchor by prefacing the id name with a hash symbol (#): Hire Me When clicked, the browser navigates to the part of the document that has the corre- sponding id name. If a document is not longer than the browser’s viewport or window, there won’t be any noticeable change that the browser has skipped to an anchored link. Designers use anchors to create a table of contents at the top of a web page that lets you quickly navigate to other parts of the document. This approach is particularly useful on web pages with a large amount of content to help users avoid excessive scrolling. See Also Chapter 7 on links and navigation 1.12 Coding Tables Problem You want to create a simple HTML table, as shown in Figure 1-14. Figure 1-14. The default rendering of a basic HTML table 1.12 Coding Tables | 25Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Solution Use specific elements related to marking up tabular data: Know Your IE6 Adoption Rate 2002 2003 2004 2005 2006 2007 2008 2009 % 45 62 82 81 78 50 45 36 Discussion First, add a table tag at the beginning and end of the tabular data. The table tag defines the table as a whole. The optional caption element is for the summary of the tabular data and appears im- mediately after the opening table element. Then, if your table has a header, add the thead tag to one or more rows as the table header. Use the tbody tag to wrap the table body so that it is distinct from the table header. Next, add tr table row tags to mark off each table row. This element wraps groups of individual table cells. First you define a row, and then you add the enclosed cells. No tag exists for a table column. Only through building successive table rows do columns emerge. 26 | Chapter 1: Using HTML BasicsPlease purchase PDF Split-Merge on www.verypdf.com to remove this watermark. After that, use the th tag for each cell you want to designate as a table header cell, which includes years and percentages in the Solution. You should enclose the specific cell content in the tag. By default, browsers make the text in header cells boldface. Use the td tag to mark out individual cells in a table. Like the th tag, the td tag wraps specific cell content. For a simple, web-based HTML table generator to bypass handcrafting numerous table cells, try http://www.askthecssguy.com/kotatsu/index .html. See Also Chapter 9 on tables 1.13 Creating an HTML vCard (hCard) Problem You want to include in a web page contact information such as that found on a business card, as shown in Figure 1-15. Figure 1-15. The default rendering of an hCard Solution Use class attributes with specific attributes listed in the hCard microformat specifica- tion (see http://microformats.org/wiki/hcard): Josiah Bartlet 1.13 Creating an HTML vCard (hCard) | 27Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. White House 1600 Pennsylvania Avenue NW Washington, DC, 20500 Discussion The ...