Css continuando...
As propriedades mais comuns do css
O css3 possui dezenas de propriedades que podem ser alteradas, mas algumas são usadas com mais frequência e podem ser muito uteis para alterar o designer do seu html. vamos ver quais são:
- fundo - a propriedade background permite alterar a aparência do fundo do elemento html alterando as cores, definindo imagens de fundo e como essa imagem sera apresentada.
- textos - as propriedades text permitem definir a cor do texto, o alinhamento, se o texto vai ser sublinhado, se vai ser formado por letras maiúsculas ou minusculas e também a distancia que o texto vai começar da margem.
- fontes - as propriedades font permite alterar a família da fonte, definir negrito e itálico, alem do tamanho da fonte
- dimensões - o css permite definir a largura e altura e também as alturas e larguras máximas e minimas dos elementos.
- bordas - é possível definir o tamanho, o lado, o tipo e a cor das bordas.
- posicionamento - podem ser definidos posicionamentos fixo, estáticos, relativos ou absolutos. sendo que em caso de um elemento ocupar a mesma posição do outro a propriedade z-index define qual será exibido.
Background
background-color
A propriedade background color permite mudar a cor de fundo do elemento. pode ser usado um valor hexadecimal(#FFAA99), um valor RGB (rgb(128,0,255)) ou nome de cor (yellow).
p{
background-color : #99AAFF;
}
#id{
background-color : rgb(128,0,255);
}
.classe{
background-color : blue;
}
background-image
A propriedade background image permite definir uma imagem para ser colocada como fundo de um elemento. alem de definir a imagem é possível definir se a imagem vai se repetir através da propriedade background-repeat que pode assumir os valores repeat-x, repeat-y e no-repeat, e também a posição da imagem através da propriedade background-position que pode assumir os valores right,center e left para o eixo x e top,center e bottom para o eixo y. É possível tambem definir todas as propriedades usando a propriedade background com os valores de cor, imagem, repetição e posição.
div{
background-image : url('imagem.jpeg');
background-position: center top;
background-repeat : no-repeat;
}
#id{
background:#ffffff url('imgem.png') no-repeat right top;
}
Textos
color
A propriedade color permite mudar a cor do texto do elemento. É possível definir a cor com valores hexadecimal, com valores RGB ou com o nome de uma cor(em inglês).
body{
color : #0066AA;
}
Alinhamento
A propriedade text-align define o alinhamento horizontal do texto e pode ser definido com os valores left(esquerdo),right(direito),center(centralizado) e justify(justificado).
body{
text-align : center
}
decoração
A propriedade text-decoration define se o texto vai ser sublinhado(underline), se vai ser cortado ao meio(line-through)ou riscado por cima(overline), também pode não ter decoração(none).
body{
text-decoration: overline;
}
Transformação de texto
A propriedade text-transform muda as letras de maiúsculas para minusculas ou vice-versa, pode assumir os valores uppercase(todas para maiúsculas), lowercase(todas para minusculas) e capitalize(a primeira letra de cada palavra para maiúscula).
body{
text-transform: uppercase;
}
Distancia da margem
A propriedade text-indent define a distancia que o texto vai estar da margem, o valor pode ser positivo ou negativo.
p{
text-indent : 50px;
}
Fontes
Família da Fonte
A propriedade font-family define a fonte do texto do elemento, o valor dessa propriedade pode ser uma fonte especifica como arial ou courier, ou nome genérico como monospace, serif.
Pode-se definir no valor mais de uma fonte fazendo com que se o navegador não tiver suporte para uma ele passe para o próximo valor.
p{
font-family : "Times New Roman", Times, serif;
} Estilo de fonte
A propriedade font-style define o estilo, os valores podem ser italic, oblique ou normal
p{
font-style : italic;
}
Tamanho da fonte
A propriedade font-size define o tamanho da fonte, seus valores podem ser definidos em px(pixel),em ou um valor predefinido(xx-small,x-small,smaller,small,medium,large,larger,x-large,xx-large).
p{
font-size:2em;
}
Dimensões
As dimensões de um elemento são definidas pelas propriedades height(altura) e width(largura), os valores dessas propriedades podem ser em unidades de tamanho como px ou em, ou em porcentagem %, também é possível definir os valores mínimos(min-height,min-width) e valores máximos(max-height,max-width).
div{
hight : 10%;
width : 50%;
}
Bordas
div{
border : 5px solid red ;
}
p{
border-left-style : groove;
}
#id{
border-top-color : #FFFFFF;
}
.classe{
border-right-width : 3px;
}
Posicionamento
Um elemento pode ser posicionado usando as propriedades top, bottom, right e left mas para que o posicionamento funcione deve-se definir o valor da propriedade position, essa propriedade pode assumir os valores static que é o valor padrão do html e não será afetado por nenhuma alteração nas propriedades de posicionamento, o valor fixed define um valor de posição relativa a janela, o posicionamento relativo define um valor relativo a posição normal do elemento, o posicionamento absoluto é relativo ao primeiro elemento pai que tenha um valor de posição não estático.
div{
position : fixed ;
top : 150px;
}
#id{
position : absolute;
top : 30px;
left :50px;
}
.classe{
position : relative;
left : -50px;
}
Quando dois elementos ocupam a mesma posição é possível definir qual vai ser exibido usando a propriedade z-index quanto maior o valor mais a frente em uma pilha de elementos sobrepostos.
#id{
position : absolute;
top : 30px;
left :50px;
height : 200px;
width : 300px;
}
.classe{
position : absolute;
top : 20px;
left : 70px;
height : 200px;
width : 300px;
z-index : 1;
}
No exemplo acima o elemento que usar a classe "classe" vai ser exibido na frente do elemento que usar o id "id".
Conclusão
Nesse post nos vimos algumas propriedades importantes, o mais importante para fixar todas essas informações é praticar, crie seus próprios documentos html e aplique os estilos css, modificando seus valores e vendo os resultados, espero poder ter contribuído com algumas informações. Nos próximos posts vamos ver um pouco de javascript e mais pra frente vamos ver um pouco mais de css e css3. Até mais.
Nenhum comentário:
Postar um comentário