TAILIEUCHUNG - Wrox Professional CSS Cascading Style Sheets for Web Design phần 4

Làm thế nào để ảnh hưởng đến CSS của chúng tôi? Hãy nói rằng một trình duyệt đang cố gắng xác định phong cách cho một yếu tố đoạn cơ bản (p). Sau khi phân tích tất cả các phong cách trang có sẵn trình duyệt, người sử dụng, và tác giả - tất cả các phong cách có liên quan được đánh giá, như thể hiện trong bảng liệt kê 2-1, 2-2, và 2-3. | Chapter 3 Figure 3-42 Rounded corners at the top of a fluid-width box What s neat about this method is that by using both the background-image and content properties we ve managed to insert two images into a single pseudo-element. Without that ability this fluid layout would be beyond our minimalist markup approach and we d have to resort to hacky CSS or even adding in extra divs. Now having mastered the top of the box let s do the same for the bottom corners. Rounding the Bottom of the Box First we create our after pseudo-element .box after Next we ll insert our bottom-left rounded-corner image into the pseudo-element via the content property see Figure 3-43 .box after content url Users say. I love Blogger it has been a great addition to my life online - Roseanne Figure 3-43 Inserting the bottom-left rounded-corner image Now we ll add in the bottom-right rounded-corner image. We do this by setting a background-image on the pseudo-element and making the whole thing block-level as shown in Figure 3-44 .box after background transparent url no-repeat bottom right content url display block 114 Blogger Rollovers and Design Improvements Figure 3-44 Inserting the bottom-right rounded-corner image We must counteract the 8px of padding and 2px of border we applied to the box. We do this by applying negative bottom right and left margins to the pseudo-element pulling it into place. We also add in 4px of top margin to make the gap between the text and bottom border a bit nicer see Figure 3-45 . .box after background transparent url no-repeat bottom right content url display block margin 4px -10px -10px -10px Thanks your system is perhaps the easiest content management application I ve ever seen. It simply amazes me how easy it is and I ve been working with computers for 20 years. - Michael Figure 3-45 Counteracting the padding and border The right-hand side looks fine but what s happening on the left side of Figure 3-46 .

• Đồ họa - Thiết kế - Flash
• đồ họa máy tính
• mỹ thuật đa truyền thông
• hệ thống thông tin
• lập trình dữ liệu
• kỹ năng máy tính
• thủ thuật máy tính
• tài liệu về Base Tables
• Bài giảng Đồ họa máy tính
• Khái niệm Đồ họa máy tính
• Ứng dụng Đồ họa máy tính
• Công nghệ Đồ họa máy tính
• Tài liệu Đồ họa máy tính
• Tổng quan đồ họa máy tính
• Bài giảng Tổng quan đồ họa máy tính
• Lịch sử đồ họa máy tính
• Ứng dụng của đồ họa máy tính
• Đồ họa máy tính trong điện ảnh
• Đồ họa máy tính trong trò chơi
• thiết kế đồ họa
• giới thiệu Đồ họa máy tính
• lý thuyết Đồ họa máy tính
• Giáo trình Đồ họa máy tính
• Tìm hiểu đồ họa máy tính
• Đồ họa hai chiều
• Đồ họa ba chiều
• Tổng quan về một hệ đồ họa
• Hệ đồ họa
• lập trình đồ họa máy tính
• Thuật toán đồ họa máy tính
• Thuật toán cơ sở
• Câu hỏi Đồ Họa Máy Tính
• Các ứng dụng đồ họa máy tính
• Kiến thức đồ họa
• Đồ họa điểm
• Đồ họa Vector
• Cơ sở đồ họa máy tính
• Bài giảng Cơ sở đồ họa máy tính
• Đồ họa 2 chiều
• Hệ thống giao tiếp bằng đồ họa
• Lý thuyết đồ họa 3D