HTML5: Buổi học số 6

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

File Bai7.html

<!DOCTYPE html>
<html>
<head>
  <title>Các thẻ cấu trúc/ngữ nghĩa</title>
  <link rel="stylesheet" href="css-bai7.css">
</head>
<body>
<!-- Thẻ <header>: Dùng để thiết lập khối trên cùng của trang web -->
<!-- Thẻ <nav>: Tạo khối chứa các link (menu top, menu trái, ...) -->
<!-- Thẻ <aside>: Tạo khối bên (trái, phải) -->
<!-- Thẻ <article>: Tạo khối chứa bài viết. -->
<!-- Thẻ <footer>: Tạo khối chứa chân trang web. -->
<!-- Thẻ <section>: Tạo khối lớn hoặc khối nhỏ bên ngoài hoặc bên trong khối khác. -->
<!-- Ví dụ: -->
<section id="wrapper">
  <header class="red">Header</header>
  <nav><a href="#">Home</a><a href="#">News</a><a href="#">Feedback</a><a href="#">Cart</a><a href="#">Sign up</a><a href="#">Sign in</a></nav>
  <section class="center">
    <aside class="left">Left</aside>
    <article>Center</article>
    <aside class="right">Right</aside>
  </section>
  <footer class="red">Footer</footer>
</section>
</body>
</html>

File css-bai7.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. */
section,header,aside,article,.center,footer{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}
aside{width: 15%}
aside.left{background: orange}
article{width: 70%;background: green}
aside.right{width: 15%;background: blue}
footer{min-height: 100px;background: aqua}
.red{color: red}
nav{width: 100%;float: left;height: 20px}
nav>a{display: block;float: left;width: 16.666667%}
/* 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}
» Tiếp: Demo tạo site
« Trước: Buổi học số 5
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!