CSS Linka izveide

1. Linka iekrāsošana:

Kods:

a {
              color: blue;
          }

2. Ja veidojam linku kas arī pēctam attēlosies kā jau apmeklēts tad kods
jāveido šādi (Neapmeklēts links zils, jau apmeklēts sarkans):

Kods:

a:link {
              color: blue;
          }
 a:visited {
        color: red;
        }

3. Linka krāsas norādīšana ar skaitļiem priekšā liekot simbolu - #. Tad jāizskatās aptuveni šādi:
P.S. nevienmēr krāsas kodam jābūt 6 simboliem, bet vairākums gadījumu tā ir, bet piemēram :
#000000 un #000 ir melna krāsa , bet abos gadījumos tā nemainīsies.

Kods:

a:link {
              color: #6699CC;
          }

Tas pats arī ar jau apmeklēta linka kodu:

Kods:

a:visited {
              color: #660099;
          }

4. Ja vēlamies lai Linkiem būtu arī backgrounda krāsa, tad kodam jāpievieno šis:
P.S. Kad tiks uzbraukts ar peli background krāsa pazūd.

Kods:

  a:active {
        background-color: #FFFF00;
        }

Bet ja vēlamiesto ka ja tiek uzbraukts ar peli un background paliktu tad papildus jāievada šis:

Kods:

a:hover {
        background-color: #FFFF00;
        }

5. Linka hover stila veidošana.
P.S. Šo kodu rediģējam tā kā gribal lai izskatītos kad tiek uzbraukts ar peli.

Kods:

a:hover {
              letter-spacing: 10px;
              font-weight:bold;
              color:red;
          }

6. linka pasvītrojuma novākšana:
Šo kodu ievietojam tajā vietā kur tiek stilizēts linka stils (gan vēl neapm. links, gan jau apm. link un tā tālāk)

Kods:

text-decoration:none;

7. Kopumā Linka stila kodam vaidzētu izskatīties šādi ;

Kods:

a:link {
        color: blue;
        text-decoration:none;
        }

        a:visited {
        color: purple;
        text-decoration:none;
        }

        a:active {
        background-color: yellow;
        text-decoration:none;
        }

        a:hover {
        color:red;
        text-decoration:none;
        }

PS. Un ja kādam vajag lai text būtu pasvītrot tad liekam text-decoration:none; vietā šo:

Kods:

text-decoration:underline; 

Ne tikai underline, var lietot arī bold vai italic

Kods:

text-decoration:bold; 
 text-decoration:italic;

Viens no vieglākajiem vieglajiem veidiem lietojot CSS ir pievienot efektus teksta linkiem. Šis ir kods kas ir vajadzīgs :

Kods:

<style type="text/css"><!--
 a:link {COLOR:blue; TEXT-DECORATION:none}
 a:active {COLOR:red; TEXT-DECORATION:none}
 a:visited {COLOR:green; TEXT-DECORATION:underline}
 a:hover {COLOR:red; TEXT-DECORATION:underline overline}
 --></style>

Kā tas strādā?

a:link ir neapmeklētas saites.
a:active irlinks, pirms nospiešanas.
a:visited ir skatītos linkus
a:hover nozīmē linkus, uz kuriem tu esi uzgājis ar savu kursoru.

Bez krāsu maiņas, un teksta dekorācijas, tu vari tos 'boldot' [BOLD] {FONT-WEIGHT:bold}, [italic] {FONT-STYLE:italic} , [Underline]{FONT-STYLE:underline} vai iedot tiem rāmi {BORDER:thin solid green} vai bakgranda krāsu {BACKGROUND:gray}.