CSS Стиль для привязки тега не работает

-4

Я разместил некоторые ссылки на странице, добавив файл css в html один, но стиль не отображается.CSS Стиль для привязки тега не работает

HTML:

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Title</title> 
     <link rel="stylesheet" type="text/css" href="formatter.css"> 
    </head> 
    <body> 
     <h1>Welcome</h1> 
     <hr/> 
     <div class="anch" style="text-align: center"> 
      <a href="admin_login.jsp" style="" >Admin</a> 
      <a href="user_login.jsp">User</a> 
     </div> 
    </body> 
</html>

formatter.css:

body{ 
    font-family: Verdana, Arial, sans-serif; 
    color: #555; 
    background-color: silver; 
} 
h1{ 
    text-align: center; 
} 
.anch a:link, a:visited{ 
    text-decoration: none; 
    display: inline-block; 
    color: black; 
    background-color: white; 
} 
.anch a:hover, a:focus, a:active{ 
    text-decoration: none; 
    display: inline-block; 
    color: white; 
    background-color: black; 
}

Когда выше файл запускается, тело и h1 стили видны, но стили анкерные не отображаются. Они отображаются в форме по умолчанию (синий и подчеркнутый). Вот изображение того, что проявляется:

источник

2016-06-27 Turbo123

sudo классы с двоеточием: не точка. – Afsar

Это 'a: link', а не' a.link'. –

Используйте инспектор стиля devtools для отладки вашего CSS. Существует кнопка ': hov', которая открывает небольшую панель, где вы можете установить состояние элемента на': hover', например, чтобы помочь вам тестировать стили, подобные этому, используя псевдоэлементы. Вы заметите, что ваш стиль 'a.hover' не применяется; возможно, вы могли бы исходить из этого, чтобы выяснить проблему. –

-1

стиль отдавания для a. затем используйте двоеточие для зависания, активного и других.

.anch a{ 

    text-decoration: none; 
    display: inline-block; 
    color: black; 
    background-color: white; 

} 
.anch a:link, a:visited{ 
    text-decoration: none; 
    display: inline-block; 
    color: black; 
    background-color: white; 
} 
.anch a:hover, a:focus, a:active{ 
    text-decoration: none; 
    display: inline-block; 
    color: white; 
    background-color: black; 
}

источник

2016-06-27 06:20:02 Mani

Это сработало. В дополнение к изменению синтаксиса. Благодаря! – Turbo123

Добро пожаловать ... @ Turbo123 – Mani

Css псевдо-классы определяет двоеточием : не с .

a:link, a:visited{ 
text-decoration: none; 
display: inline-block; 
color: black; 
background-color: white; 
} 

a:hover, a:focus, a:active{ 
text-decoration: none; 
display: inline-block; 
color: white; 
background-color: black; 
}

для получения дополнительной информации, пожалуйста, прочитайте this

источник

2016-06-27 04:39:47 Afsar

Создать отдельный класс для тега привязки и вы можете использовать это, когда вам это понадобится.

<a href="somelink" class="archorCls">SomeThing</a>

в CSS

.archorCls{ 
    text-decoration: none; 
    display: inline-block; 
    color: white; 
    background-color: black; 
}

источник

2016-06-27 05:14:34 Parthasarathy

Вот код. Вы использовали точку с тегом в css, но: используется. Я также привел пример для стилизации якоря с классом css. :)

body{ 
 
    font-family: Verdana, Arial, sans-serif; 
 
    color: #555; 
 
    background-color: silver; 
 
} 
 
h1{ 
 
    text-align: center; 
 
} 
 
.anch a:link, a:visited{ 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: black; 
 
    background-color: white; 
 
} 
 
.anch a:hover, a:focus, a:active{ 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: black; 
 
} 
 
/* This is the css code for anchor styling */ 
 

 
.anchor{ text-decoration: none; 
 
    display: inline-block; 
 
    color: black; 
 
    background-color: white;} 
 
/* When mouse hover the anchor class */ 
 
.anchor:hover{ 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: black; 
 
}

<div class="anch" style="text-align: center"> 
 
<a href="admin_login.jsp" style="<!--You can use style here too -->" >Admin</a> 
 
<a href="user_login.jsp">User</a> 
 
</div> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
<b> You can style your anchor tags with css class too. Here is the example</b> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
</br> <!-- This br is for line space --> 
 
<center> 
 
<a href="admin_login.jsp" class="anchor">Admin</a> 
 
<a href="user_login.jsp" class="anchor">User</a> 
 
</center>

источник

2016-06-27 05:52:12

CSS Стиль для привязки тега не работает

ответ

Смежные вопросы