CSS Bağlantılar

❮ Önceki Sonraki bölüm ❯

CSS ile, bağlantılar farklı şekillerde tarz edilebilir.

Metin Bağlantı Metin Bağlantısı Bağlantı Düğmesi Bağlantı Düğmesi

Şekillendirme Linkler

Bağlantılar herhangi bir CSS özelliği (örn ile tarz edilebilir color , font-family , background , vs.).

Örnek

a {
color: hotpink;
}

Kendin dene "

Buna ek olarak, bağlantılar onlar ne devlet bağlı olarak farklı tarz olabilir.

Dört bağlantılar devletler şunlardır:

a:link - Normal, ziyaret edilmemiş bağlantı
a:visited - bir bağlantı kullanıcının ziyaret ettiği
a:hover - Bir bağlantının üzerine geldiğinde kullanıcı fareler
a:active - bir bağlantı an o tıklandığında

Örnek

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Kendin dene "

Birkaç bağlantı devletler için stil ayarlarken, bazı düzen kurallar vardır:

a:hover sonra gelmelidir a:link ve a:visited
a:active sonra gelmelidir a:hover

Metin Dekorasyon

text-decoration özellik çoğunlukla bağlantılardan alt çizgi kaldırmak için kullanılır:

Örnek

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Kendin dene "

Arka plan rengi

background-color özelliği bağlantılar için bir arka plan rengini belirtmek için kullanılabilir:

Örnek

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Kendin dene "

Gelişmiş - Bağlantı Düğmeler

Bu örnek biz kutuları / düğmeler gibi bağlantıları göstermek için birkaç CSS özelliklerini birleştiren daha gelişmiş bir örnek gösterir:

Örnek

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Kendin dene "