Tìm hiểu về HTML5 và CSS3

thông tin trên internet. HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có những tính năng ưu việt hơn. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn. HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn. Vì vậy nhóm chúng dem đã chọn đề tài tài: “Tìm hiểu về HTML5 và CSS3”.

Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin LỜI MỞ ĐẦU Hiện nay, công nghệ dành cho thiết bị di động ngày phát triển Nếu trước đây, bạn phải dùng máy tính để bàn (MTĐB) cồng kềnh trình duyệt web IE (Internet Explorer) để lướt web, với máy tính xách tay (MTXT), điện thoại thơng minh (ĐTTM) nhiều trình duyệt khác (Firefox, Opera…) bạn dễ dàng lướt “net” đâu Tuy nhiên với thiết bị, trình duyệt web khác nhau, nội dung hiển thị hình khác Chẳng hạn, máy tính bạn xem trang web tốt, ĐTTM giao diện cấu trúc trang bị xáo trộn Hay bạn xem phim tốt với IE với Firefox khơng Vậy giải pháp để người dùng sử dụng trình duyệt thiết bị xem đầy đủ, trọn vẹn nội dung, thông tin internet HTML5 cho phép nhà phát triển, lập trình web tạo trang web có tính ưu việt Khơng vậy, HTML5 đem đến cho người dùng trải nghiệm tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú HTML5 CSS3 làm cho ứng dụng web trang web hấp dẫn HTML5 có tính thêm vào giúp cho việc xây dựng ứng dụn g web dễ dàng nhiều Ví dụ nhiều màu sắc hỗ trợ đường cong, việc làm mờ, góc tròn (thay ép buộc nhà thiết kế web sử dụng hình ảnh để tạo góc tròn), dĩ nhiên việc lưu trữ offline Tất điều làm trang Web trở nên dễ nhìn hơn, bắt mắt Vì nhóm chúng dem chọn đề tài tài: “Tìm hiểu HTML5 CSS3” Hưng Yên, ngày tháng năm 2013 Nhóm sinh viên thực Nguyễn Thế Anh Đỗ Thị Giang GVGD: Hoàng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin I Tổng quan HTML5 CSS3 HTML5 CSS3 gì? HTML5 CSS3 version HTML CSS Nó bổ sung thêm đặc tính để giúp cho việc thiết kế web dễ dàng hơn, đồng thời làm cho trang web hiển thị sinh động với người xem Vài đặc điểm a Video: HTML5 giúp người thiết kế nhũng video vào trang web đơn giản Còn với người xem, HTML5 cho phép họ xem video mà không cần phải thêm plugin Flash Silverligh vào trình duyệt Tính video trợ giúp tuyệt vời cho người sử dụng thiết bị di động để duyệt web Hiện trình duyệt Safari, Chrome Internet Exporer hỗ trợ HTML5 video định dạng H.264 CÒn Firefox hiên thời hỗ trợ HTML5 video định dạng OggVorbis b Các hiệu ứng động trò chơi HTML5 CSS3 phối hợp với giúp người thiết kế web dễ dàng việc tạo hiệu ứng động trò chơi tương tác mà khơng cần dùng đến Flash c Làm cho trang web hấp hẫn hơn: HTML5 CSS3 làm cho ứng dụng web trang web hấp hẫn Nhiều màu sắc hơn, hỗ trợ đường cong, làm mờ, góc tròn (bo tròn góc đối tượng trang), lưu offline… Những điều làm cho trang web đẹp hơn, bắt mắt làm cho việc hiển thị thông tin trang sát với mà người thiết kế tưởng tượng đầu Khả tương thích: HTML5 CSS3 chưa hoàn tát, chúng làm thay đổi mặt trang web Một số trình duyệt phiên hiên hành Safari chrome thực số tính từ phiên dự thảo HTML5 CSS3 Và với việc sử dụng trình duyệt bạn xem nhiều trang web mà sử dụng HTML5 CSS3 CNN.com, The NewYork - Phiên bàn IE8 hỗ trợ HTML5 hạn chế,còn IE9 hỗ trợ H264 video, âm nhùng, đồ họa vector tỷ lệ CSS3 - HTML5 CSS3 kết hợp với công nghệ khác JavaScrip hữu ích cho phong cách, định dạng tốc độ hoạt động trang web sử dụng Hai ngôn ngữ cách mạng hóa cách lập GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thơng tin trình xem Internet với tính cải tiền all-in-one, loại bỏ việc phải sử dụng nhiều ứng dụng bên thứ ba (ví dụ Flash) GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng n Khoa: Cơng nghệ Thơng tin I Tìm hiểu HTML5 Lịch sử hình thành phát triển HTML5 - Năm 2004 “WHAT” với thành viên đến từ Apple, Mozilla Foundation, Opera Software lập với nhiệm vụ phát triển HTML5 - Tháng 10-2006 W3C (world wide web Consortium) thống báo họ hợp tác với “WHAT” W3C định không phát triển XHTML thay vào hợp tác với WHAT để phát triển HTML5 - Năm 2008 phiên HTML5 mắt Phiên thử nghiệm HTML5 viết bới Ian Hickson giới thiệu HTML5 q trình phát triển cơng nghệ - Năm 2008 Firefox tương thích với HTML5 trình duyệt Chrome Safari tất nhiên IE bắt đầu tương thích - Tháng -2010 YouTobe mắt trình chơi video HTML5 - Tháng -2010 Steve Jobs tuyên bố không với Flash qua thư Jobs lí giải sap flash khơng sử dụng thiết bị Apple, mà thay vào HTML5 - Tháng 5-2010 trang chia sẻ tài liệu Scribd chuyển sang sử dụng HTML5, tọa lên giao diện người dung tốt cho người sử dụng dịch vụ họ thiết bị máy tính bảng - Tháng 12 -2010 Chrome web Store mở cửa xây dựng HTML5 Điều giúp cho thiết bị tablets mua phần mềm dễ dàng - Tháng 7-2011 Pandora.com sử dụng HTML5 Trang nghe nhạc online tiếng Pandora bắt đấu sử dụng trình chơi nhạc HTML5 Nó đánh giá nhanh nhẹ Flash - Tháng 9-2011 34% top 100 websites sử dụng HTML5 Định nghĩa HTML5 HTML5 phát triển mạnh mẽ đột biến HTML, viết tắt cụm từ Hyper Text Markup Language Đây hình thức định dạng cốt lõi hầu hết website internet HTML5 với phiên hình thành năm 2008 tới năm 2011 thức mắt với ánh hào nhống cơng nghệ đại Tuy nhiên, thời điểm nhiều trình duyệt chưa kịp thay đổi để hỗ GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng n Khoa: Cơng nghệ Thơng tin trợ Đến ngày nay, hầu hết trình duyệt phổ biến Chrome, Safari, Firefox, Opera, IE hỗ trợ HTML5 Điều tạo cách mạng lớn cho công nghệ web HTML5 kế thừa HTML 4.01, phát hành vào năm 1999 Việc tạo ngôn ngữ dựa theo tiêu chuẩn như: - Các tính phải dựa HTML, CSS, DOM, JavaScript - Làm giảm nhu cầu cho plugins bên (như Flash) - Xử lý lỗi tốt - Đánh dấu để thay kịch - HTML5 nên phát triển cho thiết bị độc lập - Quá trình phát triển nên cơng khai nhằm cho tổ chức khác lấy làm sở phát triển Tổng quan cú pháp HTML5 a Cấu trúc file mã HTML5 - Khai báo DOCTYPE Được sử dụng để kiểm tra hợp lệ tài khoảnn - Vung nội dung Metadata: Là phần mềm nội dung thiết lập cách trình bày hành vi nội dung lại trang Có thể sử dụng nội dung metadata để thiết lập quan hệ tài liệu HTML Thường xun chứa từ khóa mơ ta cho web, máy tìm kiếm sử dụng để phân loại trang web Được đặt thành phần GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin - Vùng flow Đại diện cho phần tử coi nội dung trang web Các thẻ đánh dấu nội dung thuộc vùng Những phần tử thêm HTML5 : , , , , ,… - Vùng Sectioning Là vùng nội dung HTML5 Bao gồm phần từ: , , , - Vùng Heading Chứa tất phần tử tiêu đề chuẩn sử dụng HTML 4.0 bao gồm : , ,… Với HTML5: bổ sung thêm - Vùng phrasing: GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin Là văn tài liệu bao gồm phần tử đánh dấu văn bên đoạn văn Là tập vùng Flow - Vùng Embedded Là nội dung nhập tài nguyên khác hình ảnh hay video vào tài liệu - Vùng Interactive Là phần tử sử dụng để tương tác người dung b Các phần tử HTML5 - Phần tử header Vùng Header chứa tiêu đề phụ đề trang Bạn sử dụng thẻ để tạo nội dung cho vùng Header trang Thẻ chứa thơng tin mở ngồi trang web Trang web tạo có vùng Header cho trang này, hiển thị thiết kế cao cấp, vùng Header bên vùng Article Section Hình đưa ví dụ đánh dấu thẻ GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin Hình Thẻ chứa thẻ , hình Thẻ tạo nhóm tiêu đề với nhau, cách sử dụng mức tiêu đề đến hiển thị có tiêu đề (Tiêu đề) phụ đề (Nội dung) `Hình - Phần tử Navigation Bạn tạo vùng Navigation (Chuyển hướng) trang cách sử dụng thẻ Phần tử định nghĩa vùng đặc biệt dành cho việc chuyển hướng Thẻ nên sử dụng để chuyển hướng trang web chính, khơng dùng để thiết lập liên kết có chứa vùng khác trang Vùng Navigation chứa mã hiển thị hình GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng Yên Khoa: Cơng nghệ Thơng tin Hình - Phần tử Article section Trang web mà bạn thiết kế có chứa phần Article, giữ nội dung thực trang Bạn sử dụng thẻ để tạo vùng này, thẻ định nghĩa nội dung sử dụng độc lập với nội dung khác tìm thấy trang Ví dụ, bạn muốn tạo nguồn cấp liệu RSS, bạn sử dụng để xác định nội dung Thẻ xác định nội dung gỡ bỏ đặt ngữ cảnh khác hoàn toàn dễ hiểu Vùng Article kế hoạch Acme United có chứa ba vùng Section Bạn tạo vùng cách sử dụng thẻ Một chứa vùng thành phần nội dung trang web có liên quan Thẻ — thẻ — chứa header (tiêu đề), footer (chân trang), thành phần khác cần thiết để hoàn thành phần Thẻ dùng cho nội dung tạo nhóm Nội dung cho hai thẻ thẻ thường bắt đầu kết thúc , với nội dung cho thẻ Thẻ chứa thẻ , giống thẻ chứa thẻ Thẻ nên dùng để tạo nhóm thơng tin giống nhau, thẻ nên sử dụng cho thông tin viết blog mà chúng bị gỡ bỏ đặt ngữ cảnh mà không ảnh hưởng đến ý nghĩa nội dung Thẻ tên gọi nó, cung cấp gói thơng tin đầy đủ Ngược lại, thẻ chứa thông tin liên quan, trừ thông tin đặt ngữ cảnh khác với nó, nghĩa bị với ví dụ cách sử dụng thẻ GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page Trường ĐH SPKT Hưng Yên Khoa: Cơng nghệ Thơng tin Hình - Phần tử Aside Bạn tạo vùng Aside theo kế hoạch Acme United cách sử dụng thẻ Hãy sử dụng thẻ bạn muốn tạo nội dung bổ sung mà không chỗ để thêm vào viết Trong tạp chí, vùng nhận xét thường sử dụng để làm bật điểm thực viết Thẻ chứa nội dung loại bỏ mà khơng ảnh hưởng đến thông tin truyền đạt viết, phân đoạn, trang chứa Hình đưa ví dụ cách sử dụng thẻ Hình GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 10 Trường ĐH SPKT Hưng n Khoa: Cơng nghệ Thơng tin Hình minh họa Thẻ Audio Tag định nghĩa âm thanh, nhạc hay trường audio khác Thường dùng kèm với tag để thị nhiều nội dung Cấu trúc: dòng thơng báo Thuộc tính tùy chọn GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 13 Trường ĐH SPKT Hưng n Khoa: Cơng nghệ Thơng tin Mã html Hình minh họa Thẻ Canvas Tag dùng để hiển thị đồ họa Tag sử dụng vùng chứa đồ họa, việc vẽ đồ họa script thực Cấu trúc: Thuộc tính GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 14 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin Mã html Hình minh họa Tác dụng thành phần HTML5: - Giảm bớt phụ thuộc vào thẻ GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 15 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin - Thay cấu trúc trang web thống nhất, dễ đọc HTML5 không thay cú pháp HTML nào, mà bổ sung thêm thành phần (thẻ) vào danh sách có GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 16 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thơng tin II Tìm hiểu CSS3 Tổng quan CSS3 Là tiêu chuẩn CSS CSS3 chưa thức sử dụng rộng rãi mà làm đáng mong đợi Về mặt nguyên lý đời CSS3 phần lấn sân Javascript Bởi người ta nói HTML dùng để thể nội dung, CSS dùng để trình bày cấu trúc Javascript tương tác với người dùng Nhưng tính CSS3 transition animation phần làm thay đổi nguyên lý Hiện sử dụng Javscript người lập trình phải tính đến điều kiện trình duyệt người dùng không bật Javascript Nhưng tương lai (hy vọng khơng xa) tạo hiệu ứng động đơn giản mà không cần hỗ trợ Javascript tiện Trong bạn khám phá vài nhiều cách sử dụng transition khác CSS3 Làm việc với thuộc tính CSS3  Border-radius: Thuộc tính border css3 dùng để định dạng dạng bo góc - Thuộc tính + Boder-top-left-radius: 5px: Góc bên trái uốn cong + Boder-top-right-radius: 5px : Góc bên phải uốn cong + border-bottom-left-radius: 5px: Góc - bên trái uốn cong + border-bottom-right-radius: 5px: Góc - bên phải uốn cong + border-radius: 5px 10px 4px 8px: Cả góc uốn cong VÍ dụ: Specialsale{ Width: 400px; Background-color:#D67E5C; Border: 2px #773636 solid; -webkit-border-radius: 24px; -moz-border-radius: 24px; Border-radius: 24px; } -  Border-images: Dùng để định dạng dạng border hình ảnh - Cú pháp: border-image: source slice width outset repeat; + Slice: Phần bù bên hình border + Outset: Số lượng diện tích mà hình border mở rộng Thuộc tính: + Border-image-source: Đường dẫn đến image dùng làm border GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 17 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin + border-image-slice giá trị: Phần lát cắt image với thành phần border + border-image-slice giá trị: Phần lát cắt image với thành phần ngang border thành phần dọc + border-image-slice giá trị: Phần lát cắt image với thành phần dọc border + border-image-slice giá trị: Phần lát cắt image với thành phần border khác + border-image-width giá trị : Bề rộng image với thành phần border + border-image-width giá trị : Bề rộng image với thành phần ngang border thành phần dọc + border-image-width giá trị : Bề rộng image thành phần trái phải + border-image-width giá trị : Bề rộng image thành phần khác + border-image-outset giá trị : Xác định giá trị image vượt vùng giới hạn vùng bao, với thành phần border vượt + border-image-outset giá trị : Xác định giá trị image vượt vùng giới hạn vùng bao, với thành phần trái phải thành phần + border-image-outset giá trị : Xác định giá trị image vượt vùng giới hạn vùng bao, với thành phần trái phải + border-image-outset giá trị : Xác định giá trị image vượt vùng giới hạn vùng bao, với thành phần khác + border-image-repeat với giá trị repeat : Image border lặp lại, phần nội dung phần border + border-image-repeat với giá trị round : Image border lặp lại, phần nội dung phần border, nhiên vùng lặp tự động tỷ lệ cho phù hợp với vùng bao + border-image-repeat với giá trị stretch : Image border kéo dài, border-image-repeat không khai báo border image có dạng stretch + border-image-repeat với giá trị : Image border lặp lại với thành phần giống nhau, trái phải giống + border-image : Tổng hợp dạng border-image Ví dụ: Border: 20px #773636 solid; -webkit-border-image: url(“images/border-bg.png”)33% repeat; -moz-border-image: url(“images/boder-bg.png”)33%repeat; Border-image: url(“images/boder-bg.png”)33% repeat;  Gradient: Thơng thường, để tạo hình đổ bóng bạn phải dùng image làm background, nhiên có cách khác dùng CSS với thuộc tính linearGVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 18 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin gradient, o-linear-gradient, moz-linear-gradient, webkit-linear-gradient, mslinear-gradient webkit-gradient Cách giúp hình đổ bóng đẹp hơn, linh động tiết kiệm băng thông tăng tốc độ tải cho trang Ví dụ: gradient{ Width: 450px; Border: #000 4px solid; Background-color:#fff; Background-image: -moz-linear-gradient (white, black) ; Background-image: -webkit-gradient (linear, 0, 100%, from (white), to (black)); } - Thuộc tính: + Thêm góc độ nhiều điểm dừng: + Tăng thêm đa dạng gradient + Kiểm sốt tốt Ví dụ: Background-image: -moz-linear-gradient (45deg, white, green, black); Background-image: -moz-radial-gradient(60% 60%, circle closest-comer, white, black); + Lặp lại gradient: Background-image: -moz-repeating-linear-gradient(left, white 80%, black, white); + Sử dụng hệ màu RGBA để định nghĩa gradient gradient h1{ Margin:0; font-weight:bold; font-size:48px; color:#c33; text-align:center, Background-image: -moz-linear-gradient(rgba(174, 185, 196, 0.9), rgba(110, 124,140, 0.9));}  Transform: Cho phép xoay, kéo dãn, kéo nghiêng thành phần trang Ví dụ: transform { margin-top:2em; -webkit-transform: rotate(45deg); -moz-transform: rotate(-45deg); Transform: rotate(-45deg); } Transition: Sử dụng link để thực Transition - Thuộc tính + Transition-duration: Quy định thời gian chuyển đổi + Transition-timing-function: Xác định tốc độ đường cong hiệu ứng chuyển tiếp + Một số giá trị transition-timing-function + Linear: Chỉ định hiệu ứng chuyển tiếp với tốc độ từ đầu đến cuối (tương đương với kiểu cublic-bezier(0,0,1,1))  GVGD: Hoàng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 19 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin + Ease: Chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm, sau nhanh chóng, sau kết thúc chậm + Ease-in: Chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm + Ease-uot: Chỉ định hiệu ứng chuyển tiếp với kết thúc chậm (tương đương với cubic-bezier (0,0,0.58,1)) + Ease-in-uot: Chỉ định hiệu ứng chuyển tiếp với khởi đầu chậm kết thúc + cubic-bezier(n,n,n,n): Xác định giá trị riêng bạn cách chức khối bezier Các giá trị giá trị số 0-1 Ví dụ: transition { Padding: 5px 0px; Background:#C9C; -webkit-transition-property: background; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-uot; } Nimation CSS3: Thuộc tính animation xác định chuyển động tag hay hình ảnh, tổng hợp thuộc tính: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animationdirection  - Thuộc tính: + animation-name: Xác định tên cho animation + animation-duration: Xác định thời gian để hoàn thành chuyển động, mặc định 0s + animation-timing-function: tốc độ chuyển động + animation-delay: Xác định sau chuyển động bắt đầu, mặc định + animation-iteration-count: Số lần thực +animation-play-state: Xác định chuyển động dừng lại hay chuyển động chạy + animation: Đây dạng tổng hợp thuộc tính trên, ngoại trừ thuộc tính animation-play-state Ví dụ: #Spin{ Margin-top:2em; -webkit-animation-name: imageRotate -webkit-animation-duration:5s; -webkit-animation-iteration-count:2; -webkit-animation-timing-function:ease-in-out; } GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 20 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin @ webkit-keyframes imageRotate{ From{ -webkit-transform:rotate(0deg); } To{ -webkit-transfrom:rotate(360deg); } } Làm việc với font Wed - @font-face: + Cho phép font chữ vào trang cách khai báo font đặt font chữ web server + Là giải pháp khắc phục việc phải cài đặt font chữ máy tính Ví dụ: @font-face{ Font-family: Sigmar; Src: url (Sigmarone.otf); } H2 { Font-size:1.125em; Letter-spacing:0.2em; Font-weight:lighter; Text-transform:uppercase; Font-family: Sigmar, Georgia, Palatino, Times New Roman, serif; } - Kiểu định dạng font chữ: +Open Type(OTF): Định dạng phổ biến hỗ trợ glyph +TrueType(TTF): Nền tảng tương thích cung cấp điều khiển tinh vi chữ +SVG : Định dạng vector dựa hỗ trợ IOS Apple IPod +Web open font format (WOFF): Bao gồm nhiều khả nén tập tin font chữ tối ưu hóa +Embedded OpenType (EOT) - Sử dụng dịch vụ web để tạo nhiều font @font-face Ơ Font-family: ‘SigmarRegular’; Src: url(‘fonts/sigmarone-webfont.eot’); Src: url(‘fonts/sigmarone-webfont.eot?#iefix’) format(‘embedded-opentype’), Src: url(‘fonts/sigmarone-webfont.woff) format (truetype), Src: url(‘fonts/sigmarone-webfont.svg#SigmarRegular’) format (‘svg’); Font-weight: nomal; Font-style: nomal; } GVGD: Hoàng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 21 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thơng tin Chèn nhiều hình với CSS3 Cách sử dụng nhiều hình (Multiple Backgrounds) CSS3 Có lẽ nhiều bạn việc chèn hình vào web khơng xa lạ Nhưng lại bị giới hạn chèn hình (background) phần khai báo Bây giờ, với hỗ trợ CSS3, cho hiển thị nhiều hình với khai báo Để bạn dễ hiểu, xem lại cách mà muốn hiển thị nhiều hình web .overcast1 { background-image: url("images/overcast.png"); background-position: 150px 25px; } rainbow { background-image: url("images/rainbow.png"); background-position: 200px 10px; } overcast2 { background-image: url("images/overcast.png"); background-position: 250px 25px; } sunny { background-image: url("images/sunny.png"); background-position: 100px 10px; } Trong đoạn code , để hiển thị nhiều ảnh (background) phải tạo nhiều thẻ với lớp (class) khác để hiển thị cho ảnh Nhưng với CSS3 , bạn gom thành lớp .weather { width: 500px; height: 280px; margin: 50px auto; background-image: url("images/overcast.png"), url("images/rainbow.png"), url("images/overcast.png"), GVGD: Hoàng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 22 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin url("images/sunny.png"); background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px; background-repeat: no-repeat; } Trong đoạn code trên, chèn hình với vị trí khác nhau, kết hiển thị giống hình bên : GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 23 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin - Ghi chú: + Không nên sử dụng kết hợp thuộc tính border-image thuộc tính borderradius + Gradient css giống với gradient tạo chương trình đồ họa: có điểm dừng màu điểm chuyển màu + Có thể tạo nhiều điểm dừng màu điểm chuyển màu để gradient phong phú + Sử dụng giá trị vị trí: top, left, right, bottoom để điều chỉnh xác nhiều hình CSS Giới thiệu CSS3 Media Queries - Media Query bước cải tiến luật @media cách kết hợp Media Type thơng số khác độ phân giải, kích thước, màu sắc,… để tăng thêm tính chặt chẽ linh hoạt luật Mỗi luật Media Query biểu thức logic áp dụng có giá trị true - Các Media Query sử dụng cách dùng thẻ HTML thẻ XML, ngồi HTML bạn dùng luật @import @media Các ví dụ sau áp dụng style css cho loại máy vi tính hỗ trợ màu: - Đối với trình duyệt, thiết bị giao tiếp với máy chủ lưu trữ website tự định dạng với user agent string - CSS3 media queries: + Hình thức nhận biết thiết bị + Kiểm tra khả người dùng truy cập vào trang web + Nhận biết (phát hiện) được: chiều cao, chiều rộng trình duyệt, thiết bị, thiết bị định hướng (phong cảnh/ chân dung), độ phân giải - Sử dụng CSS3 media queries để cung cấp layout phù hợp với cho layout mobile Ví dụ: @media only screen and (max-width: 480px) { Body {padding: 5px; background-color:#FFF; background-image:url (images/smoothieworld_logo_mobile.jpg); background-repeat:no-repeat; } - Quy định chiều rộng trang hiển thị thiết bị @media only scrceen and (max-device-width:480px) - Điều hướng thiết bị di động: + Nên thiết kế vị trí điều hướng đơn giản hiển thị trình duyệt máy tính + Gợi ý:  Nên có, nên để gần đầu hình để dễ truy cập  Lặp lại điều hướng phía trước trang GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 24 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin   Với thiết bị cảm ứng, sử dụng kích thước lớn cho link điều hướng Tránh điều hướng từ hình ảnh, nên dựa danh sách chuyển hướng dạng CSS Ví dụ: #mainnav {height: auto;} #mainnav li { Float:none; Width: auto; Text-align:left; Border-top: 1px grey solid; Border-bottom:1px grey solid; } Làm việc với CSS3 layout dạng nhiều cột cấu trúc hộp Flex - CSS cung cấp thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều cột: + column-count: Quy định cụ thể số lượng cột phần tử chia thành + Column-width: Quy định cụ thể chiều rộng cột + Column-grap: Quy định khoảng cách cột + Column-rule: Là thuộc tính viết tắt, cho phép thiết lập tất thuộc tính: chiều rộng, style, màu sắc cột - Cách thiết lập: #introduction-content { Width: 600px; -moz-column-count:3; -webkit-column-count: 3; Colimn-count: 3; } - Thiết lập layout dạng hộp Flexible (Hộp linh hoạt): + Là dạng bố cục CSS3 + Đại diện cho bốn dạng layout hỗ trợ CSS2.1 Ví dụ: #introduction-content { width: 600px; height: 150px; border: 1px solid #821738; display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box; -moz-box-orient: horizontal; } CSS3 user interface - CSS3 cung cấp số tính phía người dùng: + Thay đổi kích thước thành phần trang + Thay đổi kích thước hộp + Phác thảo - Các thuộc tính quy định + Resize GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 25 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin + box-sizing + outline-offset - CSS3 resize: + Quy định thành phần hay khơng thể thay đổi kích thước người dùng Ví dụ: show_boxre {border:2px solid; padding:10px 40px; width:300px; resize:both; overflow: auto;} - CSS3 box-sizing: + Cho xác định yếu tố phù hợp với khu vực Ví dụ: CSS3: div.contrainer { width:30em; border:1em solid;} div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-boxsizing:border-box; width:50%; border:1em solid red; float:left;} HTML: This div occupies the left half This div occupies the left half CSS3 Outline Offset: + Quy định đường biên, bao phía bên ngồi đường biên mặc định + cách tạo đường outline  Không thời gian  Khơng phải dạng hình chữ nhật - CSS3 Outline Offset Div {margin:20px; Width:150px; Padding:10px; Height:70px; Border:2px solid black; Outline: 2px solid red; Outline-offset:15px;} - Sử dụng CSS3 media queries để thiết kế layout phù hợp với trình duyệt, thiết bị - CSS3 giúp người thiết kế tạo dạng layout nhiều cột Giúp bố trí thơng tin thuận tiện, rõ ràng cho người dùng - CSS3 cung cấp số thuộc tính để tương tác với người dùng duyệt web Người dùng thay đổi kích thước thành phần trang III Demo HTML5 CSS3 GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 26 Trường ĐH SPKT Hưng Yên Khoa: Công nghệ Thông tin TÀI LIỆU THAM KHẢO GVGD: Hồng Văn Quyết Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang Page 27 ... quan HTML5 CSS3 HTML5 CSS3 gì? HTML5 CSS3 version HTML CSS Nó bổ sung thêm đặc tính để giúp cho việc thiết kế web dễ dàng hơn, đồng thời làm cho trang web hiển thị sinh động với người xem Vài... Hưng Yên Khoa: Công nghệ Thơng tin II Tìm hiểu CSS3 Tổng quan CSS3 Là tiêu chuẩn CSS CSS3 chưa thức sử dụng rộng rãi mà làm đáng mong đợi Về mặt ngun lý đời CSS3 phần lấn sân Javascript Bởi người... nhiều trang web mà sử dụng HTML5 CSS3 CNN.com, The NewYork - Phiên bàn IE8 hỗ trợ HTML5 hạn chế,còn IE9 hỗ trợ H264 video, âm nhùng, đồ họa vector tỷ lệ CSS3 - HTML5 CSS3 kết hợp với cơng nghệ