Home HTML căn bản Hướng dẫn thao tác với HTML - Thực hành chương 4 March 07, 2023 >> Giáo trình Chương 4: DYNAMIC HYPERTEXT MARKUP LANGUAGEKey: Hướng dẫn lập trình web Bài 2: CSS Nội dung: - Dựng bảng kiểu ở 3 mức o Thuộc tính o Phần tử style Các thẻ HTML Class ID o Liên kết ngoài - Bài tập tự làm Bài 1: Định kiểu bằng thuộc tính Style Tạo hiệu ứng đổ bóng cho chữ bằng định vị tọa độ theo trục top, left, z-index Tham khảo: http://www.w3schools.com/css/css_positioning.asp Bt1_1.html <html> <body> <h1 style="position:absolute;left:50px;top:50px;z-index:-1; color:grey"> <h1 style="position:absolute;left:52px;top:52px;z-index:0; color:red"> </BODY> </HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> Tin học</H1> Tin học </H1> Ghi chú: w3refer.com Hướng dẫn lập trình web position:absolute; xác định theo trục tọa độ tuyệt đối left:50px;top:50px;z-index:-1; Tạo hiệu ứng hình trên chữ, nhưng vẫn theo luồng hiển thị Bt1_2.html Ghi chú: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1>Giới thiệu Đại học Tây Đô qua ảnh</H1> <p><img src="img/taydouni.jpg"></p><h3 style="position:relative;left:10px;top:-52px;z-index:0; color:red">Khu nhà chữ U - dãy phòng D</h3></BODY> </HTML> position:relative; xác định theo vị trí hiện thời của đối tượng trong trình tự code HTML left:10px;top:-52px;z-index:-1; Bài 2: Định kiểu bằng phần tử Style w3refer.com Hướng dẫn lập trình web Tạo hiệu ứng đổi màu nền, màu chữ của liên kết khi đưa chuột lên. Qui định áp dụng cho mọi liên kết trong trang => gài qui định cho thẻ <a> Tham khảo: http://www.w3schools.com/css/css_link.asp Bt2.html Ghi chú: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Linking in the Same Document </TITLE> <style type="text/css"> a:hover {color:#FF00FF; background-color:grey;} </style> </HEAD> <body> <h1><center>MÔN HỌC</CENTER></H1> <a HREF="oop.html">Lập trình hướng đối tượng C++</A><br> <a HREF="web.html">Thiết kế lập trình web</A><br> </BODY> </HTML> a:hover: định hiệu ứng về kiểu khi đưa chuột lên liên kết Bài 3: Lưu định kiểu ra file ngoài, khi sử dụng sẽ liên kết tới Sử dụng lại bài 2, chuyển code định kiểu ra ngoài Sheet1.css B3.html a:hover {color:#FF00FF; background-color:grey;} <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Linking in the Same Document </TITLE> <link REL=STYLESHEET TYPE="text/css" HREF="sheet1.css"> </HEAD> Đã có Source hướng dẫn thực hành bên dưới, vui lòng bấm Download để nhận trọn bộ Source code.Download Full CodePassword giải nén: WWW.TAVN.NET
Post a Comment