tailieunhanh - CSS Mastery- P8

CSS Mastery- P8: The human race is a naturally inquisitive species. We just love tinkering with things. When I recently bought a new iMac, I had it to bits within seconds, before I’d even read the instruction manual. We enjoy working things out ourselves and creating our own mental models of how we think things behave. We muddle through and only turn to the manual when something goes wrong or defies our expectations. | CASE STUDY CLIMB THE MOUNTAINS p class dist_elev miles elevation 2 473ft p p class username a href from Jamie Pittock img src assets images content class avatar alt Jamie Pittock s avatar a p li ul div By building content in this way we can collate blocks of information as lists providing all the hierarchy and styling control that we know and love about lists. It is then really easy to use basic selectors to target the unordered list within the others_routes containing div and the various elements within the li elements. Note that we re using borderradius -webkit-border-radius and -moz-border-radius rules to apply rounded corners to the ul element and be reassured that we ll discuss these later in this case study. div others_routes ul list-style none border 1px solid dedeaf background ffffcc border-radius 5px -webkit-border-radius 5px -moz-border-radius 5px margin 0 padding 10px div others_routes ul li margin 0 padding 10px 55px 10px 0 position relative border-bottom 1px solid dedeaf border-top 1px solid fff 327 CHAPTER 11 div others_routes ul li h3 margin-bottom 5px div others_routes ul li img position absolute top 10px right 10px div others_routes ul li margin 3px 0 0 0 font-style italic font-size 12px div others_routes ul li a color 666 div others_routes ul li a hover div others_routes ul li a focus text-decoration underline In the preceding markup we re targeting deeper HTML elements with some straightforward descendent selectors. For example we can strategically target the link hover styling of the username link with div others_routes ul li a hover descending deeper and deeper with the selector until we define our target element-an element owned by every preceding element in the selector resulting in Figure 11-10. 328 CASE STUDY CLIMB THE MOUNTAINS Kinder scout ridge walk circuit miles Elevation 2 4DCtt ram GJen Swinfield Castleton Ridges Walk miles elevation 1 343ft j P .