HTML5: Buổi học số 4
Chữa Bài tập 1 - Practical 5 (link bài tập: )
File bai-tap-1-practical-5.html:
<!DOCTYPE html> <html> <head> <title>Bài tập 1-Practical 5</title> <style> </style> <link rel="stylesheet" href="css.css"> </head> <body> <div id="wrapper"> <div class="header red">Header</div> <div class="center"> <div>Left</div> <div>Center</div> <div>Right</div> </div> <div class="footer red">Footer</div> </div> </body> </html>
File css.css:
body{margin: 0}
/* Bộ chọn (selecter): bộ chọn tên thẻ, bộ chọn class, bộ chọn id */
/* Bộ chọn tên thẻ: Đưa tên thẻ vào <style> là được. */
div{
float: left;
border: white 1px solid;
font-weight: bold;
box-sizing: border-box;
text-align: center
}
/* Bộ chọn class: Sử dụng thuộc tính class của thẻ.
Cho phép tùy chỉnh hơn cho từng thẻ.
Mỗi thẻ được quyền sử dụng nhiều hơn 1 class.
Để gọi class ta sử dụng cú pháp: .tên_class{} */
.header,.center,.footer{width: 100%}
.header{color: white!important;background: black; min-height: 100px}
.center,.center>*{min-height: 300px}
.center div:first-child{background: orange;color: black;width: 15%}
.center div:nth-child(2){width: 70%;background: green}
.center div:last-child{width: 15%;background: blue}
.footer{min-height: 100px;background: aqua}
.red{color: red}
/* Bộ chọn id: Sử dụng thuộc tính id của thẻ.
Mỗi thẻ chỉ dùng được 1 id.
Cú pháp sử dụng: #tên_id */
#wrapper{width: 80%;margin-left: 10%}
#bk_red{background: red}