Trong thiết kế web, để áp đặt các phần tử giống nhau theo một định dạng, mẫu yêu cầu nào đó thì chúng ta thường sẽ sử dụng mẫu định dạng là class hay còn gọi là class selector. Giả sử như Trường chúng ta qui định tất cả sinh viên khi vào Trường phải mặc đồng phục, mang giày,... Với các yêu cầu ấy được áp đặt cho phần đông sinh viên, vì thế chúng ta sẽ chọn mẫu chọn định dạng class.
Theo yêu cầu của class selector thì ký tự đầu tiên phải bắt đầu là dấu chấm "."
.ten_class{
Thuộc_tính1: Giá_trị;
Thuộc_tính2: Giá_trị;
...
Thuộc_tínhn:Giá trị;
}
Trong đó:
Ví dụ:
.banner{
width:750px;
height:100px;
background-color:blue;
font-size:25px;
}
.vungtrai{
width:250px;
height:500px;
background-color:green;
font-size:25px;
}
Áp dụng:
<div class="banner"> </div> <div class="vungtrai"> </div>
Trong thiết kế web, để áp đặt số ít (hay chỉ duy nhất một) phần tử giống nhau theo một định dạng, mẫu yêu cầu nào đó thì chúng ta thường sẽ sử dụng mẫu định dạng là id hay còn gọi là id selector. Giả sử như Trường chúng ta qui định tất cả sinh viên khi vào Trường phải mặc đồng phục, mang giày,... nhưng bên cạnh đó lại có các bạn bị dị tật nên không thể mang giầy, hay mặt đồng phục,... Vì vậy với các sinh viên này sẽ được qui định riêng. Trong các tình huống này chúng ta sẽ chọn mẫu chọn định dạng id.
Theo yêu cầu của id selector thì ký tự đầu tiên phải bắt đầu là dấu chấm "#"
#ten_class{
Thuộc_tính1: Giá_trị;
Thuộc_tính2: Giá_trị;
...
Thuộc_tínhn:Giá trị;
}
Trong đó:
Ví dụ:
#vungphai{
width:500px;
height:500px;
background-color:yellow;
font-size:25px;
}
Áp dụng:
<div id="banner"> </div> <div class="vungtrai"> </div> <div id="vungphai"> </div>
Trong ngôn ngữ html, người ta đã xây dựng sẵn cho chúng ta một số thẻ cơ bản để chúng ta có thể sử dụng trong thiết kế website của chúng ta.
Các thẻ này đã được qui định trước các thuộc tính ban đầu. Chúng ta hoàn toàn có thể thay đổi các thuộc tính này theo ý muốn chúng ta.
Dạng này, tên selector sẽ là tên của thẻ.
ten_the{
Thuộc_tính1: Giá_trị;
Thuộc_tính2: Giá_trị;
...
Thuộc_tínhn:Giá trị;
}
Trong đó:
Ví dụ:
h2{
color:pink;
font-size:30px;
}
Áp dụng:
<h2> TRẦN VĨNH XUYÊN </h2>
Trong quá trình thiết kế, chúng ta cần chọn ra các selector dựa trên thuộc tính của các selector này.
Giả sử chúng ta cần tạo một tạo ra một bộ chọn gồn các phần tử là thẻ a mà có thuộc tính khai báo thuộc tính target.
Tên_thẻ[thuộc_tính=gia_tri]
{
Thuộc_tính1: Giá_trị;
Thuộc_tính2: Giá_trị;
...
Thuộc_tínhn:Giá trị;
}
Trong đó:
Ví dụ:
<style>
a[target] {
background-color: yellow;
}
</style>
Áp dụng:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
[href] {
color: green;
}
a[href="trang3"] {
background-color: red;
}
</style>
</head>
<body>
<h1>MINH HỌA [ATTRIBUTE] SELECTOR </h1>
<p>Thầy Trần Vĩnh Xuyên minh họa attribute selector thông qua ví dụ </p>
<a href="trang1">liên kế 1</a><br>
<a href="trang2" target="_blank">liên kết 2</a><br>
<a href="trang3">liên kết 3</a>
</body>
</html>
Được dùng khi muốn xác định trạng thái đặc biệt của phần tử, ví dụ như chúng có thể được sử dụng để định dạng một phần tử khi người dùng rê chuột vào nó, hoặc muốn định dạng một phần tử khi nó focus,...
Tên_thẻ:ten_pseudo{
Thuộc_tính1: Giá_trị;
Thuộc_tính2: Giá_trị;
...
Thuộc_tínhn:Giá trị;
}
Trong đó:
Ví dụ:
<style>
a:hover{
color:red;
}
</style>
Áp dụng:
<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
color:red;
}
</style>
</head>
<body>
<h1>MINH HỌA PSEUDO CLASS SELECTOR </h1>
<p>Thầy Trần Vĩnh Xuyên minh họa pseudo clas selector thông qua ví dụ </p>
<a href="trang1">liên kế 1</a><br>
<a href="trang2" target="_blank">liên kết 2</a><br>
<a href="trang3">liên kết 3</a>
</body>
</html>
Trong quá trình thiết kế web chúng ta thường xuyên sử dụng một số pseudo class cơ bản như sau:
Dạng quan hệ mà các đối tượng có mối quan hệ liên quan nhau. Ví dụ như mối quan hệ: tổ tiên, cha con, cháu chắt,... Mối quan hệ được hiểu là thẻ này được lồng, lồng, lồng,... trong thẻ kia.
Thẻ_tổtiên thẻ_concháu{
Thuộc_tính1: Giá_trị;
Thuộc_tính2: Giá_trị;
...
Thuộc_tínhn:Giá trị;
}
Trong đó:
Ví dụ:
<style>
div p {
background-color: yellow;
}
</style>
Áp dụng:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>MINH HỌA DESCENDANT SELECTOR </h1>
<p>Thầy Trần Vĩnh Xuyên minh họa descendant selector thông qua ví dụ </p>
<div>
<h2>Tên tôi là Xuyên</h2>
<p>Tôi sống ở Sài Gòn.</p>
</div>
<p> Quê tôi ở Mỹ Tho.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ol li{
color:red;
}
<!--
sẽ lấy li là:
con,
cháu,
chắt
của ol
-->
</style>
</head>
<body>
<h1>MINH HỌA DESCENDANT SELECTOR </h1>
<p>Thầy Trần Vĩnh Xuyên minh họa descendant selector thông qua ví dụ </p>
<ol>
<li>phần tử li 1</li>
<li>
<ul>
<li>phần tử li 2 - 1</li>
<li>phần tử li 2 - 2</li>
</ul>
<li>phần tử li 3</li>
<li>phần tử li 4</li>
<li>phần tử li 5</li>
</ol>
</body>
</html>
| Ký hiệu | Ý nghĩa | Sử dụng |
|---|---|---|
| Thẻ.dinhdang | Chọn thẻ có class tên là dinhdang |
p.banner {
color: yellow;
}
|
| Thẻ_1, thẻ_2 | Chọn tất cả thẻ 1 và thẻ 2 |
h2, p {
color: yellow;
}
|
| Thẻ_1 Thẻ_2 | Chọn thẻ 2 nằm trong thẻ 1 (có thể là con hay cháu chắt) |
div p {
color: yellow;
}
|
| Thẻ_cha > thẻ_con | Chọn tất cả thẻ_con có cha là thẻ_cha |
div > p {
color: yellow;
}
|
| Thẻ_1 + thẻ_2 | Chọn 1 thẻ_2 nằm ngay sau thẻ_1 |
div + p {
color: yellow;
}
|
| Thẻ_1 ~ thẻ_2 | Chọn tất cả thẻ_2 mà nằm trước là thẻ_1, và thẻ_1, thẻ_2 có cùng cha. |
div ~ p {
color: yellow;
}
|
Khi chúng ta khai báo các selector sau đây thì các selector có ý nghĩa thế nào
Trích dẫn: (http://khonggiankythuat.com)
