Thẻ phân chia HTML, được gọi tắt là “div”, là một phần tử đặc biệt cho phép bạn nhóm các tập hợp nội dung tương tự lại với nhau trên một trang web. Bạn có thể sử dụng nó như một vùng chứa chung để liên kết các nội dung tương tự. Thẻ div là một trong những thẻ được sử dụng nhiều nhất và có vẻ như không

< font style = "vertical-align: inherit;"> Bạn đang xem: div trong css

Thẻ phân chia HTML, được gọi là” div “gọi tắt là”, là một phần tử đặc biệt cho phép bạn nhóm các tập hợp nội dung tương tự lại với nhau trên một trang web. Bạn có thể sử dụng nó như một vùng chứa chung để liên kết các nội dung tương tự.

Thẻ div là một trong những thẻ được sử dụng nhiều nhất và dường như sẽ không đi đến đâu mặc dù đã giới thiệu các phần tử ngữ nghĩa (các phần tử này cho phép bạn sử dụng một số thẻ như một vùng chứa).

Trong hướng dẫn này, tôi sẽ chỉ cho bạn những điều khác nhau mà bạn có thể làm với thẻ div , cách bạn có thể sử dụng nhiều div trong cùng một tệp HTML mà không bị nhầm lẫn và cách tạo kiểu cho nó. < / p>

Khi nào sử dụng thẻ div

Thẻ div là thẻ đa mục đích – bạn có thể sử dụng nó để thực hiện một số việc trên một trang web. Bạn sẽ chủ yếu sử dụng nó trong bố cục web và nghệ thuật CSS, nhưng nó siêu linh hoạt.

Cuối cùng, hầu như bạn sẽ luôn sử dụng nó để tạo kiểu cho bất cứ thứ gì nó chứa hoặc thao tác những thứ như vậy bằng JavaScript.

1. Sử dụng div trong Bố cục Web

Bạn sẽ chủ yếu sử dụng thẻ div để nhóm các nội dung tương tự lại với nhau để bạn có thể tạo kiểu cho nội dung đó một cách dễ dàng. Một ví dụ tuyệt vời về điều này là sử dụng div để nhóm các phần khác nhau của trang web lại với nhau. Bạn có thể kết hợp tiêu đề, điều hướng, các phần và chân trang của một trang trong một thẻ div riêng lẻ để chúng có thể được tạo kiểu cùng nhau.

Phần sau của hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo bố cục web với nhiều thẻ div mà không bị nhầm lẫn.

Bản thân Div không có ảnh hưởng trực tiếp đến việc trình bày nội dung trừ khi bạn tạo kiểu cho nó.

2. Sử dụng div trong Nghệ thuật CSS

Với thẻ div, bạn có thể tạo nhiều hình dạng khác nhau và vẽ bất cứ thứ gì vì thẻ này rất dễ tạo kiểu.

  • Cách tạo hình vuông với thẻ div

Để tạo hình vuông với thẻ div , trước tiên bạn cần xác định thẻ div trống và đính kèm thuộc tính lớp vào thẻ đó trong HTML. Trong CSS, chọn div có thuộc tính class, sau đó đặt chiều cao và chiều rộng bằng nhau cho nó.

  & lt; div class = "square" & gt; & lt; / div & gt;
 
  body {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      margin: 0 auto;
      chiều cao: 100vh;
      màu nền: # f1f1f1;
    }
.Quảng trường {
      màu nền: # 2ecc71;
      chiều rộng: 200px;
      chiều cao: 200px;
    }
 

square < / p>

  • Cách tạo vòng kết nối bằng thẻ div

Bạn có thể tạo vòng tròn với thẻ div bằng cách mã hóa một div trống trong HTML, đặt chiều cao và chiều rộng bằng nhau cho nó trong CSS, sau đó đặt border-radius trên 50%.

  & lt; div class = "circle" & gt; & lt; / div & gt;
 
  body {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      margin: 0 auto;
      chiều cao: 100vh;
      màu nền: # f1f1f1;
    }

    .vòng tròn {
      màu nền: # 2ecc71;
      chiều rộng: 200px;
      chiều cao: 200px;
      bán kính biên giới: 50%;
    }
 

circle < / p>

  • Cách tạo cờ Nigeria bằng CSS

Tạo cờ Nigeria bằng thẻ div không khó lắm. Lá cờ có dạng hình chữ nhật với các màu xanh lục, trắng và xanh lục.

Để tạo nó, hãy xác định 3 thẻ div và đính kèm các lớp khác nhau, sau đó tạo kiểu cho chúng phù hợp trong CSS.

  & lt; div class = "naija-flag" & gt;
    & lt; div class = "first-green" & gt; & lt; / div & gt;
    & lt; div class = "white" & gt; & lt; / div & gt;
    & lt; div class = "second-green" & gt; & lt; / div & gt;
& lt; / div & gt;
 
 . naija-flag {
  hiển thị: flex;
}
.first-green {
  chiều cao: 100px;
  chiều rộng: 60px;
  background-color: xanh lá cây;
}
.trắng {
  chiều cao: 100px;
  chiều rộng: 60px;
  nền-màu: trắng;
}
.second-green {
  chiều cao: 100px;
  chiều rộng: 60px;
  background-color: xanh lá cây;
}
 

naija-flag

Cách tạo kiểu cho thẻ Div

Như chúng ta đã thảo luận ở trên, thẻ div rất dễ tạo kiểu. Đó là một trong những lý do tại sao nhiều nhà phát triển sử dụng nó để nhóm các nội dung tương tự.

Thẻ div chấp nhận hầu hết tất cả các thuộc tính CSS mà không có vấn đề gì. Bây giờ hãy xem một vài ví dụ về điều đó.

1 Cách áp dụng thuộc tính phông chữ với div

Bạn có thể áp dụng các thuộc tính CSS như font-size , font-family , font-weight font- style trên nội dung được nhóm cùng với thẻ div :

  & lt; div class = "font-properties" & gt;
      & lt; p & gt;
        Lorem ipsum đau ngồi với giới tinh hoa adipisicing consectetur. Thay đổi quo
        ullam modi bí danh giả sử, tấn công miễn phí? Quas quidem cảm nhận được điều đó.
      & lt; / p & gt;
      & lt; p & gt;
        Lorem ipsum đau ngồi, amet consectetur adipisicing ưu tú. Cần thiết
        ipsam eaque rem dicta, cái gì ipsum.
      & lt; / p & gt;
& lt; / div & gt;
 
  body {
      tối đa - chiều rộng: 900px;
      hiển thị: flex;
      căn chỉnh - các mục: trung tâm;
      justify - nội dung: trung tâm;
      margin: 0 auto;
      chiều cao: 100vh;
      nền - màu: # f1f1f1;
    }}

.font-thuộc tính {.
      họ phông chữ: thảo, sans-serif;
      phông chữ - kích thước: 1.3rem;
      font - weight: đậm hơn;
      font-style: nghiêng;
    }}
 

< / p>

2 Cách áp dụng màu với thẻ Div

Bạn có thể áp dụng các thuộc tính CSS color background-color cho nội dung được nhóm cùng với thẻ div :

  & lt; div class = "color-properties" & gt;
  & lt; p & gt;
    Lorem ipsum đau ngồi với giới tinh hoa adipisicing consectetur. Thay đổi quo
    ullam modi bí danh giả sử, tấn công miễn phí? Quas quidem cảm nhận được điều đó.
  & lt; / p & gt;
  & lt; p & gt;
    Lorem ipsum đau ngồi, amet consectetur adipisicing ưu tú. Cần thiết
    ipsam eaque rem dicta, cái gì ipsum.
  & lt; / p & gt;
& lt; / div & gt;
 
 . color-properties {
  màu trắng;
  nền - màu: # 2ecc71;
}}
 

color < / p>

3 Cách tạo kiểu cho văn bản bằng thẻ Div

Bạn có thể áp dụng các thuộc tính CSS text-converter text-decoration cho thẻ div như sau:

  & lt; div class = "text-properties" & gt;
  & lt; p & gt;
    Lorem ipsum đau ngồi với giới tinh hoa adipisicing consectetur. Thay đổi quo
    ullam modi bí danh giả sử, tấn công miễn phí? Quas quidem cảm nhận được điều đó.
  & lt; / p & gt;
  & lt; p & gt;
    Lorem ipsum đau ngồi, amet consectetur adipisicing ưu tú. Cần thiết
    ipsam eaque rem dicta, cái gì ipsum.
   & lt; / p & gt;
& lt; / div & gt;
 
 . text-properties {
    text - biến đổi: chữ hoa;
    văn bản - trang trí: gạch chân;
  }}
 

text < / p>

4 Cách tạo hiệu ứng đổ bóng bằng thẻ Div

Bạn có thể tạo hiệu ứng đổ bóng bằng thuộc tính box-shadow:

  & lt; div class = "box-shadow" & gt;
      & lt; p & gt;
        Trước khi trả tiền để học lập trình, hãy xem freeCodeCamp.org
        & lt; br / & gt;
        Chương trình học HTML, CSS và JavaScript sẽ đưa bạn từ con số không đến con người hùng
        trong phát triển web.
      & lt; / p & gt;
      & lt; p & gt;
        Có một số giáo trình Python sẽ cung cấp cho bạn kiến ​​thức đáng kể
        bằng Python & lt; br / & gt;
        Và một chương trình giảng dạy Khoa học dữ liệu sắp ra mắt.
      & lt; / p & gt;
& lt; / div & gt;
 
 . box-shadow {
      họ phông chữ: thảo, sans-serif;
      nền - màu: # 2ecc71;
      màu trắng;
      đệm: 10px;
      viền - bán kính: 4px;
      hộp - bóng: 2px 2px 20px 23px # 7fecad;
    }}
 

Điều gì đang xảy ra trong CSS ở trên?

Tôi đã có thể tạo hiệu ứng đổ bóng bằng thuộc tính CSS box-shadow

  • Giá trị đầu tiên (2px) thể hiện độ lệch trên trục x (offset-x)
  • Hình thứ hai (2px khác) đại diện cho độ lệch trên trục y (offset-y)
  • 20px tiếp theo là bán kính mờ, tức là bạn muốn bóng mờ như thế nào.
  • Giá trị 23px là bán kính lan truyền (bạn muốn bóng lan rộng bao xa)
  • Giá trị cuối cùng là màu bóng - trong trường hợp này là màu # 7fecad.

Đầu ra giống như sau:
box-shadow

Cách sử dụng nhiều phần tử chia mà không bị nhầm lẫn

Thẻ Div thường được sử dụng để nhóm các nội dung tương tự lại với nhau. Trong các trang web cũ hơn và thậm chí là một số trang web mới hơn, bạn sẽ tìm thấy các dấu phân chia xung quanh, mặc dù thực tế là các thẻ ngữ nghĩa được khuyến nghị để hỗ trợ truy cập và SEO tốt hơn.

Vì các thẻ div vẫn rất phổ biến, tôi khuyên bạn nên áp dụng các thuộc tính class và id cho chúng để bạn có thể thao tác các phần tử div riêng lẻ với các thuộc tính đó.

Tôi sẽ hướng dẫn bạn cách thực hiện điều này bằng cách tạo bố cục web cơ bản.

Phần đầu tiên bạn muốn tạo là tiêu đề, chứa biểu trưng và thanh điều hướng:

  & lt; div class = "header" & gt;
      & lt; h2 class = "logo" & gt; freeCodeCamp & lt; / h2 & gt;

      & lt; ul class = "nav" & gt;
        & lt; li & gt; & lt; a href = "" & gt; Trang chủ & lt; / a & gt; & lt; / li & gt;
        & lt; li & gt; & lt; a href = "" & gt; Giới thiệu & lt; / a & gt; & lt; / li & gt;
        & lt; li & gt; & lt; a href = "" & gt; Chuỗi & lt; / a & gt; & lt; / li & gt;
        & lt; li & gt; & lt; a href = "" & gt; Liên hệ & lt; / a & gt; & lt; / li & gt;
      & lt; / ul & gt;
& lt; / div & gt;
 

Trước khi tạo kiểu cho thanh điều hướng, tôi đã đặt lại một số CSS để giúp mọi thứ căn chỉnh chính xác và hiển thị đẹp mắt:

  * {
   lề: 0;
   đệm: 0;
   box-sizing: border-box;
 }

.anh hùng,
.Về,
.dịch vụ,
.tiếp xúc {
  chiều rộng tối đa: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
}
 

Trong đoạn mã ở trên:

  • Tôi đã xóa phần lề và phần đệm mặc định
  • Tôi đặt chiều rộng tối đa cho các phần chính để chúng không chạy ngang ra ngoài để có trải nghiệm người dùng tốt hơn
  • Tôi đặt lề ở cuối mỗi phần để cho họ một khoảng trống
  • Tôi đặt lề 0 ở trên cùng và dưới cùng, tự động ở bên trái và bên phải để căn giữa chúng.

Để tạo kiểu cho thanh điều hướng thích hợp, tôi sẽ lấy thẻ div vùng chứa với thuộc tính lớp của nó, header . Tôi sẽ cung cấp cho nó một màn hình flex , cùng với một số thuộc tính khác để bố cục nó một cách độc đáo. Tôi cũng sẽ lấy div quấn quanh thanh điều hướng (phần tử ul ) theo lớp của nó và đặt nó bằng Flexbox.

 . header {
      đệm: 0 70px;
      hiển thị: flex;
      align-content: trung tâm;
      justify-content: khoảng trắng giữa;
      margin-top: 20px;
      margin-bottom: 20px;
    }

.nav {
      hiển thị: flex;
      align-content: trung tâm;
      justify-content: trung tâm;
      khoảng cách: 60px;
      list-style-type: none;
    }

.nav li a {
      văn bản-trang trí: không có;
      màu đen;
      kích thước phông chữ: 1.2rem;
    }
 

Đối với các phần còn lại ngoài phần chân trang, HTML và các kiểu tạo kiểu là chung:

  & lt; div class = "hero" & gt;
      & lt; h1 & gt; Phần Anh hùng & lt; / h1 & gt;
& lt; / div & gt;
& lt; div class = "about" & gt;
      & lt; h1 & gt; Giới thiệu về Chúng tôi & lt; / h1 & gt;
& lt; / div & gt;
& lt; div class = "services" & gt;
      & lt; h1 & gt; Dịch vụ của Chúng tôi & lt; / h1 & gt;
& lt; / div & gt;
& lt; div class = "contact" & gt;
      & lt; h1 & gt; Liên hệ với Chúng tôi & lt; / h1 & gt;
& lt; / div & gt;
& lt; div class = "footer" & gt;
      & lt; p & gt; & amp; copy; 2021 Mọi quyền được bảo lưu & lt; / p & gt;
& lt; / div & gt;
 
 . anh hùng {
      màu nền: #eee;
      chiều cao: 200px;
    }

.hero h1 {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      chiều cao dòng: 6;
    }

.Về {
      màu nền: #eee;
      chiều cao: 200px;
    }

.about h1 {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      chiều cao dòng: 6;
    }

.dịch vụ {
      màu nền: #eee;
      chiều cao: 200px;
    }

.services h1 {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      chiều cao dòng: 6;
    }

.tiếp xúc {
      màu nền: #eee;
      chiều cao: 200px;
    }

.liên hệ h1 {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      chiều cao dòng: 6;
    }

.footer {
      màu nền: # 777;
      chiều cao: 40px;
    }

.footer p {
      margin: 0 auto;
      chiều cao dòng: 1,7;
    }
 

Tôi đã tạo cho các phần riêng lẻ có màu nền xám và chiều cao là 200px. Tôi định vị các thẻ h1 bên trong tâm của chúng bằng Flexbox và áp dụng chiều cao dòng là 1,5 cho mỗi thẻ.

Cuối cùng, tôi đã tạo màu nền xám đậm hơn cho phần chân trang để tạo sự khác biệt và căn giữa nội dung trong đó với chiều cao dòng là 1,7.

Bố cục kết quả trông giống như sau: layout

Kết luận

Thẻ div HTML thường được sử dụng giữa các nhà phát triển web ở khắp mọi nơi.

Chỉ cần lưu ý rằng bạn thường nên sử dụng HTML ngữ nghĩa thay cho thẻ div trừ khi không thẻ nào trong số chúng (các thẻ ngữ nghĩa) thực sự khớp với nội dung để nhóm lại với nhau. Điều này là do các thẻ ngữ nghĩa tốt hơn cho khả năng truy cập và SEO.

Nói tóm lại, thẻ div vẫn hữu ích và sẽ không sớm đi vào bất cứ đâu, vì vậy, hãy thoải mái sử dụng thẻ này khi cần thiết.

Cảm ơn bạn đã đọc và chúc bạn có một khoảng thời gian vui vẻ.


Xem thêm những thông tin liên quan đến chủ đề div trong css là gì

09 - Thẻ DIV, thẻ SPAN và phân loại các kiểu thẻ trong HTML

alt

  • Tác giả: SUNTECH VIỆT NAM
  • Ngày đăng: 2018-12-06
  • Đánh giá: 4 ⭐ ( 8451 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở bài này chúng ta cùng tìm hiểu về hai thẻ DIV và SPAN trong HTML. Bên cạnh đó chúng ta sẽ cùng nhau đi phân biệt các kiểu thẻ HTML như Block, Inline và None
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Đăng ký kênh để nhận thông báo video mới nhất từ SUNTECH: https://goo.gl/1ZxwCS
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Link chi tiết các video học lập trình HTML tại SUNTECH:
    + Video học lập trình HTML: https://goo.gl/3tL3Tb
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Các thẻ hash tag quan trọng
    html thediv thespan
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Mọi chi tiết xin liên hệ:
    Contact Name: Phạm Kỳ Khôi
    Email: daotaolaptrinhsuntech@gmail.com | phamkykhoi.info@gmail.com
    Phone: 0942 668 586
    Zalo: 0942 668 586
    Website: https://goo.gl/1ZxwCS
    Facebook: https://goo.gl/mMFjAC
    Group Facebook: https://goo.gl/jbiv63

Hướng dẫn cơ bản về cách sử dụng thẻ DIV trong thiết kế giao diện Web

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 7374 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thẻ DIV (DIV tag) là gì?

  • Tác giả: nentang.vn
  • Đánh giá: 5 ⭐ ( 1108 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ DIV (DIV tag) là gì?.Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, Học web, học web cần thơ, đồ án mẫu, bài tập thực hành web...

Div Là Gì? Cách Dùng Thẻ Div Là Gì ? Thẻ Div Trong Html

  • Tác giả: ceds.edu.vn
  • Đánh giá: 4 ⭐ ( 6214 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: là gì ?Viết tắt của Division : khốiLà một thẻ chứa nhiều thẻ khác bên trong và phân chia tài liệu HTML thành các phần khác nhau, Vì thế thẻ div cũng được sử dụng để trình bày bố cục cho trang web

Selector trong CSS là gì? Bạn có thể không biết rất nhiều selector thú vị đấy!

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 7514 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

ToPhuongLoan.Com

  • Tác giả: tophuongloan.com
  • Đánh giá: 5 ⭐ ( 2842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu

Thẻ DIV và CSS – CUONG TIEN

  • Tác giả: cuongtien.com
  • Đánh giá: 3 ⭐ ( 9506 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Sử dụng Thẻ HTML giờ để Tạo Đường ngang HTML - cách chèn một dòng ngang trong html

By ads_php