1 | P a g e BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN Đề tài: “Tìm hiểu về CSS3” Môn: Cơ sở, kĩ thuật và các ứng dụng của XML Giáo viên hướng dẫn: Nguyễn Văn Hoàng Sinh viên thực hiện: Nguyễn Minh Phương 543745 Nguyễn Thị Huê 543242 2 | P a g e Mục lục: I. Giới thiệu: i. Những mẫu thiết kế "cực đẹp" bằng CSS3 ii. Sự hình thành và quá trình phát triển của CSS: II. Nội dung: i. Các đặc điểm cơ bản của CSS3 1. Một Số Quy Ước Về Cách Viết CSS 2. Đơn vị CSS 3. Vị trí đặt CSS 4. Background 1. Màu nền 2. Ảnh nền 3. Lặp lại hình ảnh nền 4. Khóa ảnh nền 5. Thuộc tính background rút gọn 5. Font Chữ 1. Thuộc tính Font-Family 2. Thuộc tính Font-style 3. Thuộc tính Font-variant 4. Thuộc tính Font-size 5. Thuộc tính text- transform 6. Text 1. Màu chữ 2. Thuộc tính text-indent 3. Thuộc tính text-align 4. Thuộc tính letter-spacing 5. Thuộc tính text decoration 6. Thuộc tính text transform 3 | P a g e 7. Pseudo-classes For Links 8. Class & ID 1. Nhóm các phần tử Class 2. Nhóm các phần tử ID 9. Span & Div 1. Nhóm phần tử với thẻ <span> 2. Nhóm khối phần tử với thẻ <div> 10. Box model 11. Margin & Padding 1. Thuộc tính Margin 2. Thuộc tính Padding 12. Border 1. Thuộc tính Border-Width 2. Thuộc tính Border-color 3. Thuộc tính Border-style 4. Thuộc tính Border rút gọn 13. Height & Width 1. Thuộc tính Width 2. Thuộc tính max-width 3. Thuộc tính min-width 4. Thuộc tính height 5. Thuộc tính max-height 6. Thuộc tính max-height 14. Float & Clear Thuộc tính Float Thuộc tính Clear 15. Position 1. Abosolute position 2. Relative position 16. Layers 17. Web standard ii. Các điểm ưu việt hơn của CSS3 so với CSS 1. Mô-đun 2. Đường viền 1. Đường viền có góc tròn 2. Gradients 4 | P a g e 3. Box shadow 4. Border images 3. Hiệu ứng văn bản 1. Text Show 2. Word wrapping 3. Web font 4. Giao diện người dùng 1. Thay đổi kích thước 2. Kích thước Box 3. Out line 5. Tạo multiple columns với CSS3 6. Hình nền 1. Kích thước hình nền 2. Sử dụng nhiều hình nền 7. Fonts 8. Các tính năng khác III. Phụ lục – Tài liệu tham khảo: 5 | P a g e I. Giới thiệu I. Những mẫu thiết kế "cực đẹp" bằng CSS3 1. Đồng hồ CSS3 với jQuery 2. Đồng hồ Analogue 3. Khối lập phương 3D xoay sử dụng các phím mũi tên 6 | P a g e 4. Nhiều khối lập phương 3D 5. Các hình đẹp mắt khác như: 7 | P a g e 8 | P a g e 9 | P a g e 10 | P a g e [...]... Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,… CSS làm cho việc thiết kế và xây dựng một trang Web trở nên dễ dàng hơn Trước khi có CSS, bạn phải sử dụng HTML để thực hiện tất cả các tiêu đề cũng như các thành phần của một trang Web Mặc dù đã có một số cách 13 | P a g e khác nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Web sẽ phải... kiểm soát các vùng nội dung trên trang web (theo tôi biết) là những lý do khiến HTML ngày càng thất thế Nếu bạn vào các website chuyên nghiệp của nước ngoài bạn sẽ việc dàn trang của họ hoàn toàn bằng các thẻ DIV của CSS mà không dùng các thẻ HTML, nếu có thì cũng rất ít Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996 Theo định nghĩa của W3C (Wide Web Consortium) CSS (từ viết tắt của Cascading... Text Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào Như đã nói, ở bài học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản 6.1 Màu chữ (thuộc tính color): Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color Giá trị của thuộc tính này là các giá trị... Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML • Cách 1: Nội tuyến (kiểu thuộc tính) 16 | P a g e Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh... phong cách của một trang Web đơn giản hơn và đỡ tốn thời gian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đó apply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc ) cho một tài liệu Web Các đặc điểm cơ. .. • Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở • 17 | P a g e rộng css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng... hiệu ứng hấp dẫn cho trang web 8 Class & ID Trong các bài học trước, chúng ta đã được học các thuộc tính CSS về background, color, font,… Tuy nhiên, bạn cũng nhận ra là khi áp dụng một thuộc tính CSS cho một thành phần nào đó ví dụ như h1, h2, p, a, img,… thì toàn bộ các thành phần này trong trang web đều nhận thuộc tính này Sau đây chúng ta sẽ hiểu rõ hơn sẽ phải làm thế nào? - Class dùng để nhóm các. .. center (canh giữa) và justify (canh đều) Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đối với thành phần h1, h2 { text-align:right } p{ text-align:justify } Thuộc tính letter-spacing: Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần là... các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang trí cho một liên kết dựa trên pseudo-classes Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi; các. .. bản của CSS3 1 Một Số Quy Ước Về Cách Viết CSS Cú pháp CSS: Cú pháp CSS cơ bản: Selector { property:value; } Trong đó: • Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày Nó là các tag HTML, class hay id Ví dụ: body, h2, p, img, #title, #content, username,… Trong CSS ngoài viết tên selector theo tên tag, class, id Chúng ta còn có thể viết tên selector theo phân cấp như để chỉ các . g e BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN Đề tài: “Tìm hiểu về CSS3” Môn: Cơ sở, kĩ thuật và các ứng dụng của XML Giáo viên. Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc ) cho một tài liệu Web. Các đặc điểm cơ bản của CSS3 1. Một Số Quy Ước Về Cách Viết. HTML để thực hiện tất cả các tiêu đề cũng như các thành phần của một trang Web. Mặc dù đã có một số cách 13 | P a g e khác nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Web sẽ