Bạn đang xem : cách thêm nhiều lớp trong html

HTML

class Thuộc tính

Thuộc tính HTML class
được sử dụng để chỉ định một lớp cho một phần tử HTML.

Nhiều phần tử HTML có thể chia sẻ cùng một lớp.

Sử dụng Thuộc tính lớp

Thuộc tính class thường được sử dụng để trỏ
đến một tên lớp trong một biểu định kiểu. Nó cũng có thể được sử dụng bởi JavaScript để truy cập và
thao tác các phần tử với tên lớp cụ thể.

Trong ví dụ sau, chúng ta có ba phần tử & lt; div & gt;
với thuộc tính class với giá trị là
“thành phố”. Cả ba & lt; div & gt;
các phần tử sẽ được tạo kiểu như nhau theo . city
định nghĩa phong cách trong phần đầu:

Ví dụ

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.city {
background-color: cà chua;
màu: trắng;
border: 2px màu đen đặc;
margin: 20px;
padding: 20px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; div class = “city” & gt;

& lt; h2 & gt; London & lt; / h2 & gt;
& lt; p & gt; London là thủ đô của nước Anh. & lt; / p & gt;
& lt; / div & gt;

& lt; div class = “city” & gt;

& lt; h2 & gt; Paris & lt; / h2 & gt;
& lt; p & gt; Paris là thủ đô của Pháp. & lt; / p & gt;
& lt; / div & gt;

& lt; div class = “thành phố” & gt;

& lt; h2 & gt; Tokyo & lt; / h2 & gt;
& lt; p & gt; Tokyo là thủ đô của Nhật Bản. & lt; / p & gt;
& lt; / div & gt;

& lt; / body & gt ;
& lt; / html & gt;


Hãy tự mình thử »

Trong ví dụ sau, chúng tôi có hai phần tử & lt; span & gt;
với thuộc tính class với giá trị là
“Ghi chú”. Cả & lt; span & gt;
các phần tử sẽ được tạo kiểu như nhau theo . note
định nghĩa phong cách trong phần đầu:

Ví dụ

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.note {
font-size: 120%;
color: red;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

Xem Thêm  Preload, prefetch and other tags: what they do and when to use them - dns-prefetch

& lt; h1 & gt; My & lt; span class = “note” & gt; important & lt; / span & gt; Tiêu đề & lt; / h1 & gt;
& lt; p & gt; Đây là một số & lt; span class = “note” & gt; quan trọng & lt; / span & gt; text. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;


Hãy tự mình thử »

Mẹo: Thuộc tính class có thể được sử dụng trên bất kỳ phần tử HTML nào.

Lưu ý: Tên lớp có phân biệt chữ hoa chữ thường!

Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi.

Cú pháp cho lớp

Để tạo một lớp học; viết một ký tự dấu chấm (.), theo sau là một
tên lớp.
Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}:

Ví dụ

Tạo một lớp có tên “thành phố”:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
.city {
background-color: cà chua;
color: white;
padding: 10px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; h2 class = “city” & gt; London & lt; / h2 & gt;
& lt; p & gt; London là thủ đô của nước Anh. & lt; / p & gt;

& lt; h2 class = “city” & gt; Paris & lt; / h2 & gt;
& lt; p & gt; Paris là thủ đô của Pháp. & lt; / p & gt;

& lt; h2 class = “city” & gt; Tokyo & lt; / h2 & gt;
& lt; p & gt; Tokyo là thủ đô của Nhật Bản. & lt; / p & gt;

& lt; / body & gt;
& lt; / html & gt;


Hãy tự mình thử »

Nhiều lớp

Các phần tử HTML có thể thuộc về nhiều lớp.

Để xác định nhiều lớp, hãy tách tên lớp bằng một khoảng trắng, ví dụ: & lt; div
class = “city main” & gt ;. Phần tử sẽ được tạo kiểu theo tất cả
các lớp được chỉ định.

Trong ví dụ sau, phần tử & lt; h2 & gt; đầu tiên thuộc về cả
lớp
thành phố và cả lớp main ,
và sẽ nhận được các kiểu CSS từ cả hai lớp:

Các phần tử khác nhau có thể chia sẻ cùng một lớp

Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp.

Xem Thêm  Chế độ xem SQL là gì? - cách xem sql

Trong ví dụ sau, cả & lt; h2 & gt; & lt; p & gt;
chỉ vào lớp “thành phố”
và sẽ chia sẻ cùng một phong cách:

Ví dụ

& lt; h2 class = “city” & gt; Paris & lt; / h2 & gt;
& lt; p
class = “city” & gt; Paris là thủ đô của Pháp & lt; / p & gt;


Hãy tự mình thử »

Sử dụng Thuộc tính lớp trong JavaScript

Tên lớp cũng có thể được JavaScript sử dụng để thực hiện các tác vụ nhất định cho
các yếu tố cụ thể.

JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng phương thức getElementsByClassName () :

Ví dụ

Nhấp vào nút để ẩn tất cả các phần tử có tên lớp
“thành phố”:

& lt; script & gt;
function myFunction () {
var x = document.getElementsByClassName (“city”) ;
for (var i = 0; i & lt; x. chiều dài;
i ++) {
x [i] .style.display = “none”;
}
}
& lt; / script & gt;


Hãy tự mình thử »

Đừng lo lắng nếu bạn không hiểu mã trong ví dụ trên.

Bạn sẽ tìm hiểu thêm về JavaScript trong chương HTML JavaScript của chúng tôi hoặc bạn có thể nghiên cứu
Hướng dẫn JavaScript .

Tóm tắt chương

  • Thuộc tính HTML class chỉ định một hoặc
    các tên lớp khác cho một phần tử
  • Các lớp được CSS và JavaScript sử dụng để chọn và truy cập vào các lớp cụ thể
    phần tử
  • Thuộc tính class có thể được sử dụng trên bất kỳ
    Phần tử HTML
  • Tên lớp có phân biệt chữ hoa chữ thường
  • Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp
  • JavaScript có thể truy cập các phần tử có tên lớp cụ thể với getElementsByClassName ()
    phương pháp

Bài tập HTML

Tự kiểm tra bằng các bài tập

Bài tập:

Tạo một bộ chọn lớp có tên “đặc biệt”.

Thêm thuộc tính màu với giá trị “blue” bên trong lớp “đặc biệt”.

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; đầu & gt;

& lt; phong cách & gt;

;

& lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; p class = “special” & gt; Đoạn văn của tôi & lt; / p & gt;

& lt; / body & gt;

& lt; / html & gt;

Bắt đầu bài tập


Xem thêm những thông tin liên quan đến chủ đề cách thêm nhiều lớp trong html

Thuộc tính “id” và “class” trong HTML

  • Tác giả: Học lập trình
  • Ngày đăng: 2021-05-29
  • Đánh giá: 4 ⭐ ( 2713 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về thuộc tính “id” và “class” trong HTML, vì sao cần sử dụng id và class trong HTML.

    Tự học lập trình website tại: https://hoclaptrinhwebsite.com/

    Các khóa học:
    HTML cơ bản: https://hoclaptrinhwebsite.com/category/html-co-ban
    CSS cơ bản: https://hoclaptrinhwebsite.com/category/css-co-ban
    Sass: https://hoclaptrinhwebsite.com/category/sass
    Javascript cơ bản: https://hoclaptrinhwebsite.com/category/javascript-co-ban
    Jquery: https://hoclaptrinhwebsite.com/category/jquery
    Bootstrap: https://hoclaptrinhwebsite.com/category/bootstrap
    ReactJS: https://hoclaptrinhwebsite.com/category/reactjs
    Redux/Redux Saga: https://hoclaptrinhwebsite.com/category/redux-redux-saga
    Database (MongoDB): https://hoclaptrinhwebsite.com/category/database-mongodb
    NodeJS (ExpressJS): https://hoclaptrinhwebsite.com/category/nodejs-express

    Kết nối với mình:
    Facebook: https://www.facebook.com/difoug/
    Instagram: https://www.instagram.com/difoug/

HƯỚNG DẪN SỬ DỤNG NHANH MICRO STATION V8I

  • Tác giả: text.xemtailieu.net
  • Đánh giá: 3 ⭐ ( 1949 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xemtailieu là thư viện tại liệu, giáo trình, bài giảng, ebook, khoá luận dành cho học tập.

Cách thêm lớp Active active vào Html.ActionLink trong ASP.NET MVC

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 1055 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Trong Bootstrap, activelớp cần được áp dụng cho
  • phần tử chứ không phải . Xem ví…

Thuộc tính class trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 2661 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong HTML, thuộc tính class trong HTML dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML. Tên lớp có thể dùng trong CSS hoặc JavaScript để thực hiện

Làm thế nào để thêm JavaScript trong HTML

  • Tác giả: www.hostinger.vn
  • Đánh giá: 4 ⭐ ( 3711 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các trang tĩnh như chỉ chứa toàn HTML file thường chậm do phải xác thực tại server. JavaScript tăng trải nghiệm cho người dùng và tăng tính linh hoạt của website nhờ xác thực dữ liệu từ phía người dùng thay vì phía server. Bài hướng dẫn này sẽ chỉ bạn cách chèn JavaScript trong HTML.

Cách tạo và thêm thuộc tính HTML bằng JavaScript

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

Tạo menu đa cấp trong thiết kế web bằng html css

  • Tác giả: dichvuseogiarehanoi.com
  • Đánh giá: 4 ⭐ ( 1480 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web bằng html css,hướng dẫn bạn cách tạo một menu đa cấp đẹp mà không cần phải sử dụng jquery

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  Các cách đóng JavaScript hoạt động như thế nào? - làm thế nào để một hàm tạo một javascript đóng

By ads_php