• About
  • Advertise
  • Privacy & Policy
  • Contact
NQ NEWS
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • All
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Dịch vụ ngân hàng
    • DIY - Handmade
    • Game - Trò chơi
    • Giải trí
    • Giáng sinh - Noel
    • Khám phá khoa học
    • Khám phá thiên nhiên
    • Khoa học Vũ trụ
    • Khoa học vui
    • Kỹ năng
    • Là gì?
    • Máy công cụ
    • Mẹo hay
    • Mẹo vặt
    • Quà tặng
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Cách phản ánh trên PC Covid

    3 cách phản ánh trên PC Covid khi bị sai thông tin cực kỳ hiệu quả

    Cách thay đổi thư mục tải xuống trên Samsung Internet

    Cách thay đổi thư mục tải về trên Samsung Internet cực kỳ đơn giản

    Tại sao gõ tiếng việt bị lỗi trên iOS 15?

    Tại sao gõ tiếng Việt bị lỗi trên iOS 15? Bạn xem cách sửa cực dễ nhé!

    cách cập nhật tính năng mới trên PC-Covid

    Cách cập nhật tính năng mới trên PC Covid để theo dõi và phản ánh 24/7

    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
No Result
View All Result
  • Kiến thức tổng hợp
    • Development
    • Deep Learning
    • Cloud Computing
    • Kiến thức bảo mật
    • Tin học văn phòng
  • Thủ thuật
    • Phần Mềm
    • Sửa lỗi máy tính
    • Bảo mật máy tính
    • Tăng tốc máy tính
    • Thủ thuật Wifi
  • Quản trị hệ thống
    • Giải pháp bảo mật
    • Mail Server
    • Mạng LAN – WAN
    • Máy chủ
    • Windows Server 2012
  • Tin tức
  • Đời sống thường thức
    • All
    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh - Quay phim
    • Dịch vụ ngân hàng
    • DIY - Handmade
    • Game - Trò chơi
    • Giải trí
    • Giáng sinh - Noel
    • Khám phá khoa học
    • Khám phá thiên nhiên
    • Khoa học Vũ trụ
    • Khoa học vui
    • Kỹ năng
    • Là gì?
    • Máy công cụ
    • Mẹo hay
    • Mẹo vặt
    • Quà tặng
    Ielts La Gi 640 1

    IELTS là gì? Những điều cần biết về IELTS

    Cài font chữ

    Kẻ ô ly vuông trong Word và in ô ly Word

    Cách phản ánh trên PC Covid

    3 cách phản ánh trên PC Covid khi bị sai thông tin cực kỳ hiệu quả

    Cách thay đổi thư mục tải xuống trên Samsung Internet

    Cách thay đổi thư mục tải về trên Samsung Internet cực kỳ đơn giản

    Tại sao gõ tiếng việt bị lỗi trên iOS 15?

    Tại sao gõ tiếng Việt bị lỗi trên iOS 15? Bạn xem cách sửa cực dễ nhé!

    cách cập nhật tính năng mới trên PC-Covid

    Cách cập nhật tính năng mới trên PC Covid để theo dõi và phản ánh 24/7

    • Chăm sóc Nhà cửa
    • Chăm sóc Sức khỏe
    • Chụp ảnh – Quay phim
    • Dịch vụ ngân hàng
    • Game – Trò chơi
    • Kỹ năng
No Result
View All Result
NQ NEWS
No Result
View All Result
Home Kiến thức tổng hợp Lập trình

Thuộc tính class trong HTML

@admiz by @admiz
20/04/2022
in Lập trình
0
Class Html 1

Trong HTML, thuộc tính class 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 một số tác vụ nhất định cho phần tử có tên lớp đó. Trong CSS, để chọn phần tử có lớp đặc biệt, ta thêm dấu chấm (.) và sau đó điền tên lớp.

Ví dụ dùng CSS để tạo kiểu cho tất cả các phần tử có tên lớp là “thành phố”

<style>
.thành phố {
 background-color: tomato;
 color: white;
 padding: 10px;
 
</style>

<h2 class="thành phố">Hà Nội</h2>
<p>Hà Nội là thủ đô của Việt Nam.</p>

<h2 class="thành phố">Paris</h2>
<p>Paris là thủ đô của Pháp.</p>

<h2 class="thành phố">Tokyo</h2>
<p>Tokyo là thủ đô của Nhật Bản.</p>

Kết quả hiển thị sẽ như dưới đây.

Thuộc tính class áp dụng cho nhiều phần tử
Thuộc tính class áp dụng cho nhiều phần tử

Thuộc tính class áp dụng cho nhiều phần tử

Lưu ý:

  • Thuộc tính class có thể dùng với bất kì phần tử HTML nào.
  • Tên lớp có phân biệt giữa chữ viết hoa và viết thường.

Dùng thuộc tính class trong JavaScript

JavaScript có thể truy cập các phần tử có tên lớp nhất định bằng getElementsByClassName()

Ví dụ khi người dùng click vào một nút, ẩn tất cả các phần tử có tên lớp là “thành phố”.

<script>
function myFunction() {
 var x = document.getElementsByClassName("thành phố");
 for (var i = 0; i < x.length; i++) {
  x[i].style.display = "none";
  
 
</script>

Sử dụng nhiều lớp trong HTML

Các phần tử HTML có thể dùng nhiều tên lớp, mỗi tên lớp cách nhau một khoảng trắng. Ví dụ có thể tạo kiểu cho phần tử bằng lớp “thành phố” và lớp “lớn”.

<h2 class="thành phố lớn">London</h2>
<h2 class="thành phố">Paris</h2>
<h2 class="thành phố">Tokyo</h2>

Cùng một lớp nhưng thẻ khác nhau

Các thẻ khác nhau như <h2> hay <p> có thể dùng cùng một tên lớp (và có kiểu cách giống nhau).

<h2 class="thành phố">Hà Nội</h2>
<p class="thành phố">Hà Nội là thủ đô của Việt Nam.</p>

Bài trước: Phần tử khối và nội dòng trong HTML

Bài sau: Thuộc tính id trong HTML

  • Thẻ Comment trong HTML
  • Thẻ div trong HTML
  • Bộ chọn ID trong CSS
  • Phần tử SVG trong HTML5
  • Thẻ aside trong HTML
  • Thẻ abbr trong HTML
Post Views: 233
Tags: HTMLtên lớp trong HTMLtên thuộc tính classthuộc tính classthuộc tính class trong html
Previous Post

Sale off khác sale up to như nào?

Next Post

Cap đòi nợ, stt đòi nợ, câu nói đòi nợ hay và chất để tiền về túi nhanh nhất

Related Posts

Dien Tich Tam Giac 640 1
Lập trình

Công thức tính diện tích tam giác: vuông, thường, cân, đều

26/12/2021
Huong Dan Cai Dat Node Js 640 1
Lập trình

Hướng dẫn cài đặt Node.js

26/12/2021
Cau Truc Du Lieu Hang Doi Queue 640 1
Lập trình

Cấu trúc dữ liệu hàng đợi (Queue)

26/12/2021
Hoc Css 640 8
Lập trình

Thanh điều hướng – Navigation Bar trong CSS

26/12/2021
Ms Sql Server Management Studio 640 3
Lập trình

Quản lý MS SQL Server bằng Management Studio

26/12/2021
Java Development Kit 1
Lập trình

Tải Java Development Kit 8-update-281

26/12/2021
Next Post
Stt Doi No 700 1

Cap đòi nợ, stt đòi nợ, câu nói đòi nợ hay và chất để tiền về túi nhanh nhất

Bài mới nhất

Giới Thiệu Và đánh Giá Supermicro Amd Server 2013s C0r 606fdeb8c702a.jpeg

Giới thiệu và đánh giá Supermicro AMD Server 2013S-C0R

24/09/2023
Đánh Giá, Benchmark Cpu Intel Xeon W 2295 – 18 Cores Socket Lga2066 606fdeabecf98.jpeg

Đánh giá, benchmark CPU Intel Xeon W-2295 – 18 cores socket LGA2066

24/09/2023
Amd Và Intel Báo Cáo Cập Nhật Vấn đề Cung Cấp Cpu Trong Bối Cảnh đại Dịch Covid 19 606fdea60759b.jpeg

AMD và Intel báo cáo cập nhật vấn đề cung cấp CPU trong bối cảnh đại dịch Covid-19

23/09/2023
Backup Cho Windows Server 2019: Giải Pháp Tối ưu Với Nakivo Backup & Replication 606fde9e6fcf1.jpeg

Backup cho Windows Server 2019: Giải pháp tối ưu với NAKIVO Backup & Replication

23/09/2023
Rtx 2080 Ti Và Máy Trạm Superworkstation: Sự Kết Hợp Hoàn Hảo Cho Các ứng Dụng đồ Họa Cao Cấp 606fde8fe195a.jpeg

RTX 2080 Ti và máy trạm SuperWorkstation: Sự kết hợp hoàn hảo cho các ứng dụng đồ họa cao cấp

22/09/2023

Chuyên mục

  • Android
  • Bảo mật máy tính
  • Bảo mật, Antivirus
  • Chăm sóc Nhà cửa
  • Chăm sóc Sức khỏe
  • Chụp ảnh – Quay phim
  • Chuyện công nghệ
  • Deep Learning
  • Development
  • Dịch vụ công trực tuyến
  • Dịch vụ ngân hàng
  • Dịch vụ nhà mạng
  • DIY – Handmade
  • Đời sống thường thức
  • Game – Trò chơi
  • Giải pháp bảo mật
  • Giải trí
  • Giáng sinh – Noel
  • Hệ thống
  • Hệ thống
  • iPhone
  • Khám phá khoa học
  • Khám phá thiên nhiên
  • Khoa học Vũ trụ
  • Khoa học vui
  • Kiến thức bảo mật
  • Kiến thức cơ bản phổ thông
  • Kiến thức Marketing căn bản
  • Kiến thức tổng hợp
  • Kỹ năng
  • Là gì?
  • Lập trình
  • Linux
  • Linux OS
  • macOS
  • Mail Server
  • Mạng LAN – WAN
  • Máy ảo
  • Máy chủ
  • Máy công cụ
  • Mẹo hay
  • Mẹo vặt
  • ms excel
  • ms-powerpoint
  • Nền tảng điện toán đám mây
  • Phần cứng
  • Phần Mềm
  • Quà tặng
  • Quản trị hệ thống
  • Raspberry Pi
  • Sửa lỗi máy tính
  • Tăng tốc máy tính
  • Thủ thuật
  • Thủ thuật SEO
  • Thủ thuật Wifi
  • Tiện ích hệ thống
  • Tin học văn phòng
  • Tin tức
  • Uncategorized
  • Ứng dụng
  • Website
  • Windows Server 2012

Thẻ

#app #chatbot #chatbot tự động #CRM #Kiến thức cơ bản #Techblog #Thiết kế website Android apple cách chơi Pokémon Go Email Marketing Gmail Google Google Drive hacker HTML hàm python hàm python có sẵn hình nền máy tính học css học python học SQL ios iphone iphone 12 Microsoft minecraft mssql MS SQL Server Pokémon Go PUBG Mobile python Raspberry Pi Samsung smartphone SQL Server thiết bị số tivi tài liệu python windows windows 10 YouTube điện thoại di động điện thoại thông minh ứng dụng
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2022 Pha Le Solution

No Result
View All Result
  • Home

© 2022 Pha Le Solution