O HTML define quais os objetos que serão exibidos na página.
A CSS define como esses objetos serão exibidos, melhor dizendo, seu estilo como
cores, tamanhos, formas, etc.
Você sabe que existem tags html para negrito, sublinhado, etc. mas na css podemos agrupar
definições ou mesmo misturar ( a última definição prevalece), ter estilos mais ricos e versáteis
em relação a sua utilização. Outra vantagem é que separa o objeto a ser exibido de sua
formatação de exibição simplificando a leitura da tag html e do estilo a ela aplicado.
Portanto hoje em dia no html5 tudo que é estilo esta sendo transferido para a CSS. Contudo,
lógicamente, para efeito de compatibilidades com versões antigas, algumas tags ainda
funcionam mas claramente deixarão de funcionar em versões futuras do html.
Note que ao inserir uma tag input, por exemplo, no html temos a definição, pelo próprio
browser de como a tag input deve ser exibida, contudo, muitas vezes queremos personalizar
o formato, destacar, deslocar o elemento na página...é para isso que serve a css.
Podemos dizer que com a CSS as aplicações web ganharam mais recursos de exibição que
uma aplicação desktop.
1-Como aplicar a CSS
A CSS pode ser aplicada de três formas:
1-Externas - Neste caso os estilos da página estão em um documento css externo a página
html. É a melhor maneira quando utilizamos muitos estilos especialmente quando o 'código' é
relativamente extenso e a visualização da página fica mais simples e ordenada desta maneira,
separando o html do estilo.
2-Incorporadas - Neste caso o estilo é definido dentro da tag head do documento html.
Nota : O browser moderno admite que se coloque os estilos em qualquer lugar da página mas fica
muito deselegante misturar estilos no meio de html, javascripts...bagunça e muito especialmente
porque você precisaria procurar o estilo dentro de todo o código da página para alterá-lo.
Acostumamos usar este modelo para pequenos ou particulares conjuntos de estilos válidos
apenas dentro da página corrente.
Exemplo (dentro da tag head da página html ):
<style>
body {
font-family: Arial;
}
</style>
3-Local - Neste caso o estilo é definido pelo parâmetro style dento da
propria tag html. É a melhor maneira quando utilizamos um estilo único ou simples
porque evita que precisamos abrir a página de estilo para ver o que esta sendo feito.
Exemplo:
<nav style="background-color:aqua">
2-Como atua a CSS
Definimos onde o estilo deve ser aplicado através de seletores.
Os seletores selecionam, definem onde o estilo deve ser aplicado.
A css pode atuar nos elementos da página através de
3 níveis de seletores,
do mais restrito ao mais amplo
no que se refere ao número de elementos da página
selecionados.
Além desses 3 estilos básicos de seletores ainda podemos associar/combinar esses seletores e
criarmos seletores mais específicos como os seletores com parentes, por exemplo.
Seletor tipo 1 - Pela tag - Mais amplo.
Neste caso o estilo será aplicado a todas as tags do mesmo tipo no documento.
Formato : Selector{}
Onde: Seletor pode ser qualquer tag html (ex: p, div, input, etc.)
Exemplo 1 :
p{
color: red;
}
Neste caso todos os parágrafos <p>
do documento terão na fonte da letra a cor vermelha.
Importante:
Com este tipo de estilo todas as tags do tipo escolhido no documento são afetadas
indiscriminadamente
.
Exemplo 2 :
<style>
div {
font-family: Arial;
}
</style>
Na página as divs utilizarão a fonte de letra Arial.
Seletor tipo 2 - Aplicando estilo pelo parametro Class - Médio.
Neste caso
o estilo será aplicado aos elementos que usarem o estilo como parâmetro na sua tag.
O estilo será aplicado através do parâmetro class da tag : class='estilox' e poderemos
selecionar quais tags terão e quais não terão o estilo.
Formato : .Selector{}
Importante : O ponto indica que a css se aplica ao parametros class de uma tag.
Exemplo da definição do estilo:
.classeVermelha{
color: red;
}
Exemplo de utilização :
<p class="classeVermelha"> Este texto terá a fonte das letras com a cor vermelha></p>
Importante :
Note que o ponto existe na definição do estilo (.classeVermelha) na css mas não na
aplicação desse estilo no elemento a ser formatado (class="classeVermelha")
.
Comprovação do funcionamento :
Este texto terá a fonte das letras com a cor vermelha
Note que apenas o elemento que tiver o estilo será é formatado por ele. O que não tiver não será.
Neste caso todos os parágrafos do documento que usarem o estilo 'classeVermelha' terão na fonte da
letra a cor vermelha. Com este tipo de estilo podemos selecionar as tags do documento que serão afetadas.
Note que o estilo que deverá ser utilizado em uma classe sempre tem um ponto antes do seu nome.
O Ponto determina que é um estilo para ser aplicado em uma classe.
Exemplo:
.classea{
font-size:22px;
}
Aplicando a classe :
<p class="classea">Aplicando a tag acima o parágrafo fica assim :
Resultado :
Aplicando a tag acima o parágrafo fica deste jeito.
Seletor tipo 3 - Pela id - O mais seletivo - Em uma única tag.
Neste caso o estilo será aplicado num único elemento da página identificado pelo sua id.
Importante: Como o id deve ser único em um documento html
esta formatação será aplicado apenas a um elemento do documento.
Formato : #Selector{}
Exemplo :
#idPink{
color: pink;
}
Exemplo de uso 1 :
<p id="idPink"> Este texto terá a fonte das letras com a cor rosa></p>
Comprovação do funcionamento :
Este texto terá a fonte das letras com a cor rosa
Note que
o estilo que deverá ser utilizado em um único elemento pelo seu id tem um #
( jogo da velha ) antes do seu nome
.
O Jogo da Velha determina que é um estilo para ser aplicado em um ID.
Exemplo de uso 2:
#classeb{
font-style:italic;
}
Aplicando a classe :
<p class="classeb">Aplicando a tag acima o parágrafo fica assim :</p>
Resultado :
Aplicando a tag acima o parágrafo fica assim :
Importante1 : O ID tem que ser um único em toda a página.
Importante2 : O símbolo # deve ser utilizado na definição do estilo na css mas não é utilizado
na tag onde o formato será aplicado.
Seletor tipo 4 -Combinando seletores - Seletores com parentes
Neste tipo de seletor nós não só selecionamos o tipo da tag mas se ela tem uma tag parente
específica, tipo só quero aplicar o estilo na tag x que seja precedida ou antecedida pela
tag y.
Como tag parente entenda a tag anterior ou posterior, pode ser a n posterior ou a n anterior.
Exemplo :
<style> table p {
color:blue;
}
</style>
Neste caso apenas as tags p que estejam dentro de tags table serão afetadas.
3-Pseudo-Classes
Pseudo-Classes são classes que são ativadas apenas em eventos do browser, como ao passar o mouse
por cima de um elemento ou função similar.
As Pseudo-Classes também são utilizadas para definir estilos que antes eram feitos precariamente
pelo html ou estilos mais primitivos mas que foram substituidos e melhorados.
A seguir mencionamos as PseudoClasses mais comuns em todos os browsers:
1-:link
Define os estilos das tags <a> quando estas ainda não foram visitadas pelo usuário.
Exemplo:
a:link{color:red};
Isto faria com que todas as tags de link ainda não visitadas sejam exibidas na cor vermlha.
2-:visited
Define os estilos das tags <a> quando estas ainda já foram visitadas pelo usuário.
Exemplo:
a:visited{color:green};
Isto faria com que todas as tags de link já visitadas sejam exibidas na cor vermlha.
3-:active
Este estilo seria ativado quando o elemento da tag recebesse o foco da aplicação como o click
do mouse nele, por exemplo.
Exemplo:
input:active{background-color:green};
Isto faria com que o controle ao receber o foco teria sua cor de fundo alterada para verde.
Demonstração:
4-:hover
Este estilo será ativado quando o mouse passar sobre o elemento.
Exemplo:
a:hover{background-color:fuchsia};
Isto faria com que quando o mouse passar sobre o controle este terá a cor de seu fundo mudada.
São seletores criados para definir uma condição particular do elemento como primeiro, ultimo,
antes, depois, primeira letra.
Importante :
A definição de pseudo-elementos pode ser feita em estilos externos ou incorporados
mas não em estilo local
.
1-Before : Utilizado junto com a propriedade content define um conteúdo antes da ocorrência
do elemento.
Ex: a:before{content:open-quote}
2-After : Utilizado junto com a propriedade content define um conteúdo depois da ocorrência
do elemento.
Ex: a:after{content:close-quote}
3-First-Leter : Permite aplicar um estilo apenas na primeira letra de um elemento.
Ex: p:fist-letter{font-weight:bold}
4-First-Line : Permite aplicar um estilo apenas na primeira linha de um elemento.
Ex: p:fist-line{font-weight:bold}
Se entendeu o que foi explicado até aqui aqui tem um resumo para você se lembrar
deste assunto :
Resumo CSS - seletores
Dicas 1
Podemos aplicar duas ou mais classes no mesmo item :
Formato : class="classe1 classe2"
O espaço separa os nomes dos estilos a serem aplicados. />
Exemplo:
.classepreto {
color: black;
}
.classeazul {
color: blue;
}
.classeverde {
color: green;
}
.classe3{
color: red;
font-size: 22pt;
}
tag :<p class="classeazul classe3">Aplicando a classe azul e classe3 neste parágrafo fica assim :</p>
Resultado :
Aplicando o resultado é este.
Note que na tag classe azul temos a definicão da cor azul e na tag classe3 temos a definição de cor vermelha.
A cor que prevaleceu foi a vermelha porque em HTML, sempre, a última definição será a que prevalecerá.
Dicas 2
Podemos aplicar o estilo dentro do próprio elemento - Chamamos isso de css inline :
É meio deselegante mas muito utilizado especialmente em estilos simples ou únicos.
Importante : Com o posicionamento absoluto tiramos o tratamento que o browser dá na
disposição dos elementos na página.
Só para dar um exemplo, se copiarmos os textos das divs e trocarmos por span as
mensagens serão exibidas exatamente do mesmo jeito.
Dicas 3
Podemos na mesma definição de estilo selecionar diversas tags que serão afetadas pelo estilo.
Neste caso todas as tags header serão afetadas pelo estilo que esta sendo definido.
Como o estilo é definido
Para entender este tópico você deve conhecer como funciona o DOM e a sua hierarquia de elementos.
1-Pela definição do browser.
Quando você monta uma página html e define uma tag input type text o proprio browser tem uma
definição de estilo sobre como ele deve ser apresentado, qual fonte de letra, qual tamanho,
cor, etc. Isto é feito pela declaração <html> ou <html5>.
Note que ao definir um estilo para um elemento pai você pode estar definindo os estilos
de seus elementos filhos. Por exemplo, se eu defino na tag body que o texto é
Arial todos os elementos da página utilizarão o padrão de texto Arial, digamos que o
estilo é 'herdado' do elemento anterior ou de elementos parentes.
2-Pela CSS
Neste caso a CSS altera o estilo default do broswer e personaliza a exibição da tag.
Importante: Todos os estilos default de exibição da tag podem ser alterados pela CSS.
Absolutamente todos. Isto pode causar efeitos estranhos como uma tag input type text ser exibida
como um label ( não acessível, sem bordas, etc..) ou mesmo um elemento inline ser exibido como
um elemento block, o que causa uma certa confusão sobre a tag
utilizada no elemento especialmente pelo programador.
Marcando um estilo como importante
Um recurso que podemos utilizar na CSS é atribuindo a ele o parâmetro importante o
que faz com que o estilo não possa ser mais alterado dali por diante. Este parâmetro
faz com que a hierarquia de estilo do dom fique estática, congelada para aquele
elemento.
Exemplo de utilização:
div #p1 {
position: fixed !important;
top: auto !important;
left: auto !important;
bottom: 10px !important;
right: 30px !important;
}
O exemplo acima cita alguns estilos mas em todos os estilos podemos aplicar o
parâmetro !important.