Alterar a cor dos links
Classe para alterar a aparência do botão
Zerar as margens
Alterar a cor do label e do input do formulário
Alterar atributos da caixa área de textos do formulário
Alterar atributos da tabela
Alterar atributos da linha da tabela
Alterando os atributos da célula
Menu horizontal
Layout CSS carregar igual em todos os navegadores
Tamanho de uma imagem
Posicionamento da imagem
a:link{
color:#ccc;
text-decoration:none;
}
a:visited{
color:#600;
}
a:hover{
color:#3b4758;
background-color:#fff;
}
a:link - link antes de ser visitado;
a:visited - link após ter sido visitado;
a:hover - link que ocorre quando passa o cursor do mouse em cima do link
Classe para alterar a aparência do botão
.botao { display: inline-block; background-color: #0068B4; color: #fff; text-decoration: none; padding: 10px 20px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 16px; border: 0px; box-shadow: 3px 3px 3px #999; border-radius: 4px; width:100px; text-align:center; }
.botao:hover { background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15)); cursor:pointer; }
*{
margin:0;
padding:0;
}
Alterar a cor do label e do input do formulário
label, input{
color:#000;
font-size:16px; /* Tamanho da fonte */
}
Alterar atributos da caixa área de textos do formulário
.mensagem {
color:#ebeb39;
}
table {
margin-top:20px; /* Distância em relação a parte superior */
margin-left:auto; /* Margem automática em relação a parte esquerda */
margin-right:auto; /* Margem automática em relação a parte direita */
border: 1px solid #f00; /* Espessura da borda; borda do tipo sólida; cor da borda */
}
Alterar propriedades da linha da tabela
tr {background-color:#0f0}
Alterando os atributos da célula
td { border:1px dashed #ff0; ; padding: 10px; color: #fff}
ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
}
ul li {
position: relative;
float:left;
width:130px;
height:20px;
border:1px solid #FFF;
background-color:#333;
color:#FFF;
}
li ul {
/*position: absolute;*/
display: none;
}
ul li a {
float:left;
position:relative;
width:130px;
height:20px;
border:1px solid #FFF;
background-color:#03C;
color:#FFF;
text-decoration:none;
font-family:arial;
border-radius: 4px;
}
ul li a:hover {
color: #333;
background-color:#b4aeae;
}
/* Hack para IE MAC - Para não dar problema na exibição */
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* FIM */
li:hover ul { display: block;}
h3 {
font-family:Courier New;
font-size:16px;
color:#ffff00;
}
Layout CSS carregar igual em todos os navegadores
Porque em um navegador meu site carrega certo e em outro não?
Essa é a pergunta de todo Web designer iniciante.
Para os que não sabem, os navegadores tem uma folha de estilo interna, onde são definidas todos os estilos iniciais de um site, é nela que está¡ definido o tamanho inicial dos cabeçalhos (H1 … H6), que o texto sem formatação é preto e em Times New Roman e por aà vai …
Por isso há a possibilidade do seu site ser carregado de forma diferente em cada navegador, chegando em alguns casos, a ficar todo quebrado.
Então como resolver isso?
Antes de iniciar qualquer codificação CSS é necessário fazer o Reset Global de todos os estilos, resetar toda a estilização padrão dos navegadores.
/* ############ Reset Global ################ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr, input{
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
list-style: none;
border-collapse: collapse;
border-spacing: 0;
text-decoration: none;
}
img a, a img{border: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {
content: ""; content: none;
}
html{font-size: 16px;}
body {
font: 83% Verdana, Geneva, sans-serif;
line-height: 150%;
color: #666;
}
/* ############ LINKS ################ */
a {color: #000;}
a:hover {color: #666;}
a:visited {color: #999;}
/* ############ CABEÇALHOS ############ */
h1, h2, h3, h4, h5, h6{
padding: 5px 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
}
h1 {font-size: 180%;}
h2 {font-size: 160%;}
h3 {font-size: 140%;}
h4 {font-size: 130%;}
h5 {font-size: 120%;}
h6 {font-size: 120%;}
p {padding: 5px 0 10px 0;}
/* ############ CLASSES COMUNS ############ */
.clear{clear: both;}
.imgLeft{
float: left;
padding: 0 6px 3px 0;
}
.imgRight{
float: right;
padding: 0 0 3px 6px;
}
Tamanho de uma imagem
#imagem {
background-image:url(csharp.jpg);
width:225px;
height:225px;
background-repeat:no-repeat;
background-size:100px 100px; // Especifica o tamanho da imagem em pixels, na sequência: largura e altura
}
Posicionamento da imagem
background-position: 100px 100px; // Especifica a posição da imagem em pixels, na sequência: largura e altura
ou
background-position: top center; // Especifica a posição da imagem na parte superior, centralizada
Observação: Você pode utilizar: bottom, left, right, ou mesmo no lugar de px (pixels), utilizar % (percentual).
