CSS Link-uri

❮ precedent Capitolul următor ❯

Cu CSS, link-uri pot fi decorate în diferite moduri.

Link Text Link Text Link Buton Buton Link

Styling Link-uri

Link - uri pot fi stil cu orice proprietate CSS ( de exemplu , color , font-family , background , etc).

Exemplu

a {
color: hotpink;
}

Încearcă - l singur »

În plus, link - uri pot fi stil diferit , în funcție de ceea ce stare se află.

Cele patru state sunt link-uri:

a:link - o legătură nevizitat normală
a:visited a a:visited - un link către utilizator a vizitat
a:hover - un link atunci când mousuri utilizatorul trece peste ele
a:active - un link în momentul în care se face clic

Exemplu

/* 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;
}

Încearcă - l singur »

La stabilirea stil pentru mai multe state link-ul, există câteva reguli de ordine:

a:hover trebuie să vină după a:link - a:visited a:link și a:visited a a:visited
a:active trebuie să vină după a:hover

Textul de decorare

De text-decoration proprietate este utilizat în principal pentru a elimina sublinieri din link - uri:

Exemplu

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Încearcă - l singur »

Culoare de fundal

background-color de background-color proprietate poate fi utilizată pentru a specifica o culoare de fundal pentru link - uri:

Exemplu

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Încearcă - l singur »

Avansate - Butoane Link

Acest exemplu demonstrează un exemplu mai avansat în cazul în care vom combina mai multe proprietăți CSS pentru a afișa link-uri sub formă de casete / butoane:

Exemplu

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

Încearcă - l singur »