Block, Inline, Css Flex, Css Grid và Class trong Html - #3

Đăng bởi: Minacode|Cập nhật:02-01-2024

Ok Anh em, Tiếp theo trong chủ đề Học nhanh Html với Minacode. Bài viết này mình sẽ đề cập đến các khái niệm về Block, Inline, nói qua về Css Flex, Css Grid và một khái niệm rất quan trọng là Class trong Html nhé! Nào Let’s Go thôi.

Block và Inline trong Html

Tất cả các thẻ trong Html đều có giá trị hiển thị mặc định, tùy thuộc vào loại thẻ đó.

Các thẻ có giá trị hiện thị là Block:

+ luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một số khoảng trắng (lề) trước và sau thẻ.
+ luôn chiếm toàn bộ chiều rộng có sẵn (kéo dài sang trái và phải hết mức có thể)

Hai thẻ Block thường được sử dụng là: <p> và <div>.

<p>MinaCode</p>
<div>MinaCode</div>

Thẻ <div> thường được sử dụng làm vùng chứa cho các thẻ Html khác.

Chúng ta có thể sử dụng thuộc tính CSS float để căn chỉnh các thẻ <div> nằm cạnh nhau.

<!DOCTYPE html>
<html>
<style>
div.mycontainer {
 width:100%;
 overflow:auto;
}
div.mycontainer div {
 width:33%; 
 float:left;
}
</style>
<body>
<div class="mycontainer">
 <div style="background-color:#FFF4A3;">
    <h2>Js</h2>
    <p>Javascript.</p>
    <p>Minacode-js</p>
 </div>
 
 <div style="background-color:#FFC0C7;">
    <h2>Html</h2>
    <p>HyperText Markup Language.</p>
    <p>Minacode-html</p>
 </div>
 
 <div style="background-color:#D9EEE1;">
    <h2>Css</h2>
    <p>Cascading Style Sheets.</p>
    <p>Minacode-css</p>
 </div>
</div>
</body>
</html>

Chúng ta có:

Các thẻ có giá trị hiện thị là Inline:

+ Không bắt đầu trên một dòng mới.
+ Chỉ chiếm nhiều chiều rộng nếu cần thiết.
+ Không thể chứa thẻ có giá trị hiện thị là Block

Một thẻ inline thường xuyên dử dụng nhất là <span>

<span>Minacode</span>

Cách chuyển từ Block sang Inline-Block

Nếu bạn thay đổi thuộc tính thẻ <div> từu display = block thành inline-block, các thẻ <div> sẽ không còn thêm dấu ngắt dòng trước và sau nữa và sẽ được hiển thị cạnh nhau.

CSS Flexbox

CSS Flexbox là cách để giúp thiết kế cấu trúc bố cục đáp ứng linh hoạt mà không cần sử dụng float hoặc định vị dễ dàng hơn.

Để sử dụng phương thức CSS flex, bạn chỉ càn bao quanh các <div>phần tử bằng một <div>phần tử khác và đặt cho nó trạng thái display là flex.

<style>
.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}
</style>

CSS Grid

Cũng giống như Css Flex. Css Grid cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế trang web dễ dàng hơn mà không cần phải sử dụng float.

<style>
.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}
</style>

Thuộc tính Class trong Html

Thuộc tính Class được sử dụng rất phổ biến để chỉ định lớp cho các thẻ trong Html. Một class có thể được đặt cho nhiều thẻ. Class thường được sử dụng nhiều nhất với mục đích để trỏ đến tên lớp trong việc xác định style cho thẻ. Nó cũng có thể được JavaScript sử dụng để truy cập và thao tác với một tên lớp cụ thể. JavaScript có thể truy cập các thẻ có class cụ thể bằng các phương thức như getElementsByClassName()

<!DOCTYPE html>
<html>
<style>
div.mycontainer {
  width:100%;
  overflow:auto;
}
div.mycontainer div {
  width:25%; 
  display: inline-block;
  margin-right: 10px
}
.minacode {
color:red
}
</style>
<body>
<div class="mycontainer">
  <div class ="minacode" style="background-color:#FFF4A3;">
    <h2>Js</h2>
   <p>Javascript.</p>
   <p>Minacode-js</p>
  </div>
 
  <div class ="minacode" style="background-color:#FFC0C7;">
   <h2>Html</h2>
    <p>HyperText Markup Language.</p>
   <p>Minacode-html</p>
  </div>
  <div class ="minacode" style="background-color:#D9EEE1;">
    <h2>Css</h2>
    <p>Cascading Style Sheets.</p>
   <p>Minacode-css</p>
  </div>
</div>
</body>
</html>

Trong vị dụ trên mình đã đặt cho 3 thẻ div một class và style cho nó một color: red

Thuộc tính Class có thể được sử dụng cho bất kỳ thẻ Html nào và có phân biệt chữ hoa và thường. Để tạo một class; viết một ký tự dấu chấm (.), theo sau là tên lớp. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}: