bài báo cáo về tìm hiểu CSS3

bài báo cáo về tìm hiểu CSS3 bài báo cáo về tìm hiểu CSS3 bài báo cáo về tìm hiểu CSS3 bài báo cáo về tìm hiểu CSS3 bài báo cáo về tìm hiểu CSS3 bài báo cáo về tìm hiểu CSS3 bài báo cáo về tìm hiểu CSS3 bài báo cáo về tìm hiểu CSS3

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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. n ca CSS3 1. Mt S c V Cách Vit CSS 2.  CSS 3. V 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 3 | P a g e 6. Thuc tính text transform 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. a CSS3 so vi CSS 1. Mô- 2. ng vin 1. ng vin có góc tròn 4 | P a g e 2. Gradients 3. Box shadow 4. Border images 3. Hiu n 1. Text Show 2. Word wrapping 3. Web font 4. Giao dii dùng 1. c 2. c Box 3. Out line 5. To multiple columns vi CSS3 6. Hình nn 1. c hình nn 2. S dng nhiu hình nn 7. Fonts 8.  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 dng các phím  6 | P a g e 4. Nhiu khi l 5. p m 7 | P a g e 8 | P a g e 9 | P a g e 10 | P a g e  Nhng hình nh rt thú v c làm bng CSS3. Vy gi chúng ta s tìm hiu CSS3 là gì nhé? II. Sự hình thành và quá trình phát triển của CSS: Khi th gii web mng dùng các th  dàn trang. Vim chia trang web thành các b add text, add nh, kiu ch, màu s web ngày càng phát trii ta nhn thy vic dàn trang bng các bng ngày càng tr nên bt tin. Khng mã HTML ln cùng vi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c ngoài [...]... P a g e } 6 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... được kích hoạt – đang giữ nhấn chuột (a:active) Với điều khiển pseudo-classes cùng với 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:... 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ơ 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; } 13 | P a g e Trong đó: Selector: Các... text-decoration:none } a:active { color:#662D91; font-variant:small-caps } Ba ví dụ trên chỉ là một tí gợi ý về khả năng kết hợp các thuộc tính CSS với pseudo-classes để tạo nên nhiều 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... phần quan trọng trong một trang web Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,… Giờ chúng ta sẽ cùng tìm hiểu về cách dùng CSS để định border cho các đối tượng web 12.1 Thuộc tính border-width: Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web Thuộc tính này có các giá trị:... Word vậy), hay thực hiện việc định vị trí ảnh và text (như một số kiểu text wrapping của MS Word) Để rõ hơn chúng ta hãy xem hình minh họa sau về cơ chế hoạt động của float:  Thuộc tính float có 3 giá trị: Left: Cố định phần tử về bên trái Right: Cố định phần tử về bên phải None: Bình thường ... tiếp sẽ thể hiện rõ hơn về việc dùng margin để canh lề cho các đối tượng trong trang web Các bạn hãy quan sát các đường viền và nhận xét body { margin:80px 30px 40px 50px; border:1px solid #FF0000 } #box1 { margin:50px 30px 20px 40px; border:1px solid #00FF00 33 | P a g e } #box2 { margin:50px 30px 20px 40px; border:1px solid #0000FF } 11.2 Thuộc tính padding: Padding có thể hiểu như là một thuộc tính... “frame” đi Và sau đó khi bạn muốn các khung ảnh khác cũng có kiểu dáng như vậy thì bạn chỉ việc gọi kiểu mà bạn đã định nghĩa để sử dụng lại lần nữa Cụ thể ở đây là gọi kiểu “frame”  CSS3 là thế hệ tiếp theo của CSS, CSS3 có đầy đủ đặc điểm của CSS và ngoài ra có thêm đặc điểm ưu việt hơn CSS 12 | P a g e II Nội dung Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ -... cho width, height cả một thành phần Ví dụ, bạn vùng chứa bài post của một forum có bề ngang 500px, bạn có thể định max width:500px cho phần hình ảnh trong phần đó để tránh những ảnh lớn bị lệch ra ngoài 14.Float & Clear 14.1 Thuộc tính float: Float (theo như nghĩa tiếng Việt là thả trôi) là một thuộc tính CSS dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó Đây là... font-weight:bold } 9.2 Nhóm khối phần tử với thẻ : Tuy nhiên, điểm khác biệt là dùng để nhóm một khối phần tử trong khi đó có thể nhóm một hoặc nhiều khối phần tử Trở lại ví dụ về danh sách tỉnh, thành trong phần class bài trước quyết vấn đề bằng cách nhóm các phần tử với như sau: Danh Sách Các Tỉnh, Thành Phố Việt Nam: Hà Nội TP Hồ Chí Minh Đà . 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. 10 | P a g e  Nhng hình nh rt thú v c làm bng CSS3. Vy gi chúng ta s tìm hiu CSS3 là gì nhé? II. Sự hình thành và quá trình phát triển của CSS: Khi th. 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 dng các phím