Người Viết : ViKiMi Editor

Thiết kế Kiểu cho các phần tử HTML trên Website thật dễ dàng khi dùng HTML Class Attribute
Nếu bạn đã lập trình hướng đối tượng, bạn sẽ thắc mắc rằng với HTML có thể làm những thứ tương tự như vậy không? Chắc hẳn là có rồi, Bạn sẽ có thể tạo ra các phần tử và nhóm chúng vào trong các lớp để quản lý. Cách này sẽ giúp bạn tiết kiệm được rất nhiều thời gian làm việc, tất cả sẽ trở nên rõ ràng khi làm việc, thiết kế.
Khi bạn lập trình hướng đối tượng với bất kỳ một ngôn ngữ bậc cao thì bạn sẽ tạo ra các lớp để quản lý các đối tượng của chúng.
Đó là sự thể hiện sức mạnh của một ngôn ngữ bậc cao.
+ Nhưng bạn cũng có thể bắt gặp sự tương đồng này với ngôn ngữ HTML
+ Với HTML bạn cũng có thể tạo ra các phần tử và nhóm chúng vào các lớp để quản lý. Điều này khiến cho công việc thiết kế Web sẽ không tốn công sức, thời gian.
A ] Vậy bạn sẽ làm điều này như thế nào ?
CÂU TRẢ LỜI :
+ Bạn sẽ sử dụng Thuộc tính lớp ( / Class ) của HTML để chỉ định lớp cho các phần tử HTML.
+ Bạn sẽ quản lý các phần tử của Trang Web HTML bằng các lớp
NHỮNG ĐIỀU BẠN CẦN NẮM BẮT :
+ Nhiều phần tử HTML có thể thuộc cùng một lớp.
Example : Thuộc cùng Lớp / Class >> Education
<div class=”Education“> DH Bách Khoa <p>Phân Viện Hà Nam </p></div>
<div class=”Education“> DH Thái Nguyên <p>Phân Viện Nam Định </p></div>
<div class=”Education“> DH Nhân Văn </div>
+ Một phần tử HTML có thể thuộc nhiều lớp.
Example : Một phần tử thuộc nhiều Lớp / Class >> Education và University
<h2 class=”Education University Main“> DH Bách Khoa </h2>
Để xác định nhiều lớp, hãy phân tách các tên lớp bằng dấu cách.
Phần tử chỉ định sẽ tạo kiểu theo tất cả các lớp nó thuộc về.
B ] VẬY BẠN LÀM THẾ NÀO ĐỂ THIẾT KẾ TRANG WEB SỬ DỤNG CLASS ?
Chúng ta cần tạo ra định nghĩa cho Các Class sử dụng HTML – Style CSS
( HTML – Style CSS là một phần của HTML )
Hoặc bạn cũng có thể sử dụng một file css để làm điều này.
Cú pháp cho CLASS :
Để tạo một CLASS viết một ký tự dấu chấm (.), theo sau là tên CLASS. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}
<style>
.Education {
background-color: tomato;
color: white;
padding: 10px;
}
.University {
Font-size : 15px;
}
</style>
Bạn có thể tham khảo một ví dụ cơ bản sau.
EXAMPLE :
<!DOCTYPE html>
<html>
<head>
<style>
.Education {
background-color: tomato;
color: white;
padding: 10px;
}
.University {
Font-size : 15px;
}
</style>
</head>
<body>
<div class="Education University"> DH Bách Khoa
<p>Phân Viện Hà Nam </p>
</div>
<div class="Education University"> DH Thái Nguyên
<p>Phân Viện Nam Định </p>
</div>
<div class="Education University"> DH Nhân Văn </div>
<h2 class="Education"> THPT Nguyễn Anh Xuân </h2>
</body>
</html>
B – 1 ] JAVASCRIPT THIẾT KẾ WEBSITE VỚI HTML CLASS ATRRIBUTE
JavaScript cho phép bạn thiết kế Website dựa vào Các Class được định nghĩa bởi HTML. Điều này khá đơn giản và linh hoạt.
( Yêu cầu bạn phải rõ ngôn ngữ JavaScript )
>> Sử dụng HTML CLASS Attribute trong JavaScript
Tên CLASS được JavaScript sử dụng để thực hiện các tác vụ cho các phần tử, thành phần HTML cụ thể.
JavaScript truy cập các phần tử HTML dựa vào tên Lớp mà chúng thuộc về.
Phương thức được sử dụng là getElementsByClassName( )
Example :
<script>
function myFunction() {
var x = document.getElementsByClassName(“Education“);
for (var i = 0; i < x.length; i++) {
x[i].style.display = “inline-block”;
}
}
</script>