IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 HTML The class Attribute - Thuộc tính Class trong HTML

HTML The class Attribute - Thuộc tính Class trong HTML

by GokiSoft.Com - 19:30 24/05/2020 3,395 Lượt Xem


Thuộc tính class trong HTML được dùng để định nghĩa các phong cách giống nhau cho các thành phần với cùng một tên class.




Sử dụng thuộc tính Class


Toàn bộ các thành phần với cùng một thuộc tính  class sẽ có chung một phong cách.

Ở đây chung ta có ba thành phần  <div> trỏ đến cùng một tên class:

ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="cities">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>


Kết quả

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.






Sử dụng thuộc tính Class trên các thành phần Inline


Thuộc tính HTML class cũng có thể được sử dụng trên các thành phần inline:

ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>


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

Ghi chú: Tên Class phân biệt hoa thường!

Tip: Bạn có thể học thêm nhiều hơn nũa về CSS trong hướng dẫn CSS.




Chọn các thành phần với một Class cụ thể


Trong CSS, để chọn các thành phần với một class cụ thể, viết một dấu chấm(.), tiếp theo là tên của class:

ví dụ

Sử dụng CSS để tạo kiểu cho toàn bộ các thành phần với tên class là "city":

<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>


Kết quả:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.





Các Class đa dạng


Các thành phần HTML có thể có nhiều hơn một tên class, mỗi tên class phải được ngăn cách bởi một khoảng trắng.

ví dụ

Tạo kiểu cho các thành phần có tên class là "city", đồng thời tạo kiểu cho các thành phần có tên là "main":

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
<!DOCTYPE html>
<html>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 

.main {
  text-align: center;
}
</style>
<body>

<h2>Multiple Classes</h2>
<p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p>

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

</body>
</html>


Trong ví dụ trên, thành phần <h2> đầu tiền thuộc về cả class "city" và class "main".




Các thẻ khác nhau có thể chia sẻ một Class


Các thẻ khác nhau, như <h2> và <p>, có thể có chung một tên class và qua đó chia sẻ cùng một phong cách:

ví dụ

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
<!DOCTYPE html>
<html>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
<body>

<h2>Same Class, Different Tag</h2>
<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>

</body>
</html>





Sử dụng thuộc tính Class trong JavaScript


Tên class cũng có thể được sử dụng bởi JavaScript để thực hiện các nhiệm vụ nhất định, trên các thành phần với tên class cụ thể.

JavaScript có thể truy cập vào các thành phần với một tên class cụ thể bằng cách sử dụng phương thức getElementsByClassName() :

ví dụ

Khi một người dùng bấm vào một nút, giấu toàn bộ các thành phần với tên class là "city":

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
<!DOCTYPE html>
<html>
<body>

<h2>Using The class Attribute in JavaScript</h2>
<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>

<button onclick="myFunction()">Hide elements</button>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

</body>
</html>

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

Bạn sẽ được học thêm về JavaScript trong chương HTML JavaScript, hoặc bạn có thể học hướng dẫn về JavaScript




Bình luận



Tài Liệu Tham Khảo

Đã sao chép!!!