You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Thẻ Class gom các thẻ lại với nhau tạo thành một nhóm dễ tuỳ chỉnh

Thẻ Class gom các thẻ lại với nhau tạo thành một nhóm dễ tuỳ chỉnh

Chúng ta sẽ cùng học về thẻ Class ngay sau đây.

Xem thêm bài viết

Các bạn đã học được khá nhiều thuộc tính trong HTML. Bạn cũng đã biết cách ứng dụng chúng vào những trường hợp cần thiết. Bạn đã tự tin hơn so với trước khi bạn đọc bài viết này. Chắc chắn rồi. Mình tin vào sự nỗ lực của các bạn. Sắp tới sau khi hoàn thành khoá học này bạn cần phải có một kiến thức vững vàng về HTML để chuyển sang học CSS. Trong CSS có một thuộc tính của HTML sẽ bổ trợ rất nhiều trong quá trình bạn học CSS. Chưa kể bạn còn có thể điều khiển dữ liệu có chứa thuộc tính này bằng JavaScript. Nhờ có thuộc tính này, bạn sẽ thoát cảnh phải định dạng từng dòng dữ liệu trong trang HTML. Định dạng từng dòng đúng là một nỗi đau không thể tả được. Bạn sẽ rất vất vả chỉ để định dạng văn bản. Chúng ta phải tìm cách khắc phục điều này thôi.

Thuộc tính giúp bạn thực hiện được việc định dạng nhiều đoạn văn trong cùng một lúc là thuộc tính Class. Lưu ý với các bạn là không có thẻ Class đâu. Chúng ta chỉ có thuộc tính Class.

Bạn hoạt động như thế nào vậy, Class?

Class sẽ giúp cho bạn có thể nhóm những đoạn văn được định dạng giống nhau trong một văn bản HTML dài ngoằng. Các đoạn văn này có thể chúng không nằm gần nhau trong trang tài liệu. Bạn nhớ lại một chút xem nếu bạn muốn thực hiện định dạng cho văn bản thì bạn sẽ phải nhập từng dòng code. Từng dòng từng dòng code định dạng cho từng đoạn từng đoạn. Đau đầu + mỏi tay = đuối. Chắc chắn là bạn không hề muốn như vậy một chút nào. Thuộc tính Class sẽ giúp cho bạn thực hiện điều này một cách dễ dàng. Bạn chỉ cần hêm thuộc tính này vào các thẻ mà bạn cần định dạng giống nhau. Thế là xong!

Cú pháp thuộc tính Class

Cú pháp:

<tên thẻ class= “Tên đặt cho thuộc tính Class”>Content</tên thẻ> hoặc <tên thẻ class= “Tên đặt cho thuộc tính Class”>Content </tên thẻ>

Cú pháp đầu tiên đã quá quen với bạn rồi. Còn cú pháp thứ hai là giành cho các thẻ Empty Tag. Bên cạnh thuộc tính Class bạn có thể thêm bất kỳ một thuộc tính hoặc nội dung nào bạn cần vào thẻ Empty Tag.

Ví dụ

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
         
    </head>
    <body>
        
        
        
            <p class="intro">
                    Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

                    Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane <em>kiểm soát bóng 70%</em>, thực hiện <em>604 đường chuyền với độ chính xác lên tới 90%</em> và tung ra tổng cộng <span style="color: #ff1aff">17 pha dứt điểm</span>, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>
            
                    <img src="images/zidane.jpg"  width="500" height="300" alt="Huấn luyện viên Zinedine Zidane"/> </br>
    
                    Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
                </p>
            <p>
                Phần 8 của Fast and Furious (The Fate of the Furious) vừa có màn ra mắt hoành tráng tại phòng vé Hàn với 1.428.225 khán giả trong 5 ngày đầu tiên công chiếu, thu về 10,58 triệu USD. Với kết quả này, Fast 8 đã hoàn toàn thống trị bảng xếp hạng doanh thu tuần vừa qua. Thế nhưng, nó vẫn còn kém những gì Beauty and the Beast từng làm được trong tuần đầu tiên ra mắt. "Quái Vật" nhà Disney thu hút tới 1.569.525 khán giả và thu về 11,7 triệu USD (khoảng 266 triệu VND), đáng chủ ý là bộ phim đã đạt được kết quả này chỉ sau 4 ngày.
            </p>
            <p class="intro">
                Càng cận ngày công chiếu, phim điện ảnh lần thứ 21 của loạt anime trinh thám nổi tiếng với tên gọi Detective Conan: Crimson Love Letter (tạm dịch Thám Tử Lừng Danh Conan: Bức thư tình đỏ thắm) lại càng siêng năng tung hoả mù thông tin khiến khán giả đứng ngồi không yên.

                Cụ thể, sau hai trailer đầu tiên tiết lộ chủ đề chính của phim sẽ xoay quanh hai nhân vật Kazuha và Heiji, vừa qua nhà phát hành lại tiếp tục tung ra hai đoạn quảng cáo ngắn để quảng bá phim trên sóng truyền hình Nhật Bản. Điều đáng nói là cách đặt tên hai đoạn phim này lại tiếp tục gợi nên nghi vấn: Liệu có phải Heiji đã thầm thương cô bạn thân của mình từ lâu?
            </p>


        
    
    </body>
</html>

Kết quả ví dụ

Thẻ này vẫn chưa phát huy tác dụng của nó. Chúng ta sẽ mượn thẻ Style đặt ở bên trong thẻ Head để xem tác dụng của thẻ Class. 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        <style>
            .intro {
                color: skyblue;
                background-color: beige;
            
            }
        </style>
    </head>
    <body>
        
        
        
            <p class="intro">
                    Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

                    Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane <em>kiểm soát bóng 70%</em>, thực hiện <em>604 đường chuyền với độ chính xác lên tới 90%</em> và tung ra tổng cộng <span style="color: #ff1aff">17 pha dứt điểm</span>, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>
            
                    <img src="images/zidane.jpg"  width="500" height="300" alt="Huấn luyện viên Zinedine Zidane"/> </br>
    
                    Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
                </p>
            <p>
                Phần 8 của Fast and Furious (The Fate of the Furious) vừa có màn ra mắt hoành tráng tại phòng vé Hàn với 1.428.225 khán giả trong 5 ngày đầu tiên công chiếu, thu về 10,58 triệu USD. Với kết quả này, Fast 8 đã hoàn toàn thống trị bảng xếp hạng doanh thu tuần vừa qua. Thế nhưng, nó vẫn còn kém những gì Beauty and the Beast từng làm được trong tuần đầu tiên ra mắt. "Quái Vật" nhà Disney thu hút tới 1.569.525 khán giả và thu về 11,7 triệu USD (khoảng 266 triệu VND), đáng chủ ý là bộ phim đã đạt được kết quả này chỉ sau 4 ngày.
            </p>
            <p class="intro">
                Càng cận ngày công chiếu, phim điện ảnh lần thứ 21 của loạt anime trinh thám nổi tiếng với tên gọi Detective Conan: Crimson Love Letter (tạm dịch Thám Tử Lừng Danh Conan: Bức thư tình đỏ thắm) lại càng siêng năng tung hoả mù thông tin khiến khán giả đứng ngồi không yên.

                Cụ thể, sau hai trailer đầu tiên tiết lộ chủ đề chính của phim sẽ xoay quanh hai nhân vật Kazuha và Heiji, vừa qua nhà phát hành lại tiếp tục tung ra hai đoạn quảng cáo ngắn để quảng bá phim trên sóng truyền hình Nhật Bản. Điều đáng nói là cách đặt tên hai đoạn phim này lại tiếp tục gợi nên nghi vấn: Liệu có phải Heiji đã thầm thương cô bạn thân của mình từ lâu?
            </p>


        
    
    </body>
</html>

Chúng ta sẽ nhóm hai đoạn văn khác nhau lại để định dạng. Chúng ta sẽ định dạng màu chữ và màu nền.

Kết quả ví dụ

Bạn thấy chỉ có hai Class cùng tên với nhau mới được tô màu. Còn lại đều không được tô màu.

Lưu ý dành cho các bạn là bạn nên đặt tên của thẻ Class không có ký tự đặc biệt. Đừng nên đặt số ở ký tự đầu tiên khi bạn đặt tên thẻ. Bởi vì kiểu tên có số ở ngay ký tự đầu chỉ hỗ trợ cho Internet Explorer. Không hỗ trợ cho các kiểu khác. Bạn cũng nên đặt tên nào cho dễ nhớ, tiện cho việc quản lý và bảo trì sau này.

Thẻ Class có nhiều công dụng tuyệt vời. Trước tiên là giảm tải lượng công việc mà bạn phải thực hiện trong cùng một thời gian. Rút ngắn thời gian đáng kinh ngạc luôn. Bên cạnh đó bạn còn có thể định dạng cho văn bản một cách dễ dàng hơn bằng CSS. Tuyệt hảo luôn. Thủ pháp này rất cần thiết cho việc định dạng và trang trí cho nội dung HTML bằng CSS.

Chúng ta đã học được một thẻ khá thú vị rồi. Giờ đây là phút giây để bạn luyện tập. Bài tập ở  phía dưới trang. Chúc bạn học tốt!

 




Đặt câu hỏi cho bài viết này ?