 |
| HTML5 Styling |
O CSS (Cascading Style Sheet) ou Folha de Estilo em Cascata é uma linguagem de estilo. As formatações de um documento HTML até pode ser feita dentro do HTML (exbutido), mas apenas em fase de implementação para teste, após devemos separar em uma folha de estilo. No HTML5 não existem atributos de estilo, ficando encarregado do estilo o CSS. É necessário ter conhecimento sobre HTML para entender o CSS no HTML, caso ainda não tenha veja o primeiro post sobre HTML neste blog.
3.1 Formas de utilização:
Externo: Podemos utilizar o CSS em arquivo externo separado do documento HTML e ligado por meio de Link no cabeçalho da página. Este é o ideal, pois é fácil incluir a formatação há várias páginas HTML e quando houver necessidade de alterar o estilo de um site de 50 páginas, bastará apenas editar a folha de estilo das mesmas ao invés de editar página por página, elemento por elemento como nas outras formas de estilos exbutido e inline.
Exemplo de arquivo CSS externo abaixo:
Exbutido: Este é diferente, pois e construído dentro do cabeçalho (head) do documento HTML a que pertence e seu estilo funciona apenas na página em que foi escrito. Utilizar este modo apenas em fase de projeto para teste e depois de concluído criar uma página de estilo (externo) copiar e colar o estilo já pronto e linkar ás páginas HTML de seu desejo.
Inline: Esse é descrito diretamente dentro do elemento html. Sua utilização não é indicada, pois a alteração do mesmo é mais trabalhosa em um site de muitas páginas.
3.2 Tipos de seletores:
No CSS temos algumas formas de selecionar
os elementos da página HTML para criar estilo para os mesmo.
Elemento HTML: No HTML temos as a tag's (elementos) podemos
criar regras para os seletores elementos adicionados diretamente as tag caso
tenha duvida veja o primeiro post sobre HTML
ID: Os seletores ID's são mencionados no CSS com o sinal: #
este no HTML são mencionados nos elementos como um atributo id=”algumacoisa”.
classe: São as class estas são criadas no css com um ponto
na frente .titulo1 {seu estilo...}, suas especificações são adicionadas
somente aos elementos HTML em que escrevemos o atributo
class=".titulo1".
pseudo-classe: Com este você pode adicionar efeitos a um
seletor do CSS, como a:hover onde hover mostra o estilo quando o elemento a é
apontado.
Descendente: São seletores com elementos combinados.
3.3 Propriedades de cores e fundo:
3.3.1 Cor do primeiro plano:
color: Com a propriedade color você define as cores do texto
que esta no elemento
mencionado como:
color: #008800;
3.3.2 Cor do segundo plano:
background-color: Com esta propriedade você define a cor do
plano de fundo.
background-color: #005500;
3.3.3 Imagem de fundo:
background-image: Nesta propriedade definiremos a imagem de
fundo do elemento.
background-repeat: Neste elemento definiremos se e como a
imagem repetira no fundo.
background-attachment: Neste definiremos e a imagem ira
rolar com a página ou será fixa.
width: Definimos com este a largura do elemento.
height: Definimos com este a altura do elemento.
position: Utilizado para mudar o esquema de posicionamento do elemento na página seus valores podem ser: static, relative, absolute ou fixed.
position: static;
float: Esse você pode usar para posicionar o elemento a esquerda ou a direita de outro elemento seus valores podem ser: left (Esquerda), right (Direita) ou none (Elemento não flutua).
float: left;
clear: Esse é usado para controlar o posicionamento feito com a propriedade float, seus valores podem ser: none (nehum), left (limpa a flutuação a esquerda), right (limpa a flutuação a direita) ou both (posiciona o elemento flutuante abaixo da borda de qualquer outro elemento flutuante).
clear: both;
Exemplo de HTML5 com CSS externo utilizando as propriedade mencionadas acima:
No navegador fica desta forma:
border-width: Define a largura de todas as bordas de um elemento.
border-top-width: Define a largura da borda superior do elemento.
border-right-width: Define a largura da borda direita do elemento.
border-bottomwidth: Define a largura da borda inferior do elemento.
border-left-width: Define a largura da borda esquerda do elemento.
border-color: Define a cor de todas as bordas de um elemento.
border-top-color: Define a cor da borda superior de um elemento.
border-right-color: Define a cor da borda diereita de um elemento.
border-bottom-color: Define a cor da borda infeiror de um elemento.
border-left-color: Define a cor da borda esquerda de um elemento.
O estilo da borda pode ser definido pelos valores none, hidden,dotted, dashed, solid, double, groove, ridge, inset e outset.
border-style: Define o estilo de todas as bordas do elemento.
border-top-style: Define o estilo da borda superior do elemento.
border-right-style: Define o estilo da borda direita do elemento.
border-bottom-style: Define o estilo da borda inferior do elemento.
border-left-style: Define o estilo da borda esquerda do elemento.
Com as propriedades de margens você define a distância da parte externa do elemento seletor sobre os objetos e/ou elementos a sua volta.
margin: Esta propriedade define todas as margens do elemento mencionado no seletor
margin-top: Esta propriedade define a margem superior do elemento.
margin-right: Esta propriedade define a margem direita do elemento.
margin-bottom: Esta propriedade define a margem inferior do elemento.
margin-left: Esta propriedade define a margem esquerda do elemento.
padding: Esta propriedade de espaçamento define o espaçamento interno de todos os lados.
padding-top: Define o espaçamento interno da parte superior.
padding-right: Define o espaçamento interno do lado direito.
padding-bottom: Define o espaçamento interno da parte inferior.
padding-left: Define o espaçamento interno do lado esquerdo.
font-family: Esta propriedade define as fontes ou famílias de fontes que podem ser usadas no site, você pode mencionar mais de uma assim quando não houver uma fonte disponível o navegador utilizará a outra mencionada.
font-style: Esta propriedade define o estilo da fonte utilizada, seus valores podem ser normal, italic ou oblique.
font-variant: Define como a fonte deve aparecer com os valores normal ou small-caps(Fonte com efeito de pequena caixa-alta)
font-weight: Define um efeito como negrito utilizando os valores normal, bold, bolder, lighter ou valores como 100, 200, 300 entre outros.
font-size: Define o tamanho da fonte você pode usar nos valores porcentagem, tamanho(não permite valores negativos), medium entre outros.
3.4 Propriedades de formatação visual:
3.4.1 Tamanho:
height: Definimos com este a altura do elemento.
3.4.2 Posicionamento:
position: static;
float: Esse você pode usar para posicionar o elemento a esquerda ou a direita de outro elemento seus valores podem ser: left (Esquerda), right (Direita) ou none (Elemento não flutua).
float: left;
clear: Esse é usado para controlar o posicionamento feito com a propriedade float, seus valores podem ser: none (nehum), left (limpa a flutuação a esquerda), right (limpa a flutuação a direita) ou both (posiciona o elemento flutuante abaixo da borda de qualquer outro elemento flutuante).
clear: both;
Exemplo de HTML5 com CSS externo utilizando as propriedade mencionadas acima:
No navegador fica desta forma:
3.5 Propriedades de borda:
3.5.1 Largura da borda:
A largura da borda pode ser definida com os seguintes valores thin, medium, thick ou tamanho.border-width: Define a largura de todas as bordas de um elemento.
border-top-width: Define a largura da borda superior do elemento.
border-right-width: Define a largura da borda direita do elemento.
border-bottomwidth: Define a largura da borda inferior do elemento.
border-left-width: Define a largura da borda esquerda do elemento.
3.5.2 Cor da borda:
border-color: Define a cor de todas as bordas de um elemento.
border-top-color: Define a cor da borda superior de um elemento.
border-right-color: Define a cor da borda diereita de um elemento.
border-bottom-color: Define a cor da borda infeiror de um elemento.
border-left-color: Define a cor da borda esquerda de um elemento.
3.5.3 Estilo da borda:
O estilo da borda pode ser definido pelos valores none, hidden,dotted, dashed, solid, double, groove, ridge, inset e outset.
border-style: Define o estilo de todas as bordas do elemento.
border-top-style: Define o estilo da borda superior do elemento.
border-right-style: Define o estilo da borda direita do elemento.
border-bottom-style: Define o estilo da borda inferior do elemento.
border-left-style: Define o estilo da borda esquerda do elemento.
3.6 Propriedades de margens:
3.6.1 Tamanho da margem:
Com as propriedades de margens você define a distância da parte externa do elemento seletor sobre os objetos e/ou elementos a sua volta.
margin: Esta propriedade define todas as margens do elemento mencionado no seletor
margin-top: Esta propriedade define a margem superior do elemento.
margin-right: Esta propriedade define a margem direita do elemento.
margin-bottom: Esta propriedade define a margem inferior do elemento.
margin-left: Esta propriedade define a margem esquerda do elemento.
3.7 Propriedades de espaçamento:
3.7.1 Espaçamento:
Com as propriedades padding você define o espaçamento interno entre elemento mencionado no seletor e seu conteúdo.padding: Esta propriedade de espaçamento define o espaçamento interno de todos os lados.
padding-top: Define o espaçamento interno da parte superior.
padding-right: Define o espaçamento interno do lado direito.
padding-bottom: Define o espaçamento interno da parte inferior.
padding-left: Define o espaçamento interno do lado esquerdo.
3.8 Propriedades de fontes tipográficas:
3.8.1 Família de fontes:
font-family: Esta propriedade define as fontes ou famílias de fontes que podem ser usadas no site, você pode mencionar mais de uma assim quando não houver uma fonte disponível o navegador utilizará a outra mencionada.
3.8.2 Estilo da fonte:
font-style: Esta propriedade define o estilo da fonte utilizada, seus valores podem ser normal, italic ou oblique.
3.8.3 Variante da fonte:
font-variant: Define como a fonte deve aparecer com os valores normal ou small-caps(Fonte com efeito de pequena caixa-alta)
3.8.4 Peso da fonte:
font-weight: Define um efeito como negrito utilizando os valores normal, bold, bolder, lighter ou valores como 100, 200, 300 entre outros.
3.8.5 Tamanho da fonte:
font-size: Define o tamanho da fonte você pode usar nos valores porcentagem, tamanho(não permite valores negativos), medium entre outros.
3.9 Propriedades de texto:
3.9.1 Recuo primeira linha:
text-indent: Define o tamanho do recuo na primeira linha de texto, pode ser usado nos valores tamanho ou porcentagem.
3.9.2 Alinhamento:
text-align: Define o alinhamento do texto com os valores left, right, center e justify.
3.9.3 Efeitos decorativos:
text-decoration: define quais efeitos decorativos serão aplicados no texto seus valores são none, underline, overline, line-through e blink.
3.9.4 Maiúsculas/minúsculas:
text-transform: define se o texto será em maiúsculas, minúsculas, primeira letra de cada palavra em maiúscula ou nenhum com os valores uppercase, lowercase, capitalize ou none.
3.9.5 Entrelinhas:
line-height: define quais as distâncias entre as linhas de um texto.
3.10 Propriedades de listas:
3.10.1 Estilo de marcadores:
list-style-type: define quais estilos visuais serão aplicado aos marcadores de uma lista os valores desta propriedade são disc, circle, square entre outros.
list-style-image: aplica imagens aos elementos de uma lista.
Exemplo de HTML5 com CSS externo utilizando as propriedade mencionadas acima:
No navegador fica desta forma:
Podemos notar ao observar as imagens acima que o elemento div (arquivo HTML) que não tinha nenhuma class ou outro tipo de relação com a folha de estilo especificada em si, recebeu a formatação do seletor de elemento div mencionado na folha de estilo CSS, ja os que estavam com uma class especificada receberam o estilo mencionado na class do arquivo CSS, da mesma forma acontece com os textos que receberam o estilo mencionado no seletor * e os que receberam os estilos mencionados nas class as outras propriedade de margin e padding são responsaveis pelos espaçamentos que vemos acima na imagem do navegador.
Você pode ter mais informações lendo o guia CSS daW3C
