Alquimista
Coordenador Como criar botões Basicos em HTML
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Uma breve introdução ao CSS:
CSS (cascading style sheet) é usado para adicionar estilos aos seus websites onde torna muito mais fácil a sua modificação de estilo completo mudando apenas um estilo no bloco de css.
Como adicionar estilos a sua página:
Para adicionar estilos a sua página há varios modos, mas agora só irei mostrar um porque o tutorial não se trata disso.
Crie a seguinte página html:
Obs:
No lugar de href="botoes.css" coloque o local do seu arquivo .css
Agora vamos adicionar um pouco de marcação ao nosso html:
Essas "div's" são como marcadores para um pedaço específico da sua página.
O id="menu" é o nome próprio da nossa div.
Como assim nome próprio?
Quando se tem um nome próprio você é o unico a telo, e ninguém mais no mundo pode usalo.
E isso torna a nosso div unica, ou seja não vai esistir mais nehuma div com o mesmo nome.
ID != CLASS
CLASS - muitas
ID - unicoPronto agora vamos ao CSS:
Crie um novo documento de texto e coloque o seguinte conteúdo dentro dele:
Vamos entender isso agora:
#menu a:link - Todo link que estiver dentro da div menu tera os seguintes estilos.
text-decoration: none - Com esse comando conseguimos retirar aquele sublinhado que sempre vem com o link.
margin-left - Iso cria uma margem a direita do link para separalos um pouco.
height/width - Dfine a autura e largura do documento.
background-color - Dfine a cor de fundo do objeto.
color - Define a cor do objeto.
border - Adciona uma borda ao objeto no caso : 1px de largura / solida / cor #888.
Isso já é bom mais não o bastante.
Agora o resto do css:
Pronto,agora temos um botão.
Uma breve introdução ao CSS:
CSS (cascading style sheet) é usado para adicionar estilos aos seus websites onde torna muito mais fácil a sua modificação de estilo completo mudando apenas um estilo no bloco de css.
Como adicionar estilos a sua página:
Para adicionar estilos a sua página há varios modos, mas agora só irei mostrar um porque o tutorial não se trata disso.
Crie a seguinte página html:
- Código:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="botoes.css" />
<title>Botões em HTML/CSS</title>
</head>
<body>
</body>
</html>
No lugar de href="botoes.css" coloque o local do seu arquivo .css
Agora vamos adicionar um pouco de marcação ao nosso html:
- Código:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="botoes.css" />
<title>Botões em HTML/CSS</title>
</head>
<body>
<div id="menu">
<a href="#">Home</a><a href="#">Downloads</a><a href="#">Vídeos</a><a href="#">Fale conosco</a>
</div></body>
</html>
O id="menu" é o nome próprio da nossa div.
Como assim nome próprio?
Quando se tem um nome próprio você é o unico a telo, e ninguém mais no mundo pode usalo.
E isso torna a nosso div unica, ou seja não vai esistir mais nehuma div com o mesmo nome.
ID != CLASS
CLASS - muitas
ID - unico
Crie um novo documento de texto e coloque o seguinte conteúdo dentro dele:
- Código:
#menu a:link {
text-decoration: none;
margin-right: 2px;
height: 31px;
width: 41px;
background-color: #333;
color: #CCC;
border: 1px solid #888;
}
#menu a:link - Todo link que estiver dentro da div menu tera os seguintes estilos.
text-decoration: none - Com esse comando conseguimos retirar aquele sublinhado que sempre vem com o link.
margin-left - Iso cria uma margem a direita do link para separalos um pouco.
height/width - Dfine a autura e largura do documento.
background-color - Dfine a cor de fundo do objeto.
color - Define a cor do objeto.
border - Adciona uma borda ao objeto no caso : 1px de largura / solida / cor #888.
Isso já é bom mais não o bastante.
Agora o resto do css:
- Código:
#menu a:link {
text-decoration: none;
margin-right: 2px;
height: 31px;
width: 41px;
background-color: #333;
color: #CCC;
border: 1px solid #888;
}
#menu a:hover {
text-decoration: underline;
margin-right: 2px;
height: 31px;
width: 41px;
background-color: #CCC;
color: #333;
border: 1px solid #888;
}
#menu a:active {
text-decoration: none;
margin-right: 2px;
height: 31px;
width: 41px;
background-color: #888;
color: #CCC;
border: 1px solid #333;
}
#menu a:visited {
text-decoration: underline;
margin-right: 2px;
height: 31px;
width: 41px;
background-color: #333;
color: #CCC;
border: 1px solid #000;
}