Web Programming with HTML, XHTML, and CSS Second Edition- P7

Web Programming with HTML, XHTML, and CSS Second Edition- P7: Điều này bắt đầu hướng dẫn nhận xét HTML và cũng giới thiệu đến bạn bằng cách sử dụng XHTML cho cấu trúc của một trang web và cascading style sheets (CSS) để kiểm soát như thế nào một tài liệu sẽ xuất hiện trên một trang web. Bạn se tìm hiểu làm thế nào để tận dụng lợi thế của các tính năng mới của các trình duyệt trong khi đảm bảo rằng các trang của bạn vẫn làm việc ở cũ, nhưng phổ biến, các trình duyệt. Bằng...
Nội dung trích xuất từ tài liệu:
Web Programming with HTML, XHTML, and CSS Second Edition- P7 Chapter 7: Cascading Style Sheets Figure 7-362. Take a look at the following XHTML page: Font test Quantity Ingredient 3 Eggs 100ml Milk 271Chapter 7: Cascading Style Sheets 200g Spinach 1 pinch Cinnamon Now create the tableStyles.css style sheet that makes this example look like it does in Figure 7-37. Figure 7-37 Don’t worry about getting the sizes exactly the same as the screenshot, but do make sure you have padding in the cells and a border around the outside. The white border is created by default in IE and you find out how to remove this in Chapter 8.272 8 More Cascading Style SheetsIn this chapter, you learn more about working with CSS. You will start by working through manyof the remaining properties from the CSS specifications that allow you to control presentation oflinks, backgrounds, list styles, table styles, and outlines around boxes (the last of which are differentfrom borders). You then learn about the :before and :after pseudo-classes that allow you to addcontent that was not in the source document that you are styling before or after a specified element.Finally, you will see how CSS can be used to position boxes on the page — and therefore how theycan be used to create layouts instead of using tables.By the end of the chapter, you will know more about how to use CSS to control the following: ❑ Presentation of links ❑ Backgrounds of document ❑ Styles of bullet points and numbered lists ❑ Appearance of tables ❑ Outlines around boxes ❑ Boxes that can gain focus or are active ❑ Addition of content to the XHTML document before or after an element ❑ The three positioning schemes that allow you to determine where on a page a box will appear — something that prepares you to use CSS to create layouts Some of the features you learn about in this chapter are not yet widely supported in browsers. They are, however, worth learning about so that you are aware of the direction in which CSS is going.Chapter 8: More Cascading Style SheetsLinks You have already seen that the color property can change the color of the text inside any element, and web designers commonly use this property in rules that apply to elements in order to change the colors of links. When you do this, however, the link will always be that one color — even the links that you have visited, are hovering over, or are clicking on. The ability to change slightly the color of links you have visited can help users navigate your site, and changing the color when someone hovers over a link can encourage the user to click it. So, when you create a rule that changes the color of links, the pseudo-classes listed in the table that follows can help dif- ferentiate styles associated with links in different states. Pseudo-class Purpose link Styles for links in general visited Styles for links that have already been visited active Styles for links that are currently active (being clicked) hover Styles for when someone is hovering over a link The following are properties you will likely use with these pseudo-classes: ❑ color: Often used to change the colors of the links. As mentioned, it is helpful to differentiate slightly between different links that have already been visited and those not yet visited, as this helps users see where they’ve been. Furthermore, changing the color slightly when a user hovers over a link can help encourage clicking on the link. ❑ text-decoration: Often used to control whether the link is underlined or not. Links always used to be underlined on the Web, although since the late 1990s it has been more popular not to underline links. Using the text-decoration property, you can specify that your links should not be underlined, and you can even set them to be underlined only when the user hovers over the link or selects it. ❑ background-color: Highlights the link, as if it had been highlighted with a highlighter pen. It ...