{"id":614,"date":"2020-07-03T17:59:11","date_gmt":"2020-07-03T20:59:11","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=614"},"modified":"2022-12-09T08:34:34","modified_gmt":"2022-12-09T11:34:34","slug":"links-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/links-css\/","title":{"rendered":"Links CSS"},"content":{"rendered":"

Com CSS, os links podem ser estilizados de maneiras diferentes.<\/p>\n

\"\"<\/p>\n

Liga\u00e7\u00f5es de estilo<\/strong><\/p>\n

Os links podem ser decorados com qualquer propriedade CSS (por exemplo color, font-family, background, etc.).<\/p>\n

Exemplo<\/strong><\/p>\n

a {<\/code>
\ncolor: hotpink;<\/code>
\n}<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\na {\r\n  color: hotpink;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p><b><a href=\"default.asp\" target=\"_blank\">This is a link<\/a><\/b><\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Al\u00e9m disso, os links podem ter estilos diferentes, dependendo do estado em que est\u00e3o.<\/p>\n
Os quatro estados dos links s\u00e3o:<\/strong><\/p>\n
a:link<\/code> – um link normal e n\u00e3o visitado
\na:visited<\/code> – um link que o usu\u00e1rio visitou
\na:hover<\/code> – um link quando o usu\u00e1rio passa o mouse sobre ele
\na:active -<\/code> um link no momento em que \u00e9 clicado<\/p>\n
Exemplo<\/strong><\/p>\n
\/* unvisited link *\/<\/code>
\na:link {<\/code>
\ncolor: red;<\/code>
\n}<\/code><\/p>\n
\/* visited link *\/<\/code>
\na:visited {<\/code>
\ncolor: green;<\/code>
\n}<\/code><\/p>\n
\/* mouse over link *\/<\/code>
\na:hover {<\/code>
\ncolor: hotpink;<\/code>
\n}<\/code><\/p>\n
\/* selected link *\/<\/code>
\na:active {<\/code>
\ncolor: blue;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n\/* unvisited link *\/\r\na:link {\r\n  color: red;\r\n}\r\n\r\n\/* visited link *\/\r\na:visited {\r\n  color: green;\r\n}\r\n\r\n\/* mouse over link *\/\r\na:hover {\r\n  color: hotpink;\r\n}\r\n\r\n\/* selected link *\/\r\na:active {\r\n  color: blue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p><b><a href=\"default.asp\" target=\"_blank\">This is a link<\/a><\/b><\/p>\r\n<p><b>Note:<\/b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.<\/p>\r\n<p><b>Note:<\/b> a:active MUST come after a:hover in the CSS definition in order to be effective.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Background Color<\/strong>
\nThe background-color property can be used to specify a background color for links:<\/p>\n
Example<\/strong><\/p>\n
a:link {<\/code>
\nbackground-color: yellow;<\/code>
\n}<\/code><\/p>\n
a:visited {<\/code>
\nbackground-color: cyan;<\/code>
\n}<\/code><\/p>\n
a:hover {<\/code>
\nbackground-color: lightgreen;<\/code>
\n}<\/code><\/p>\n
a:active {<\/code>
\nbackground-color: hotpink;<\/code>
\n}<\/code><\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\na:link {\r\n  background-color: yellow;\r\n}\r\n\r\na:visited {\r\n  background-color: cyan;\r\n}\r\n\r\na:hover {\r\n  background-color: lightgreen;\r\n}\r\n\r\na:active {\r\n  background-color: hotpink;\r\n} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p><b><a href=\"default.asp\" target=\"_blank\">This is a link<\/a><\/b><\/p>\r\n<p><b>Note:<\/b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.<\/p>\r\n<p><b>Note:<\/b> a:active MUST come after a:hover in the CSS definition in order to be effective.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Link Buttons<\/strong><\/p>\n
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes\/buttons:<\/p>\n
Example<\/strong><\/p>\n
a:link, a:visited {<\/code>
\nbackground-color: #f44336;<\/code>
\ncolor: white;<\/code>
\npadding: 14px 25px;<\/code>
\ntext-align: center;<\/code>
\ntext-decoration: none;<\/code>
\ndisplay: inline-block;<\/code>
\n}<\/code><\/p>\n
a:hover, a:active {<\/code>
\nbackground-color: red;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\na:link, a:visited {\r\n  background-color: #f44336;\r\n  color: white;\r\n  padding: 14px 25px;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  display: inline-block;\r\n}\r\n\r\na:hover, a:active {\r\n  background-color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Link Button<\/h2>\r\n<p>A link styled as a button:<\/p>\r\n<a href=\"default.asp\" target=\"_blank\">This is a link<\/a>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Veja esse script com diferentes efeito no cursor<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<p>Mouse over the words to change the cursor.<\/p>\r\n<span style=\"cursor:auto\">auto<\/span><br>\r\n<span style=\"cursor:crosshair\">crosshair<\/span><br>\r\n<span style=\"cursor:default\">default<\/span><br>\r\n<span style=\"cursor:e-resize\">e-resize<\/span><br>\r\n<span style=\"cursor:help\">help<\/span><br>\r\n<span style=\"cursor:move\">move<\/span><br>\r\n<span style=\"cursor:n-resize\">n-resize<\/span><br>\r\n<span style=\"cursor:ne-resize\">ne-resize<\/span><br>\r\n<span style=\"cursor:nw-resize\">nw-resize<\/span><br>\r\n<span style=\"cursor:pointer\">pointer<\/span><br>\r\n<span style=\"cursor:progress\">progress<\/span><br>\r\n<span style=\"cursor:s-resize\">s-resize<\/span><br>\r\n<span style=\"cursor:se-resize\">se-resize<\/span><br>\r\n<span style=\"cursor:sw-resize\">sw-resize<\/span><br>\r\n<span style=\"cursor:text\">text<\/span><br>\r\n<span style=\"cursor:w-resize\">w-resize<\/span><br>\r\n<span style=\"cursor:wait\">wait<\/span><br>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n