Đang chuẩn bị liên kết để tải về tài liệu:
HTML Utopia: Designing Without Tables Using CSS- P7

HTML Utopia: Designing Without Tables Using CSS- P7: I’ve been around the Web for a while now some might say I’ve been here from the beginning. And one thing that always bothered me about the Web was its inherent inability to disentangle content from presentation. | Absolute Relative and Positioning Contexts Here s the HTML fragment that produces the result shown above. The CSS properties top and left are used to position the div on the page locating it 75 pixels from the top of the page and indenting it from the left of the page by 125 pixels File positioning.html excerpt div style position absolute left 125px top 75px class big This is the first line of text being positioned. div Now put a second div inside the first one as shown here File positioning.html excerpt div style position absolute left 125px top 75px class big This is the first line of text being positioned. div style position absolute left 25px top 30px class big This is a second line. div div Figure 8.5. An element positioned inside a positioned block The result is shown in Figure 8.5. Notice that the second line of text is indented 25 pixels from the left of the first line of text because that first line sets the positioning context for the second it s the parent element of the second line. Both lines are positioned absolutely however the first line is positioned from the top 159 Licensed to siowchen@darke.biz Chapter 8 Simple CSS Layout and left of the viewport and the second line is positioned absolutely from the top and left of the first. Notice too that its font size is huge. Why Take a look at the style rule for the big class and you ll understand File positioning.html excerpt big font-family Helvetica Arial sans-serif font-size 2em font-weight bold As the second div is a child of the first its font size is calculated relative to that of the first div. The style rule defines the font as being of size two ems which instructs the browser to render the text at twice the size it would otherwise appear. When that two em rule is applied to the first line its size is doubled. But when it is applied to the second line the font size of the first line is doubled to calculate that of the second. We can correct this using an absolute font size constant File .