- Khi sử dụng float, bắt buộc phải sử dụng width cố định (responsive khó). Float làm cho thẻ ngay sau nó tràn lên mà không quan tâm thuộc tính block hay inline.
Sử dụng thuộc tính này để dựng giao diện, có khối nằm ngang, nằm dọc nằm trên nhau trong một trang web. Tràn lên theo hướng trái hoặc phải phụ thuộc vào hướng của float. Khi sử dụng float thì những thẻ ngay sau nó sẽ tràn lên, nếu không muốn tràn lên chẳng hạn như thẻ màu vàng không muốn tràn lên ta sử dụng clear: left| right cùng với thuộc tính thẻ float.
-float: left | right;
-clear: left | right | both;Không muốn tràn về bên trái dùng left, không muốn tràn bên phải dùng right.
Khái niệm về floatMặc định hiển thị là thứ tự từ trên xuống dưới mà khi làm giao diện cái nằm trên, nằm dưới trang báo.
Float:left|right có hai loại left và right. Khi là float chỉ nên chọn left hoặc right để không bị vỡ giao diện.
Ví dụ: Lưu file float.html Float.html
<body>
<div id ="left"> left </div> <div id ="center"> center </div> <div id ="right"> right </div> </body> Kết quả chạy Style.css #left { width: 100px; height: 80px; background-color: blueviolet; float:left; } #center { width: 100px; height: 80px; background-color:yellow; float:left; } #right {
Float: Left; Float: Left; Float: Left; Float: Left;
width: 100px; height: 80px;
background-color: green;
float:left;
}
Thuộc tính clear được dùng để xóa thuộc tính float.Nếu chúng ta gặp trường hợp bị thuộc tính float ảnh hưởng và muốn xóa thuộc tính này thì ta dùng thuộc tính clear như sau:
Xóa float: left; dùng clear: left; Xóa float: right; dùng clear: right; Ví dụ: <body> <div>1</div> <section>2</section> </body> Style.css div{ float: right; height: 100px; width: 100px; background-color: green; } section{ height: 200px; background-color: yellow; }
Muốn tách khối 1 và hai trên mỗi khối một dòng và khối màu xanh vẫn nằm ở bên phải ta dùng thêm thuộc tính
clear: both; ở thẻ section.
Ví dụ:
font-size:18px; } </style> </head> <body> <h2>Float Right</h2>
<p>Phát hiện xe chở đầy bom và súng gần quốc hội Mỹ ngày xảy ra bạo loạn.</p> <p><imgsrc="capitol-
1610199388289.jpg"alt="Phát hiện bom và súng gần quốc hội Mỹ"style="width:170 px;height:170px;margin-left:15px;">
Các công tố viên liên bang Mỹ cho biết, một người đàn ông có tên Lonnie Leroy Co ffman đến từ bang Alabama bị cáo buộc đã đậu một chiếc xe bán tải với 11 quả bom tự chế, một súng trường và một súng ngắn gần trụ sở quốc hội Mỹ ở thủ đô Washington DC sáng 6/1, ngày xảy ra biểu tình bạo loạn ngăn quốc hội xác nhận kết quả bầu cử. M ột đội rà bom đã phát hiện ra
chiếc xe khi dò tìm quanh khu vực vài giờ sau đó.Coffman khai với cảnh sát rằng, ô ng ta có những chiếc lọ chứa đầy "xốp nung chảy và xăng". Theo các nhà điều tra, hỗn hợp này nếu phát nổ sẽ có sức công phá như bom napalm.</p>
</body> </html>
Hiển thị trên web:
9.position & z-index: Sử dụng nhiều khi làm menu
Position có ý nghĩa như thế nào trong css? Position có chức năng định vị thẻ đó trong một trang hoặc định vị trong thẻ nào đó nhưng nó không làm thay đổi vị trí ngay mà nó phải kết hợp với thuộc tính khác.
-position: relative | absolute | static | fixed Trong đó:
- Đi kèm với Position là những thuộc tính để quy định khoảng cách của nó với đường viền của trình duyệt hoặc khoảng cách của nó với viền của thẻ bao nó.:
left: ?px; right: ?px; bottom: ?px; top: ?px; Ví dụ: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Position in css</title> <style> div{ position: absolute; left: 100px; top:0px;
border: 2px solid orange; } </style> </head> <body> <h2> Học lập trình web</h2> <div> HỌC LẬP TRÌNH WEB </div> </body> </html> Hiển thị web:
Khi đưa position: absolute;trong thẻ div thì tính chất của thẻ thay đổi từ block sang thẻ inline và định vị với trình duyệt cách left:100px; top: 0px; thì nó sẽ phá vỡ quy luật của css thẻ nào khai báo trước được hiện thị trước mà nó sẽ hiển thị theo định vị left, top, right, bottom. position: relative; thì tính chất của thẻ không thay đổi.Khi dùng thuộc tính position: absolute|fixed; nó sẽ phá vỡ trật tự của html. Ứng dụng thay đổi vị trí thẻ trên trang và vị trí của thẻ là cố định ví dụ như phần chat cố định bên phải khi mở trang web, hoặc làm menu.
-z-index: number;
(Chỉ sử dụng được khi có position)
Chú ý: Thẻ nào có z-index cao hơn, thẻ đó nằm ở trên Ví dụ: Đặt 3 thẻ div hiển thị như hình mẫu
<!DOCTYPEhtml> <htmllang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>z-index in css</title> <style> div{ width:100px; height:100px; background:red; } .two{ background:yellowgreen; } .three{ background:green; } </style> </head> <body> <divclass="one"></div> <divclass="two"></div> <divclass="three"></div> </body> </html> 10. hover trong css
“:hover” chọn các liên kết được hover (di chuyển chuột lên thành phần). Cấu trúc
property : value; } Ví dụ: HTMl viết <html> <head></head> <body>
<p><a href="#">Học web chuẩn</a></p> <p><a href="#">Google</a></p> <p><a href="#">vnexpress</a></p> </body> </html> Hiển thị trình duyệt khi chưa có css CSS VIẾT a:hover { background: #ff0000; color: #fff; } Hiển thị trình duyệt có css
Hover qua link sẽ thấy hiệu ứng khung chữ có màu đỏ.
11. opacity vs visibility & display - Làm mờ, ẩn đi
+ opacity: 0.1 -> 0.9 or 1
0.1 -> 0.9 : Độ mờ của thẻ đó 1: Hiển thị hoàn toàn
12. before & after & ::first-line in css Ví dụ ở page7
BÀI TẬP THỰC HÀNH
Bài 1: Dựng menu ngang cấp 1
Hướng dẫn code <!DOCTYPEhtml> <htmllang="en">
background:#57a929; height:45px; } nav ul { list-style-type:none; align-items:center; display:flex; line-height:45px; justify-content:space-around; /* cách đều nhau giữa các thẻ li */ } nav ul li a{ text-decoration:none; color:white; } </style> </head> <body> <nav> <ul>
<li><ahref="">Trang chủ</a></li> <li><ahref="">Sản phẩm</a></li> <li><ahref="">Giới thiệu</a></li> <li><ahref="">Tin tức</a></li> <li><ahref="">Sự kiện</a></li> <li><ahref="">Khuyến mại</a></li> <li><ahref="">Liên Hệ</a></li> </ul>
</nav> </body> </html>
Bài 2: Dựng menu ngang cấp 1 theo mẫu: Gồm có Trang chủ, Giới thiệu, Bản đồ, Liên Hệ, Sản Phẩm.
Hướng dẫn code <!DOCTYPEhtml> <htmllang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>VD Menu da cap</title>
<style> *{ margin:0px; padding:0px; } body{
font-family:'Times New Roman',Times,serif; font-size:16px; font-weight:300; } #menu{ width:1200px; height:40px; background:green;
/* căn menu ra giữa trình duyệt */ margin:0pxauto; margin-top:50px; } ul.root >li{ list-style-type:none; /* các menu nằm trên một hàng */ float:left; position:relative; } ul.root >li >a{ /* bỏ gạch chân ở thẻ a */ text-decoration:none; color:black; line-height:40px; padding:0px 12px 0px 12px; display:block;
display:none; position:absolute; } ul.submenu li { list-style:none; } ul.submenu li a{ text-decoration:none; color:white; display:block; border:1pxsolid #cccccc; line-height:40px; text-indent:10px; }
/* click vào mới hiển thị */ ul.root >li:hover ul.submenu{
display:block; } ul.submenu li a:hover{ background:yellow; color:red; } </style> </head> <body> <divid="menu"> <ulclass="root"> <li><ahref="#">Video</a></li> <li><ahref="#">Sự kiện</a></li> <li><ahref="#">Xã hội</a>
<ulclass="submenu">
<li><ahref="#"> Đại hội Đảng</a></li> <li><ahref="#"> Chính trị</a></li>
<li><ahref="#"> Phóng sự- Ký sự</a></li> <li><ahref="#"> Giao thông</a></li> </ul>
</li>
<li><ahref="#">Thế giới</a> <ulclass="submenu">
<li><ahref="#"> Châu Á</a></li> <li><ahref="#"> Eu & Nga</a></li> <li><ahref="#"> Châu Mỹ</a></li> <li><ahref="#"> Điểm nóng</a></li> <li><ahref="#"> Tư liệu</a></li> </ul>
</li>
<ulclass="submenu">
<li><ahref="#"> Bóng đá trong nước</a></li> <li><ahref="#"> Bóng đá châu Âu</a></li> <li><ahref="#"> Võ thuật</a></li>
<li><ahref="#"> Tennis</a></li>
<li><ahref="#"> Các môn thể thao khác</a></li> </ul>
</li>
<li><ahref="#">Việc làm</a> <ulclass="submenu">
<li><ahref="#"> Chính sách</a></li> <li><ahref="#"> Việc làm</a></li> <li><ahref="#"> Đào tạo</a></li>
<li><ahref="#"> Xuất khẩu lao động</a></li> <li><ahref="#"> Chúng tôi nói</a></li> </ul>
</li>
<li><ahref="#">Sức khỏe</a> <ulclass="submenu">
<li><ahref="#"> Ung thư</a></li>
<li><ahref="#"> Kiến thức giới tính</a></li> <li><ahref="#"> Tư vấn</a></li>
<li><ahref="#"> Làm đẹp</a></li> <li><ahref="#"> Đại dịch covid</a></li> </ul>
</li>
<li><ahref="#">Nhân ái</a></li> <li><ahref="#">Bất động sản</a>
<ulclass="submenu">
<li><ahref="#"> Dự án</a></li> <li><ahref="#"> Thị trường</a></li> <li><ahref="#"> Nhịp sống đô thị</a></li> <li><ahref="#"> Sống xanh</a></li>
<li><ahref="#"> Sắc màu Nhật Bản</a></li> </ul>
</li>
<li><ahref="#">Sức mạnh số</a></li> <li><ahref="#">Giáo dục</a>
<ulclass="submenu">
<li><ahref="#"> Đời sống văn hóa</a></li> <li><ahref="#"> Điện ảnh</a></li>
<li><ahref="#"> Âm nhạc</a></li> <li><ahref="#"> Văn học</a></li>
<li><ahref="#"> Sân khấu - Dân gian</a></li> <li><ahref="#"> Hạt giống tâm hồn</a></li> <li><ahref="#"> Hương vị Việt</a></li> </ul>
</li>
<li><ahref="#">Giải trí</a> <ulclass="submenu">
<li><ahref="#"> Sao Việt</a></li> <li><ahref="#"> Hoolywood</a></li> <li><ahref="#"> Châu Á</a></li> <li><ahref="#"> Thời trang</a></li> <li><ahref="#"> Xem - Ăn - Chơi</a></li> </ul>
</li>
<li><ahref="#">Du lịch</a> <ulclass="submenu">
<li><ahref="#"> Tin tức</a></li> <li><ahref="#"> Khám phá</a></li>
<li><ahref="#"> Món ngon- Điểm đẹp</a></li> <li><ahref="#"> Tour hay- Khuyến mại</a></li> </ul>
</li>
<li><ahref="#">Pháp luật</a></li> </ul>
</div> </body> </html>
Bài 4 Tạo file login css.html theo mẫu:
Hiệu ứng khi tích chuột vào Username và password thì khung rộng 280px, và màu viền đổi thành màu:#2ecc71
<!DOCTYPEhtml> <htmllang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>form login</title>
<style> body{
margin:0px; padding:0px;
font-family:'Times New Roman',Times,serif; background:#34495e; } .box{ width:300px; padding:40px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#191919;
border:0px; background:none; display:block; margin:20pxauto; text-align:center; border:2pxsolid #3498db; padding:14px 10px; width:200px; outline:none; color:white; border-radius:24px; transition:0.25s; }
.box input[type="text"]:focus,.box input[type="password"]:focus{ width:280px;
border-color:#2ecc71; }
.box input[type="submit"]{ border:0px; background:none; display:block; margin:20pxauto; text-align:center; border:2pxsolid #175317; padding:14px 40px; width:150px; outline:none; color:white; border-radius:24px; transition:0.25s; }
.box input[type="submit"]:hover { background:#175317;
} </style> </head> <body>
<formclass="box"action="index.html"method="post"> <h1>LOGIN</h1>
<inputtype="text"name=""placeholder="Username"> <inputtype="password"name=""placeholder="password"> <inputtype="submit"name=""value="Login">
</form> </body> </html>
Bài tập 5: Lưu fileĐÓNG GÓP Ý KIẾN.HTML
Yêu cầu:
Sử dụng thẻ form, table, input với kiểu dữ liệu text, email, number để thể hiện dữ liệu ô Họ và tên, Địa chỉ, Số điện thoại và Email.
Định dạng toàn trang:
+ Màu nền của trang web màu xanh: ackground-color: burlywood;
+ Chữ có kích thước 18px; font-family: 'Times New Roman', Times, serif; + Chữ: ĐÓNG GÓP Ý KIẾN VÀ BẢNG CĂN GIỮA
-Độ rộng của bảng: 500px, màu nền bảng màu trắng
- Độ rộng của ô nhập Họ và Tên, Địa chỉ, Email, và số điện thoại có độ rộng 300px và chiều cao 40px.
- Hai ô thực hiện các định dạng sau:
+ Kiểu dữ liệu button có độ rộng 60px và chiều cao 40px: width: 60px; height: 40px;
+ Mmàu nền màu xám (gray): background-color: gray;
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Đóng góp ý kiến</title>
<style> body{
font-family: 'Times New Roman', Times, serif; font-size: 18px;
background-color: burlywood; }
table, td, tr{
/* border: 1px solid grey; */ margin-top: 10%;
background-color: honeydew; width: 500px;
}
/* input[type=emai], input[type=text], input[type=number]{ width: 300px;
height: 40px; } */
/* cách 2: đặt tên những input có chung đặc điểm một tên class */ .Noidung{ width: 300px; height: 40px; } input[type=submit], input[type=reset]{ width: 60px; height: 40px; background-color: gray; padding: 10px 10px 10px 10px;
/* tích chuột vào ô gửi và xóa có hình bàn tay */ cursor: pointer; font-size: 16px; font-weight: 800; } input[type=submit]:hover, input[type=reset]:hover{ background-color: lightseagreen; width: 80px; border-radius: 5px; } </style> </head> <body> <form action=""> <table align="center">
<!-- hàng 1 --> <tr>
<td colspan="2" align="center"><H2>ĐÓNG GÓP Ý KIẾN</H2></td> </tr>
<!-- Hàng 2 --> <tr>
<td>Họ và tên*</td>
<td><input type="text" class="Noidung"></td> </tr>
<!-- Hàng 3 --> <tr>
<td>Địa chỉ</td>
<td><input type="text" class="Noidung"></td> </tr>
<!-- Hàng 4 --> <tr>
<td>Số điện thoại*</td>
<td><input type="number" class="Noidung"></td> </tr>
<!-- Hàng 5 --> <tr>
<td>Email</td>
<td><input type="email" class="Noidung"></td> </tr>
<!-- Hàng 6 --> <tr>
<td>Nội dung góp ý</td>
<td> <textarea name="" id="" cols="40" rows="5"></textarea> </td> </tr>
<!-- Hàng 7 --> <tr>
<td colspan="2" align="center"> <input type="submit" value="Gửi"> <input type="reset" value="Xóa"> </td>
</tr> </table> </form>
Yêu cầu:
- Đổi tên tiêu đề ĐĂNG NHẬP
- Sử dụng thẻ form, input kiểu dữ liệu là text và dạng mật khẩu (password), để hiển thị nội dung Tên của bạn và Mật khẩu của bạn (dùng thuộc tính placeholder).
- Ô đăng nhập sử dụng thẻ button hoặc thẻ input kiểu dữ liệu button. Định dạng
- Chữ Đăng nhập: căn giữa và thẻ h2 và chữ Đăng nhập cách lề dưới 30px - Màu nền trang web: skyblue, font chữ time new roman.
- form đăng nhập:
+ Độ rộng 450px, màu nền trong khung form màu trắng, đường viền 1px kiểu viền solid viền màu xám nhẹsilver
- Định dạng dữ liệu nhập input
+ Độ rộng 400px, chiều cao 35px, cách lề dưới 10px và có đường bo viền 10px, nội dung chữ trong ô cách viền 5px.
- Định dạng nút button:
+ Độ rộng 412px và chiều cao 40px, màu nềnskyblue, không viền, kích thước font chữ 18, độ dày font chữ 700 và chữ Đăng nhập màu trắng.
Hướng dẫn code: <!DOCTYPEhtml>
<htmllang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> <title>FORM ĐĂNG NHẬP</title>
<style> body{
margin:0px; padding:0;
font-family:'Times New Roman',Times,serif; background:skyblue; } .formdangnhap { width:450px; /* lề tự động căn giữa */ margin:auto;
/* khung đăng nhập cách lề trên 100px */ margin-top:180px;
/* các ô input cách lề ngoài 20px */ padding:20px;
background:#fff; border:1pxsolid silver;
}
.formdangnhap input{
/* chiều rộng ô nhập tên và mật khẩu là 400px */ width:400px;
/* chiều cao ô nhập tên và mật khẩu là 35px */ height:35px;
margin-bottom:10px; border-radius:10px; border:1pxsolid silver; padding:5px;
}
.formdangnhap h2{ text-align:center;
background-color:skyblue;
/* màu chữ trong khung button login là màu trắng */ color:white; border-radius:5px; border:0; font-size:18px; font-weight:700; } </style> </head> <body>
<formaction=""class="formdangnhap"> <H2>ĐĂNG NHẬP</H2>
<inputtype="text"name="Username"placeholder="Tên của bạn">
<inputtype="password"name="password"placeholder="Mật khẩu của bạn"> <buttonclass="btn-login">ĐĂNG NHẬP</button>
</form> </body> </html>
TÀI LIỆU THAM KHẢO
1. Giáo trình HTML + CSS, Trường CĐN Kỹ Thuật Công Nghệ
2. Tài liệu tham khảo trên Internet