Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P35

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day P35 is a new edition of the best-selling book that started the whole HTML/web publishing phenomenon. The entire book has been revised and refined to reflect current web publishing practices and technologies. It includes extensive coverage of Cascading Style Sheets (CSS), which have become a staple in web development. You''ll have no problem learning from expert author Laura Lemay''s clear and approachable writing style. Simpl

Thể loại Tài liệu miễn phí Quản trị Web

Số trang 10

Ngày tạo 8/29/2018 7:12:27 PM +00:00

Loại tệp PDF

Kích thước

Tên tệp

Tải Sams Teach Yourself Web Publishing with HTML and C... (.pdf)

Xem mẫu

The evil that men do lives after them;
The good is oft interred with their bones;
So let it be with Caesar. The noble Brutus

Output Figure 9.4. Nested

s with no margins or padding. As you can see, the text in the inner

is jammed right up against the border, and the inner border and outer border are flush against each other. That`s because I`ve set both the padding and margin of the inner div to 0px. The results in Figure 9.5 show what happens if I change the style sheet to this: Input .outer { border: 2px solid black; } .inner { border: 2px dotted black; padding: 15px; margin: 15px; } Output Figure 9.5. The inner

has 15 pixels of padding and margin here. file:///G|/1/0672328860/ch09lev1sec4.html (5 von 15) [19.12.2006 13:49:10] As you can see, I`ve created some space between the border of the inner

and the text inside the inner

using padding, and some space between the border of the inner

and the border of the outer

using margin. Now let`s look at what happens when I add some margin and padding to the outer

as well. I`m also going to give both the inner and outer

s background colors so that you can see how colors are assigned to white space. The results are in Figure 9.6. Here`s the new style sheet: Input .outer { border: 2px solid black; background-color: #999; padding: 15px; margin: 40px; } .inner { border: 2px dotted black; background-color: #fff; padding: 15px; margin: 15px; } Output Figure 9.6. Both the inner

and outer

have margin and padding. [View full size image] file:///G|/1/0672328860/ch09lev1sec4.html (6 von 15) [19.12.2006 13:49:10] I gave the outer

a large 40-pixel margin so that you could see how it moves the borders away from the edges of the browser window. Note also that there`s now space between the text in the outer

and the border. You can also see that the padding of the outer

and the margin of the inner

are combined to provide 30 pixels of white space between the border of the outer

and the border of the inner

. Finally, it`s important to understand the behavior of the background color. The background color you assign is applied to the padding, but not to the margin. So, the 15-pixel margin outside the inner

takes on the background color of the outer

, and the margin of the outer

takes on the background color of the page. Collapsing Margins In the CSS box model, horizontal margins are never collapsed (if you put two items with horizontal margins next to each other, both margins will appear on the page). Vertical margins, on the other hand, are collapsed. Only the larger of the two vertical margins is used when two elements with margins are next to each other. For example, if a

with a 40-pixel bottom margin is above a

with a 20-pixel top margin, the margin between the two will be 40 pixels, not 60 pixels. At this point, it should be clicking why CSS is a nice alternative to tables, assuming that your data isn`t tabular. I haven`t talked at all yet about positioning, but you can see that for putting borders around things or putting them inside boxes with white space around them, CSS makes your life pretty easy. You already know that to center text within a box, the text-align property is used. The question now is, how you center a box on the page. In addition to passing units of measure or a percentage to the margin property, you can also set the margin to auto. In theory, this means set this margin to the same file:///G|/1/0672328860/ch09lev1sec4.html (7 von 15) [19.12.2006 13:49:10] value as the opposite margin. However, if you set both the left and right margins to auto, your element will be centered. To do so, you can use the margin-left and margin-right properties, or provide multiple values for the margin property. You can also do the same thing with margin-top and margin-bottom. So, to center a

horizontally, the following style sheet is used (the newly centered

is in Figure 9.7): Input .inner { border: 2px dotted black; background-color: #fff; padding: 15px; width: 50%; margin-left: auto; margin-right: auto; } Output Figure 9.7. Both the inner

and outer

have margin and padding. [View full size image] Caution Internet Explorer cares about your document type definition (DTD) settings. If you don`t indicate in your document that you`re using HTML 4.01 or XHTML 1.0, Internet Explorer will not honor things such as margin: auto. If the DTD is left out, IE assumes that you`re using an old version of HTML that doesn`t support features like that. Tip If you want elements to overlap each other, you can apply negative margins to them instead of positive margins. file:///G|/1/0672328860/ch09lev1sec4.html (8 von 15) [19.12.2006 13:49:10] Another thing to remember is that the of your page is a box as well. Let me make yet another change to my style sheet to show how you can apply styles to it. In the new style sheet, I adjust the border, margin, and padding properties of the tag. I also make some changes to the outer

to better illustrate how the changes to the tag work. The changes related to the new style sheet appear in Figure 9.8. Input .outer { border: 2px solid black; background-color: #999; padding: 15px; } .inner { border: 2px dotted black; background-color: #fff; padding: 15px; margin: 15px; } body { margin: 20px; border: 3px solid blue; padding: 20px; background-color: #cfc; } Figure 9.8. Treating the body of a document as a box. [View full size image] In this example, you can see that you can adjust the margin padding, and border of a document`s body. In Mozilla, the margin is placed outside the border, and the padding inside it. However, unlike other boxes, the background color is applied to the margin as well as the padding. In Internet Explorer, things are a bit different. Both the margin and padding are applied, but the border appears around the edge of the windoweven the scrollbars are placed inside the border, as shown in Figure 9.9. file:///G|/1/0672328860/ch09lev1sec4.html (9 von 15) [19.12.2006 13:49:10] ... - tailieumienphi.vn

nguon tai.lieu . vn

Tin học văn phòng Đồ họa - Thiết kế - Flash Quản trị Web Cơ sở dữ liệu Quản trị mạng Kỹ thuật lập trình Hệ điều hành Phần cứng An ninh - Bảo mật Chứng chỉ quốc tế Thủ thuật máy tính Điện - Điện tử Kinh tế học Hoá học Xã hội học Môi trường