CSS الروابط

❮ السابق الفصل التالي ❯

مع CSS، وصلات يمكن أن تكون على غرار بطرق مختلفة.

رابط نصي رابط نصي رابط زر زر الرابط

خيارات التصميم

وصلات يمكن أن تكون على غرار مع أي ممتلكات CSS (على سبيل المثال color ، font-family ، background ، الخ).

مثال

a {
color: hotpink;
}

انها محاولة لنفسك »

وبالإضافة إلى ذلك، وصلات يمكن أن تكون على غرار مختلف اعتمادا على ما الدولة التي تتواجد فيها.

الروابط أربع ولايات هي:

a:link - ارتباط ولم يسجل الطبيعي
a:visited - وصلة زار المستخدم
a:hover - رابط عندما يصطاد الفئران المستخدم أكثر من ذلك
a:active - وصلة لحظة النقر فوقه

مثال

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

انها محاولة لنفسك »

عند تحديد أسلوب لعدة حالات الارتباط، هناك بعض القواعد من أجل:

a:hover يجب أن تأتي بعد a:link و a:visited
a:active يجب أن تأتي بعد a:hover

الديكور النص

و text-decoration يستخدم خاصية معظمها لإزالة تسطير من الروابط التالية:

مثال

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

انها محاولة لنفسك »

لون الخلفية

على background-color الملكية يمكن استخدامها لتحديد لون الخلفية للحصول على ارتباطات:

مثال

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

انها محاولة لنفسك »

المتقدمة - أزرار لينك

يوضح هذا المثال مثال أكثر تقدما حيث نحن الجمع بين العديد من الخصائص CSS لعرض ارتباطات مربعات / أزرار:

مثال

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

انها محاولة لنفسك »