Lớp và id html

Công nghệ Lập trình HTML

27/09
Thạch
HTML
0
758

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Thuộc tính lớp HTML

classThuộc tính HTML đượ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

Các classthuộc tính thường được sử dụng để trỏ đến một tên lớp trong một style sheet. Nó cũng có thể được JavaScript sử dụng để truy cập và thao tác các phần tử có tên lớp cụ thể.
Trong ví dụ sau, chúng ta có ba <div>phần tử có classthuộc tính với giá trị là "city". Tất cả ba <div> yếu tố sẽ được tạo kiểu như nhau theo .city định nghĩa kiểu trong phần đầu:

Thí dụ

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

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

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

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

</body>
</html>

Trong ví dụ sau, chúng ta có hai <span>phần tử có classthuộc tính với giá trị là "note". Cả hai <span> yếu tố sẽ được tạo kiểu như nhau theo .note định nghĩa kiểu trong phần đầu:

Thí dụ

<!DOCTYPE html>
<html>
<head>
<style>
.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>

Mẹo: Các classthuộc tính có thể được sử dụng trên bất kỳ phần tử HTML.
Lưu ý: Tên lớp phân biệt chữ hoa chữ thường!

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 {}:

Thí dụ

Tạo một lớp có tên "City":

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<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>

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ụ: <div class = "city main">. Phần tử sẽ được tạo kiểu theo tất cả các lớp được chỉ định.
Trong ví dụ sau, <h2>phần tử đầu tiên thuộc về cả citylớp và cũng thuộc về mainlớp và sẽ nhận các kiểu CSS từ cả hai lớp:

Thí dụ

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

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.
Trong ví dụ sau, cả hai <h2>và đều <p> trỏ đến lớp "thành phố" và sẽ chia sẻ cùng một kiểu:

Thí dụ

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

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 phần tử cụ thể.
JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng getElementsByClassName()phương thức:

Thí dụ

Nhấp vào nút để ẩn tất cả các phần tử có tên lớp là "City":

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

Tóm tắt chương

classThuộc tính HTML chỉ định một hoặc nhiều tên lớp cho một phần tử
Các lớp được CSS và JavaScript sử dụng để chọn và truy cập các phần tử cụ thể
Các classthuộc tính có thể được sử dụng trên bất kỳ phần tử HTML
Tên lớp 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ể bằng getElementsByClassName() phương thức

Thuộc tính id HTML

idThuộc tính HTML được sử dụng để chỉ định một id duy nhất cho một phần tử HTML.
Bạn không thể có nhiều hơn một phần tử có cùng một id trong một tài liệu HTML.

Sử dụng Thuộc tính id

Các idthuộc tính chỉ định một id duy nhất cho một phần tử HTML. Giá trị của id thuộc tính phải là duy nhất trong tài liệu HTML.
Các idthuộc tính được sử dụng để trỏ đến một tuyên bố cụ thể phong cách trong một style sheet. Nó cũng được JavaScript sử dụng để truy cập và thao tác phần tử với id cụ thể.
Cú pháp cho id là: viết một ký tự băm (#), theo sau là tên id. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}.
Trong ví dụ sau, chúng ta có một <h1>phần tử trỏ đến tên id "myHeader". Phần <h1> tử này sẽ được tạo kiểu theo #myHeader định nghĩa kiểu trong phần đầu:

Thí dụ

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Lưu ý: Tên id phân biệt chữ hoa chữ thường!
Lưu ý: Tên id phải chứa ít nhất một ký tự, không được bắt đầu bằng số và không được chứa khoảng trắng (dấu cách, tab, v.v.).

Sự khác biệt giữa Class và ID

Tên lớp có thể được sử dụng bởi nhiều phần tử HTML, trong khi tên id chỉ được sử dụng bởi một phần tử HTML trong trang:

Thí dụ

<style>
/* Tạo kiểu cho phần tử với id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Tạo kiểu cho tất cả các phần tử với tên lớp "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- Phần tử có id duy nhất -->
<h1 id="myHeader">My Cities</h1>

<!-- Nhiều phần tử có cùng lớ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>

Dấu trang HTML có ID và Liên kết

Dấu trang HTML được sử dụng để cho phép người đọc chuyển đến các phần cụ thể của trang web.
Dấu trang có thể hữu ích nếu trang của bạn rất dài.
Để sử dụng dấu trang, trước tiên bạn phải tạo dấu trang, sau đó thêm liên kết vào đó.
Sau đó, khi liên kết được nhấp vào, trang sẽ cuộn đến vị trí có dấu trang.

Thí dụ

Đầu tiên, hãy tạo một dấu trang với idthuộc tính:

<h2 id="C4">Chapter 4</h2>

Sau đó, thêm một liên kết đến dấu trang ("Chuyển đến Chương 4"), từ trong cùng một trang:

Thí dụ

<a href="#C4">Jump to Chapter 4</a>

Hoặc, thêm một liên kết đến dấu trang ("Chuyển đến Chương 4"), từ một trang khác:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Sử dụng Thuộc tính id trong JavaScript

Các idthuộc tính cũng có thể được sử dụng bởi các hoạt Javascript để thực hiện một số nhiệm vụ cho rằng yếu tố cụ thể.
JavaScript có thể truy cập một phần tử có id cụ thể bằng getElementById()phương thức:

Thí dụ

Sử dụng idthuộc tính để thao tác văn bản với JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Tóm tắt chương

Các idthuộc tính được sử dụng để xác định một id duy nhất cho một phần tử HTML
Giá trị của id thuộc tính phải là duy nhất trong tài liệu HTML
Các id thuộc tính được sử dụng bởi CSS và JavaScript để phong cách / chọn một yếu tố cụ thể
Giá trị của id thuộc tính có phân biệt chữ hoa chữ thường
Các id thuộc tính cũng được sử dụng để tạo ra bookmark HTML
JavaScript có thể truy cập một phần tử có id cụ thể bằng getElementById() phương thức