Како обликовати везе у ЦСС-у

Стилинг Линкс

Линкови могу бити стилизован са било којим ЦСС имовине, као што су color, font-family, font-size, и padding. Ево једноставног примера:

a { color: hotpink; }

Поред тога, везе се могу различито стилизовати у зависности од тога у ком су стању.

Везе такође имају 4 стања, а многи програмери различито стилизују сваку државу. Четири државе су:

  • a:link: непосећена, некликана веза
  • a:visited: посећена, кликнута веза
  • a:hover: веза када је миш корисника изнад ње
  • a:active: веза када се кликне

Имовина је одговоран за стварање УРЛ адресе и може се мењати помоћу неколико ЦСС стилинг својства, иако има неколико подразумевано:

  1. Подвући
  2. Плава боја

Можете променити ово додавањем мењања colorи text-decorationсвојства.

 color: black; text-decoration: none;

Везу такође можете стилизовати на основу интеракције помоћу ових својстава, познатих и као стања везе:

  • а: линк - нормална, непосећена веза
  • а: посетила - веза коју је корисник посетио
  • а: ховер - веза када корисник пређе мишем преко ње
  • а: ацтиве - веза у тренутку када се кликне на њу

Ево неколико примера ЦСС-а који користе 4 стања:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

Имајте на уму да постоје нека правила за редослед када подешавате стил за стања веза.

  • a:hoverМОРА доћи после a:linkиa:visited

a:active МОРА доћи после a:hover

а: линк - нормална, непосећена веза а: посећен - веза коју је корисник посетио а: ховер - веза када корисник пређе мишем преко ње а: активна - веза у тренутку када се на њу кликне

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

Више о стилу у ЦСС-у:

  • Како стилизовати ХТМЛ ознаку директно у ЦСС
  • Како стилизовати листе помоћу ЦСС-а
  • Како стилизовати тастере са ЦСС-ом