ID, class trong HTML và thuộc tính float trong CSS

Dẫn nhập

Ở bài trước thì tất cả chúng ta đã cùng nói về MODEL BOX TRONG CSS  cũng như các thuộc tính liên quan của nó đến một phần tử HTML.

Trong bài học ngày bây giờ tất cả chúng ta sẽ tìm tòi về ID và class trong HTML và thuộc tính float trong CSS.

Bài viết

Để đọc hiểu bài này, chúng ta nên có tri thức về:

Trong bài này, Kteam sẽ cùng bạn tìm tòi về:

  • ID và Class trong HTML
  • Các cú pháp chuyên sâu năng suất code
  • Thuộc tính Float trong CSS
  • Clearfix class

Các thao tác được thực hành trên project của bài trước, bạn có thể tải xuống project ở cuối bài MODEL BOX TRONG CSS

Cảnh báo: Nội dung nhằm tóm lược bài viết thực hiện project & giúp bạn chớp lấy các phần được chỉ dẫn một cách dễ dàng nhất. Ngoài ra, hãy theo dõi video để học hỏi các tri thức và kỹ thuật cụ thể nhất từ Author.

ID và Class trong HTML

Giả sử, với project Blog mà tất cả chúng ta đang làm trong bài trước, mình cần thêm các thẻ <h1vàgt; khác vào trong blog như sau:

<h1vàgt;Hello Ktersvàlt;/h1vàgt;
<h1vàgt;Front End Coursevàlt;/h1vàgt;

Ngoài ra, do mình đã chỉ định thẻ  <h1vàgt;HOWKTEAM BLOGvàlt;/h1vàgt;  trước đây có các thuộc tính riêng tại file style.css như chữ có kích cỡ 900px, màu xanh lá (green); nền màu aqu; có viền chấm 2px (dotted) màu đỏ (red),…Điều này kéo theo việc các thẻ <h1vàgt; được thêm vào trong file index.html sau này có định dạng thuộc tính tương đương thẻ <h1vàgt; ban đầu mà mình không mong chờ. 

Chính vì như vậy Class & Id ra đời để khắc phục các trường hợp này, giúp xác nhận rõ ràng và cụ thể phần tử mà bạn mong muốn định dạng. Ngoài ra, ở khóa LẬP TRÌNH FRONT END CƠ BẢN có thể bạn chưa thấy được nhiều độc đáo của 2 thuộc tính này, mà sẽ tìm tinh thông hơn trong các khóa CSS NÂNG CAO.

Thuộc tính ID

Thuộc tính id dùng để đặt tên cho một phần tử trong HTML, mỗi thuộc tính id chỉ chỉ định cho một phần tử duy nhất trong file HTML hiện hành.

Giá trị id được sử dụng trong CSS hoặc JavaScript để chỉ định rõ ràng và cụ thể định dạng hoặc thực hiện tác vụ khẳng định cho phần tử đó.

Gán thuộc tính id trong HTML:

<phần tử HTML  id= “id_name  “ >

Sử dụng giá trị id trong CSS:

#id_name{

thuộc tính: giá trị;

}

Trong số đó:

  • Thuộc tính

    id

    có thể sử dụng trên bất kỳ phần tử HTML nào.

  • id_name

    (giá trị id) chứa các ký tự chữ cái, số, gạch (_), nối (-); có phân biệt chữ hoa và chữ thường. Trong giá trị id phải chứa tối thiểu một ký tự và không có khoảng trắng. Không nên khởi đầu tên id bằng số.

Chẳng hạn:

Tại file index.html

<h1 id="heading1">HOWKTEAM BLOGvàlt;/h1vàgt;

Tại file style.css thay h1 bằng giá trị id heading1

#heading1{
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 50px;
}

#heading1{
    color: green;
    /* Sử dụng tên trong của màu sắc */

    color: #0000ff;
    /* Sử dụng mã màu hexan  */

    color: rgb(0, 255, 0);
    /* Sử dụng phối màu rgb() red green blue */

    color: rgba(0, 255, 0, 1);
    /* Tương đương rgb() và thêm 1 thông số kỹ thuật là độ mờ */
}

#heading1{
    border: 4px solid red;
    border-style: dotted;
    background-color: aqua;
}

Sau khoảng thời gian gán id trang blog biến đổi như hình: 

  • Loại trừ thẻ <h1vàgt; có chứa thuộc tính id heading1 có định dạng riêng, các thẻ <h1vàgt; khác đều có định dạng mặc định.

Áp dụng Id trong việc đánh dấu

Thuộc tính id phân phối cho bạn một áp dụng khá thú vị, thường hay chứng kiến ở trang LandingPage hoặc một số website có bài viết khá dài.

Rõ ràng, bạn có thể dùng id như một địa điểm, sau đó thêm link đi đến địa điểm đó

Tạo địa điểm đánh dấu theo cách gán id thông thường

<phần tử HTML  id= “id_name  “

Tạo đường kéo theo địa điểm đánh dấu (trong cùng trang HTML)

<α href=”#id_name”> nội_dung_gắn_liên_kết </avàgt;

Tạo đường kéo theo địa điểm đánh dấu (từ trang khác)

<α href=”<tên_trang_htmlvàgt;#id_name”> nội_dung_gắn_liên_kết </avàgt;

Áp dụng này sẽ được nói rõ hơn trong công cuộc xây dựng web Langding Page của khóa học này.

Thuộc tính class

Thuộc tính class dùng để đặt tên cho các phần tử trong html, mỗi thuộc tính class có thể chỉ định cho nhiều phần tử HTML (cùng hoặc khác loại) để có cùng định dạng.

Giá trị class được sử dụng trong CSS hoặc JavaScript để chỉ định hàng loạt các định dạng chung hoặc thực hiện chung tác vụ cho các phần tử HTML có cùng thuộc tính class.

Gán thuộc tính class trong HTML:

<phần tử HTML  class= “class_name  “ >

Sử dụng giá trị class trong CSS:

.class_name{

thuộc tính: giá trị;

}

Trong số đó:

  • Thuộc tính class có thể sử dụng trên bất kỳ phần tử HTML nào.
  • class_name

    (giá trị class) chứa các ký tự chữ cái, số, gạch (_), nối (-); có phân biệt chữ hoa và chữ thường. Trong giá trị class phải chứa tối thiểu một ký tự và không có khoảng trắng. Không nên khởi đầu tên class bằng số.

Chẳng hạn: 

Tại file index.html thay vì dùng id heading1, mình đổi thành class heading. Và thêm thẻ ρ cũng có cùng class heading như thẻ h1

<h1 class="heading">HOWKTEAM BLOGvàlt;/h1vàgt;
<h1 class="heading">Hello Ktersvàlt;/h1vàgt;
<ρ class="heading">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, incidunt dolores perferendis sapiente,
quas voluptatem cumque ipsa accusantium ab possimus iusto quo porro esse eius nemo explicabo quasi rerum! Cumque.
</ρvàgt;

Tại file style.css thay giá trị id heading1 bằng giá trị class heading

.heading1{
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 50px;
}

.heading1{
    color: green;
    /* Sử dụng tên trong của màu sắc */

    color: #0000ff;
    /* Sử dụng mã màu hexan  */

    color: rgb(0, 255, 0);
    /* Sử dụng phối màu rgb() red green blue */

    color: rgba(0, 255, 0, 1);
    /* Tương đương rgb() và thêm 1 thông số kỹ thuật là độ mờ */
}

.heading1{
    border: 4px solid red;
    border-style: dotted;
    background-color: aqua;
}

Sau khoảng thời gian gán class trang blog biến đổi như hình: 

  • Các thẻ có chứa thuộc tính class heading (như h1, ρ) có cùng kiểu định dạng , các thẻ khác đều có định dạng mặc định.

Sử dụng nhiều class cho một phần tử HTML

Các phần tử HTML có thể có một hoặc nhiều thuộc tính class, các thuộc tính được riêng biệt nhau bằng dấu cách.

<phần tử HTML  class= “class_name_1  class_name_2  “ >

Chẳng hạn:

Index.html

<h1 class="heading center">HOWKTEAM BLOGvàlt;/h1vàgt;
<h1 class="heading">Hello Ktersvàlt;/h1vàgt;
<ρ class="heading">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, incidunt dolores perferendis sapiente,
quas voluptatem cumque ipsa accusantium ab possimus iusto quo porro esse eius nemo explicabo quasi rerum! Cumque.
</ρvàgt;

Style.css

.center{
    text-align: center;
}
.heading{
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 50px;
}

.heading{
    color: green;
    /* Sử dụng tên trong của màu sắc */

    color: #0000ff;
    /* Sử dụng mã màu hexan  */

    color: rgb(0, 255, 0);
    /* Sử dụng phối màu rgb() red green blue */

    color: rgba(0, 255, 0, 1);
    /* Tương đương rgb() và thêm 1 thông số kỹ thuật là độ mờ */
}

.heading{
    border: 4px solid red;
    border-style: dotted;
    background-color: aqua;
}

Từ tri thức ở các phần trên, bạn tuyệt đối có thể chạy thử và nghiên cứu kết quả của chẳng hạn này!

Các cú pháp chuyên sâu năng suất code

Trong công cuộc code, việc gõ đủ định dạng của các thẻ khiến bạn khá mất thời gian dù đã được trợ giúp nhắc lệnh từ Visual Studio Code. Để tối đa năng suất code, Kteam đề xuất bạn sử dụng một số cú pháp sau

  • Gõ nhanh các cặp thẻ div chứa id

#id_name

Chẳng hạn: gõ #heading1 cho kết quả

<div id="heading1"></divvàgt;
  • Gõ nhanh các cặp thẻ div chứa class 

.class_name

Chẳng hạn: gõ .container cho kết quả

<div class="container"></divvàgt;
  • Gõ nhanh các phần tử khác trong HTML với id

phần_tử_HTML#id_name

Chẳng hạn: gõ h1#heading1 cho kết quả

<h1 id="heading1"></h1vàgt;
  • Gõ nhanh các phần tử khác trong HTML với class

phần_tử_HTML.id_name

Chẳng hạn: gõ h1.container cho kết quả

<h1 class="container"></h1vàgt;

Cú pháp reform trang HTML

Ctrl + ? sau đó Ctrl + ₭ cuối cùng là Ctrl + ₣

Giúp chỉnh sửa các thẻ code đã sử dụng trong file HTML giúp bạn đơn giản xem xét file HTML của các bạn.

Chuyển bình luận thành code

Bạn có thể chuyển code thành bình luận và trái lại bằng cách tô đen đoạn code cần chuyển rồi dùng tổ hợp phím: 

Ctrl + /

Ta có thể căn chỉnh một tí tại file index.html giúp bạn áp dụng các cú pháp nhanh trên:

div class="container">
    <div class="content">
        <h1 class="heading" id="heading1">HOWKTEAM BLOGvàlt;/h1vàgt;
        <h2vàgt;HOWKTEAMvàlt;/h2vàgt;

        <!--heading tieu de cua cac phan trong website-->
        <ρvàgt;
            <strikevàgt;Hello Ktervàlt;/strikevàgt;
            <!--tao chu co gach ngang-->
            <brvàgt;
            <!--break co tac dung giup xuong dong-->
            <hrvàgt;
            <bvàgt;HOWKTEAMvàlt;/bvàgt;
            <!--bold tao chu in dam-->
            <emvàgt;HOWKTEAMvàlt;/emvàgt; <!-- Emphasize tao chu in nghieng-->
            <uvàgt;HOWKTEAMvàlt;/uvàgt;
            <!--underline tao chu co gach chan-->
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Rem debitis eos dolorem itaque tempore libero ipsa quibusdam fuga, vel,
            molestiae maxime harum consequatur architecto repellat dolores cupiditate iure nisi fugiat?
            Lorem ipsum, dolor sit amet consect <brvàgt;etur adipisicing elit. Nulla, culpa.
        </ρvàgt;

        <h2vàgt;HOWKTEAM 2vàlt;/h2vàgt;
        <ρvàgt;Lorem ipsum dolor sit amet consectetur,
            adipisicing elit. Voluptatem autem reprehenderit asperiores
            distinctio similique beatae adipisci officiis, rerum vitae quaerat veniam
            porro repellendus odit aspernatur α est magni odio. Non!</ρvàgt;
        <!-- Noi ban chua van ban-->
        <img style="width: 500px;" src="https://www.howkteam.vn/Content/areacontent/images/HowKteamLogo.png" alt="PHoto">
        <!-- src source alt alternative -->
        <α href="/redirect?Id=CDPvobsj8EgqSWOjQulkjxnfyAVBmqtT%2bfW2uWusFIE%3d">Backlinks dan den HOWKTEAMvàlt;/avàgt;

        <formvàgt;
            <input type="text" placeholder="dien ten cac ban vao day">
            <input type="submit" value="gui tin nhan">
            <textarea cols="100" rows="10" placeholder="hello anh em"></textareavàgt;
        </formvàgt;
    </divvàgt;
    <div class="avatar">
        <img src="http://static.tvtropes.org/pmwiki/pub/images/AverageMan1.jpg" alt="photo avatar">
        <h4vàgt;MY NAME IS ABCvàlt;/h4vàgt;
    </divvàgt;
    <div class="info">
        <divvàgt;
            SĐT: 09-999-999-999
        </divvàgt;
        <divvàgt;
            Địa chỉ: số 1, quận 2
        </divvàgt;
        <divvàgt;
            Thư điện tử: blogtest@gmai.com
        </divvàgt;
    </divvàgt;
    </divvàgt;

Thuộc tính float trong CSS

Nói một cách dễ dàng thuộc tính Float xác nhận rằng một phần tử HTML nên được đặt xuôi theo bên trái hay bên phải của vùng chứa của nó, cùng lúc nó cho phép các phần tử văn bản và phần tử nội tuyến khác quấn quanh nó.

Phần tử được xóa khỏi luồng thông thường của website, mặc dầu vẫn còn một phần của luồng ( trái lại với địa điểm hiển thị tuyệt đối)

Cú pháp:

phần_tử_HTML{

     float: left (hoặc right );

   /*  Mặc định float: none  */

}

Chẳng hạn: Sử dụng thuộc tính float: left (trong trường hợp này content chiếm 75% và avatar chiếm 25% chiều rộng container)

style.css

.container{  
    width: 1140px;
    margin: 0 tự động;
}
.content{
    background-color: palegoldenrod;
    width: 75%;
    float: left;
}

.avatar{
    width: 25%;
    background-color: greenyellow;
    float: left;
}

.info{
    background-color: aquamarine;
}

Kết quả sau thời điểm sử dụng thuộc tính float như sau:

Clearfix Class

Clearfix class trong HTML

Clearfix class nói ngắn gọn là 1 kĩ năng giúp cho element không chứa thuộc tính float, không phải chịu ràng buộc của các phần tử chứa thuộc tính float gần nó.

Cảnh báo: Ở phần này các bạn không nhất thiết phải hiểu quá sâu, chỉ cần biết cách ứng dụng là được

Trong chẳng hạn trên, nếu chú tâm bạn sẽ thấy bài viết phần Info cũng trôi theo phần avatar dù không gán thuộc tính float: left

Để khắc phục vấn đề này, tất cả chúng ta sẽ sử dụng Clearfix Class:

index.html

<div class="avatar">
      <img src="http://static.tvtropes.org/pmwiki/pub/images/AverageMan1.jpg" alt="photo avatar">
      <h4vàgt;MY NAME IS ABCvàlt;/h4vàgt;
</divvàgt;
      <div class="clearfix"></divvàgt;

Thuộc tính CSS trong clearfix

Có nhiểu cách tạo thuộc tính CSS cho class clearfix, dưới đây là mình giới thiệu cho các bạn 1 trong số đó.

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

Sau khoảng thời gian ứng dụng clearfix class, bạn có thể thấy phần info không còn bị tác động bởi thuộc tính float của avatar

Bạn có thể xem qua cụ thể hơn về clearfix class tại: 

Project xem qua 

Nếu việc thực hành theo chỉ dẫn không diễn ra thuận lợi như mong chờ. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở backlink bên dưới! 

Tổng kết

Ở bài này tất cả chúng ta đã bên cạnh nhau tìm tòi về cách dùng ID và Class trong HTML và cách dùng thuộc tính float trong CSS.

Ở bài sau tất cả chúng ta sẽ tìm tòi THUỘC TÍNH POSOTION TRONG CSS và hoàn thành trang Blog của các bạn.

Cảm ơn các bạn đã theo dõi nội dung. Hãy để lại comment và phản hồi của mình để giúp tiến triển nội dung tốt hơn. Đừng quên: “Luyện tập – Thử thách – Không ngại khó”.

 

Ebook 

Nhằm phục vụ mục đích học hành Offline của cộng đồng, Kteam trợ giúp tính năng lưu trữ bài viết bài học ID, class trong HTML và thuộc tính float trong CSS dưới dạng file PDF trong backlink bên dưới.

Không những thế, bạn cũng có thể tìm ra các ebook được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và Author nhé! 

Bàn luận

Nếu bạn có bất kỳ khổ cực hay khúc mắc gì về khóa học, đừng ngần ngại đặt thắc mắc trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để thu được sự trợ giúp từ cộng đồng. 

 

Bàn luận

Nếu bạn có bất kỳ khổ cực hay khúc mắc gì về khóa học, đừng ngần ngại đặt thắc mắc trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để thu được sự trợ giúp từ cộng đồng.

Xem Thêm  HTML là gì? Giải thích khái niệm cơ bản về ngôn ngữ đánh dấu siêu văn bản - tài liệu html là gì

Viết một bình luận