Đề tài Nguyên lý sáng tạo được ứng dụng trong HTML 5 và CSS 3

ung một định dạng văn bản. 
  Bên trong khai báo CSS là sự kết hợp của rất nhiều thuộc tính. Ví dụ: 
 body{ 
 margin: 0; 
 padding: 0; 
 font-weight: inherit; 
 font-style: inherit; 
 font-size: 100%; 
 font-family: inherit; 
 vertical-align: baseline; 
 border-left:0; 
 } 
  Một thẻ HTML còn có thể kết hợp nhiều khai báo của CSS. Ví dụ: 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 13 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 … 
 “center” và “header” là hai khai báo riêng, mỗi khai báo sẽ có những 
 thuộc tính riêng. Khi kết hợp lại với nhau, thẻ sẽ mang thuộc 
 tính của cả hai. 
 - Nguyên tắc tách khỏi 
  Như ví dụ trên, việc tách làm hai khai báo CSS này rất hữu ích khi 
 khai báo “center” là dùng để canh chỉnh nội dung của thẻ div và có 
 thể dùng cho nhiều đối tượng thẻ khác. Còn CSS “header” có thể chỉ 
 được dùng cho các mục đích trong đầu trang nên việc tách này rất 
 linh động trong việc sử dụng các khai báo CSS dùng chung. 
 - Nguyên tắc phân nhỏ 
  CSS có chức năng phân nhỏ các đối tượng khai báo thành nhiều dạng 
 tương ứng với các thẻ, các id và các class. Ví dụ: 
 Với thẻ HTML: 
 Để chỉnh kiểu CSS cho thẻ div: div { padding-left: 5px; } 
 Để chỉnh kiểu CSS cho id: .id_header { padding-left: 5px; } 
 Để chỉnh kiểu CSS cho class: #class_header { padding-left: 5px; } 
  CSS còn phân nhỏ để xử lý kiểu cho một số các sự kiện cơ bản như: 
 a:hover, a:active v.v… 
  Ngoài ra, CSS còn chia thành ba dạng CSS là inline, embedded và 
 external. 
 - Nguyên lý vạn năng 
  CSS có thể sử dụng được trong hầu hết các website chạy trên các 
 thiết bị từ desktop, laptop đến smartphone. Và hầu hết tất cả các 
 thuộc tính trong CSS đều được tất cả các trình duyệt hiện nay hỗ trợ. 
 II. Những điểm mới trong CSS 3 
 1. Hiệu ứng bo tròn 
 Trong CSS 2, việc bo tròn các góc thật không dễ dàng gì. Người thiết kế 
 web phải thêm các hình có góc bo tròn khi có yêu cầu bo tròn các góc. Còn 
 trong CSS3, chúng ta chỉ cần bo góc 1 thẻ div hay table chỉ bằng 1 thuộc tính 
 border-radius. 
 Ví dụ: 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 14 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 #ViduB { 
 -moz-border-radius-bottomright: 50px 25px; 
 } 
 Như vậy , trên trình duyệt sẽ hiển thị như sau: 
 Hình 9: Bo tròn góc trong CSS 
 2. Một số lựa chọn mới cho CSS 
 CSS 3 đã thêm vào một số lựa chọn mới như nth-child, :not. 
 Ví dụ: 
 .row:nth-child(even) { 
 background: #dde; 
 } 
 .row:nth-child(odd) { 
 background: white; 
 } 
 Trên trình duyệt sẽ hiển thị: 
 Hình 10: Dòng chẵn và dòng lẻ với CSS 3 
 3. Tính năng mới cho Background 
 Background đã được mở rộng thêm các tính năng mới như điều chỉnh 
 kích thước hình ảnh trong background, và có thể khai báo nhiều hình ảnh trong 
 một thuộc tính background. 
 Ví dụ: 
 Trong điều chỉnh kích thước background: 
 #logo { 
 background: url(logo.gif) center center no-repeat; 
 background-size: auto ; 
 } 
 Trên trình duyệt sẽ hiển thị: 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 15 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 Hình 11: Hình ảnh hiển thị với auto size 
 Còn khi chỉnh auto thành 100% trong thuộc tính background-size thì 
 trình duyệt sẽ hiển thị: 
 Hình 12: Hình ảnh hiển thị với size = 100% 
 Còn với multiple background, ta có đoạn CSS như sau: 
 div { 
 background: url(src/zippy-plus.png) 10px center no-repeat, 
 url(src/gray_lines_bg.png) 0 center repeat-x; 
 } 
 Và trình duyệt sẽ hiển thị hai hình ảnh trong một thẻ div. Hình đầu tiên là 
 hình nền xám và hình nền thứ hai là dấu [+]. 
 Hình 13: Multiple background trong CSS 3 
 4. Hiệu ứng biến đổi hình dạng thẻ 
 CSS 3 có rất nhiều tính năng mới độc đáo như xoay, phóng to, thu nhỏ. 
 Ví dụ: 
 Hình 14: Xoay thẻ div bằng CSS 3 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 16 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 5. Đổ bóng cho text 
 CSS 3 đã hỗ trợ thêm tính năng đổ bóng cho text. 
 Ví dụ: Ta có đoạn CSS như sau: 
 .text_shadow 
 { 
 text-shadow: 2px 2px 2px #000; 
 } 
 Trên trình duyệt sẽ hiển thị: 
 Hình 15: Text được đổ bóng với CSS 3 
 6. Hiệu ứng trong suốt 
 CSS 3 đã hỗ trợ hiệu ứng trong suốt cho các thẻ HTML. 
 Ví dụ: 
 Với đoạn CSS sau: 
 div 
 { 
 opacity:0.6; 
 filter:alpha(opacity=60); 
 } 
 Trang web trên trình duyệt thì sẽ hiển thị như sau: 
 Hình 16: Hình nền trong suốt với CSS 3 
 7. Hiệu ứng phối màu 
 Hiệu ứng này giúp cho các thẻ hiển thị trên trang web với các màu sắc 
 liên kết, phối màu với nhau. CSS 3 còn hỗ trợ phối màu theo nhiều chiều khác 
 nhau: từ trên xuống, từ trái qua phải hay đổ màu từ tâm hình tròn.Ví dụ: với 
 đoạn mã CSS sau: 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 17 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 div 
 { 
 background:-moz-linear-gradient(80% 73% 184deg, #BDA3E3, 
 #FF9628 75%) 
 } 
 Trên trình duyệt sẽ hiển thị: 
 Hình 17: Hiệu ứng đổ màu với CSS 3 
 Hình dưới là dạng phối màu từ tâm hình tròn ra: 
 Hình 18: Hiệu ứng đổ màu từ tâm hình tròn ra 
 8. Hiệu ứng chuyển động 
 Hiệu ứng này giúp tạo hiệu ứng chuyển động cho các thẻ. Chúng có thể 
 tạo ra các hiệu ứng như xoay, phóng to, thu nhỏ, chỉnh nghiêng, biến dạng. 
 Chúng ta có thể tham khảo những hiệu ứng này ở trang web 
 Ví dụ: 
 .classname { 
 -webkit-animation: cssAnimation 1s 16 ease; 
 -moz-animation: cssAnimation 1s 16 ease; 
 } 
 III. Các nguyên tắc sáng tạo được ứng dụng trong CSS 3 
 1. Nguyên tắc chuyển sang chiều khác 
 Được thấy rõ nhất trong việc thay thế các hình ảnh bằng những thuộc 
 tính với cấu trúc đơn giản. Thay vì phải sử dụng hình ảnh để hiển thị màu 
 Gradient, bo tròn góc và xoay các khung làm việc, thì trong CSS 3, chỉ cần một 
 vài lệnh CSS đơn giản để thực hiện những việc đó. Điều này giúp cho nhà thiết 
 kế web có thể rút ngắn được thời gian chỉnh sửa hình ảnh và việc thay đổi màu 
 sắc, hình dạng của trang web cũng dễ dàng hơn. 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 18 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 2. Nguyên tắc phân nhỏ 
 Mỗi trình duyệt đều có sự hỗ trợ riêng như khi áp dụng cho FireFox thì 
 thêm prefix “-moz-“ phía trước thuộc tính, “-O-“ cho Opera, -webkit- cho 
 Internet Explorer. 
 3. Nguyên tắc rẻ thay cho đắt 
 Các hiệu ứng chuyển động Animation, mặc dù chỉ là những chuyển động 
 đơn giản nhưng cũng có thể thay thế một số thành phần trên trang web như các 
 banner quảng cáo. Với CSS 2 thì việc làm các thẻ HTML chuyển động là không 
 thể. Khi đó, muốn trang web sinh động, người thiết kế web phải thêm vào các 
 plug-in khác như Flash hay phải sử dụng jQuery. 
 Việc để cho trình duyệt tự động biên dịch các mã CSS 3 sẽ giúp giảm tải 
 cho server. Các hình ảnh thường ít nhiều ảnh hưởng đến việc truyền tải dữ liệu. 
 Do đó, khi truyền tải dữ liệu cho máy khách thì truyền một số mã lệnh CSS đơn 
 giản sẽ hiệu quả, nhanh hơn so với truyền nhiều hình ảnh xuống máy khách. 
 4. Nguyên tắc vạn năng 
 CSS 3 được thiết kết để hỗ trợ tất cả các trình duyệt từ smartphone đến 
 desktop. Các khai báo của CSS 3 có thể đơn giản nhưng lại rất linh động trong 
 việc hiển thị trên giao diện màn hình. 
 Trong một website, khi muốn sử dụng những chuyển động, hiệu ứng cho 
 các thẻ HTML thì cần phải có thêm sự hỗ trợ của Flash, Jquery hay Javascript. 
 Nhưng với CSS 3, thì việc này đơn giản hơn là chỉ cần khai báo các CSS với 
 hiệu ứng chuyển động cho các thẻ HTML. 
 5. Nguyên tắc thay đổi màu sắc 
 Trong các phiên bản trước, CSS chỉ hiện thị được một màu trong một thẻ 
 HTML. Để có thể sử dụng được màu Gradient trong cùng một thẻ thì cần phải 
 đặt thuộc tính image-background là một hình màu Gradient. CSS 3 đã khắc 
 phục được điểm đó, thay vì phải truyền tải một hình xuống trình duyệt phía máy 
 khách, thì chỉ cần truyền tải đoạn mã CSS và trình duyệt sẽ tự động biên dịch 
 thành màu mong muốn. 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 19 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 PHẦN III : Kết luận 
 HTML 5 và CSS 3 hiện nay vẫn chưa được phổ biến rộng rãi so với 
 HTML 4 và CSS 2.1. Các trình duyệt (IE, FireFox, Chome v.v…), các công cụ 
 và ngôn ngữ lập trình cho phát triển website hiện nay (ASP.NET, Java v.v…) 
 vẫn chưa chính thức hỗ trợ tất cả tính năng của HTML 5 và CSS 3. Nhưng với 
 những tính năng và hiệu suất vượt trội so với các phiên bản cũ thì HTML 5 và 
 CSS 3 sẽ dần thay thế và trở thành phổ biến trên internet. 
 Hiện nay, trên internet đã có một số website demo về các tính năng của 
 HTML 5 và CSS 3. Qua những website này, chúng ta có thể thấy được tính 
 năng vượt trội của HTML 5 và CSS 3: 
 - Demo các thuộc tính và các thẻ: 
 demo 
 - Các game phát triển trên HTML 5:  
 - Demo cho CSS 3 và có sẵn các mã CSS tham khảo: 
 Kính xin cám ơn giảng viên phụ trách môn học đã giảng dạy nhiệt tình 
 cũng như chỉ bảo rất nhiều giúp bản thân em hoàn thành đề tài. 
 Xin cám ơn các bạn đã theo dõi. 
 Mong nhận được sự đánh giá và nhận xét của thầy và các bạn. 
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 20 
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH 
CHƯƠNG TRÌNH ĐẠO TẠO THẠC SĨ CNTT QUA MẠNG 
 PHẦN IV : Tài liệu tham khảo 
 1. Tài liệu về phương pháp nghiên cứu khoa học trong tin học: 
 - Phan Dũng, Phương pháp luận sáng tạo khoa học kỹ thuật. 
 - Slide Phương pháp nghiên cứu khoa học trong tin học, GS.TSKH Hoàng 
 Kiếm. 
 2. Lịch sử HTML: 
 -  
 -  
 -  
 -  
 3. Các tính năng của HTML 5: 
 -  
 -  
 -  
 -  
 4. Lịch sử CSS: 
 -  
 -  
 - 
 +css 
 5. Các tính năng trong CSS 3: 
 -  
 -  
 -  
MÔN HỌC : PHƯƠNG PHÁP NGHIÊN CỨU KHOA HỌC TRONG TIN HỌC 21