Cách thức định dạng cho một cái liên kết (Link) - 32

Cách thức định dạng cho một cái liên kết (Link) – 32

1) Các trường hợp xảy ra đối với liên kết

– Thông thường thì một cái liên kết sẽ có thể gặp phải những trường hợp như sau:

:link: Trường hợp này xảy ra khi URL của liên kết chưa từng được người dùng viếng thăm.
:visited: Trường hợp này xảy ra khi URL của liên kết đã từng được người dùng viếng thăm.
:hover: Trường hợp này xảy ra khi cái liên kết đang bị người dùng dí con trỏ vào.
:active: Trường hợp này xảy ra khi cái liên kết đang bị người dùng nhấp vào.

2) Cách định dạng cho liên kết dựa theo trường hợp

– Để định dạng cho một cái liên kết dựa theo trường hợp xảy ra đối với nó thì khi xác định bộ chọn của cái liên kết, chúng ta cần phải ghép tên của trường hợp nằm ở ngay sát phía sau liên kết

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        a.hello:hover{
            color:red;
        }
    </style>
</head>
<body>
    <a href=".." class="hello">WEB CƠ BẢN</a>
</body>
</html>

– Lưu ý: Nếu một cái liên kết có nhiều bộ định dạng (cho các trường hợp khác nhau) thì các bạn nên sắp xếp các bộ định dạng đó theo trình tự (1) :link (2) :visited (3) :hover (4) :active

Ví dụ:

– Thiết lập “màu chữ” cho cái liên kết có class là hello.

Nó sẽ có màu xanh dương (khi URL của nó chưa từng được người dùng viếng thăm)
Nó sẽ có màu đỏ (khi URL của nó đã từng được người dùng viếng thăm)
Nó sẽ có màu xanh lá (khi người dùng dí con trỏ vào nó)
Nó sẽ có màu tím (khi người dùng nhấp vào nó)

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style>
        a.hello:link{
            color:Blue;
        }
        a.hello:visited{
            color:Red;
        }
        a.hello:hover{
            color:SpringGreen;
        }
        a.hello:active{
            color:Violet;
        }
    </style>
</head>
<body>
    <a href="kdb32kbdk434" class="hello">WEB CƠ BẢN</a>
</body>
</html>

3) Cách tạo một cái nút liên kết

– Nếu xét về bản chất thì nút liên kết (link button) chỉ là một cái liên kết được định dạng giống với cái nút, nhằm giúp cho cái liên kết trở nên đẹp hơn, đa dạng hơn, . . . .

– Ví dụ: Bên dưới chính là ba cái nút liên kết.

– Để tạo được một cái “nút liên kết” thì khi định dạng cho phần tử <a>, chúng ta cần phải sử dụng một số thuộc tính như: display, border, padding, color, . . . . kèm theo việc định dạng cho cái liên kết dựa theo từng trường hợp xảy ra đối với nó.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        a{       
            display:inline-block;
            border:1px solid #73AD21;
            background-color:#73AD21;
            padding:10px 12px;
            box-shadow:2px 2px 5px #6c6969;
            text-decoration:none;
            border-radius:3px;
            color:white;
        }
        a:hover{
            border:1px solid #90d331;
            background-color:#90d331;
        }
        a:active{
            border:1px solid #669f15;
            background-color:#669f15;
        }
    </style>
</head>
<body>
    <a href="..">NÚT LIÊN KẾT</a>
</body>
</html>