CSS - Resumo

Sumário

O HTML informa o que a página deve exibir ao usuário como as mensagens, imagens, vídeos, áudio etc.
A CSS informa como isso deve ser feito em matéria de estilo, ou seja, cor, forma, tamanho, posicionamento ou qualquer coisa que pertença ao browser e não ao objeto em sí ou até mesmo esconder ele.

Alguns dos recursos da CSS ainda estão disponíveis em outras tags mas é consenso que no futuro só haverá a css para esta tarefa.

Todos sabemos que há um grande motivo para fazer isso na CSS e não em outro lugar devido ao fato da versatilidade da utilização dos recursos da css. Podemos selecionar, tudo, todos elementos de uma classe, um único elemento, um elemento seguido de outro, um elemento antecedido de outro, recursos que são literalmente impossíveis de outra forma. Existe até um efeito de herança de uma tag pai para tag filha que só a hierarquia do DOM (Document Object Model) com a css conseguem fazer essa proeza com maestria e simplicidade.

Conceito básico

Para exibir um elemento HTML o browser precisaria de um monte de definições , tipo largura, altura, tamanho do elemento, tamanho da tela, cabe na linha...exibe logo ao lado, não cabe, exibe na linha de baixo. Portanto seria uma tarefa dificil para o usuário exibir qualquer coisa porque teria que definir um monte de parâmetros.

Para evitar todo esse trabalho o browser conta com 'modelos' ('defaults'). Se o usuário não definiu ele usa o padrão dele (browser). Portanto o Browser já tem algumas definições de posicionamento, exibição e tamanhos para todos seus elementos e com isto simplifica a vida do usuário. São padrões de exbição das tags.

O CSS trabalha em conjunto com o HTML definindo alterações mo modelo padrão do elemento e, se você for caprichoso, vai fazer toda a diferença...seu site vai ficar muito mais bonito. Se HTML é o conteúdo da página o CSS é a beleza ou o capricho com que a página foi feita.

Por exemplo, se você define um campo input type text no HTML ele precisa de pouca coisa para exibir essa caixa de texto e já tem um padrão de largura, altura, fontes de letra etc. para que o objeto seja exibido mesmo com pouquíssimos parâmetros fornecidos

Exemplo : Na linha abaixo existe um campo input text padrão:

Código: <input type="text" >

A tag input abre uma caixa de texto para digitação de dados do usuário como nome, telefone, endereço etc. Clique na caixa de texto com o mouse e digite um texto. Toda a complexidade do elemento ficou por conta do browser.

Mas e se você quiser alterar algo nesse 'padrão default' browser ? Pode ser largura, altura, fonte de letras etc, literalmente qualquer coisa como você faz ?

Para alterar esse 'padrão default do browser' usamos a CSS. A CSS pode alterar praticamente qualquer característica de exibição, posicionamento e visibilidade do elemento e, mais ainda, misturar ou mesmo herdar características de um elemento pai anterior e aplicar no posterior e o posterior pode ter outra css modificando as definições do elemento pai.

Se você encontrou dificuldades em entender o que é um elemento pai ou container (pai ou anterior) e um elemento filho ( ou posterior ) cito o exemplo de uma imagem dentro de uma tag anchor. Você concorda que ao fazer isso faço com que toda a imagem seja um link para o destino da url desejada pela tag anchor ? Veja o exemplo abaixo :

Para comprovar que é um link passe o mouse sobre a imagem e o cursor do mouse será exibido como uma 'mão' indicando que você pode clicar nele.

Código:
        <p>
            <a href="#">
                <img style="height: 30%;width: 30%;" src="26-fundo.jpg">
            </a>
        </p>

Sendo assim a tag anchor é pai, container (contém, abriga dentro dela) a tag img, filha. E ainda podemos dizer que a tag pai é pai da tag anchor também.

Agora como exemplo vou alterar o estilo da tag input. Vou mudar o comprimento dela para 600 pixels

Exemplo : Na linha abaixo existe um campo input text padrão:

Código: <input type="text" style="width: 600px;">

Com a mesma facilidade que troquei o comprimento da tag input posso mudar qualquer uma das características dessa tag, por isso css é tão poderosa.

Aplicando estilos

Os exemplos que dei foram bem simples mas num site grande e complexo podemos definir tantos estilos para tantos elementos como quizermos, certo ?. Você deve ter pensado consigo mesmo... se eu criar uma página grande e complexa vou ter tantos estilos que vou acabar me perdendo neles.

Como saber que estilo eu apliquei no primeiro parágrafo quando eu estou no rodapé da página ?
Como padronizar os elementos de uma página aplicando um padrão ou mesmo definindo onde esse padrão deve ou não ser aplicado.

Concorda comigo que se o estilo aplicado a cada elemento poderia deixar você meio confuso e seria fácil se perder se não houver uma clara.

Para escolher qual css deve ser aplicada em cada elemento da página e ainda permitindo que eu selecione onde deva ser aplicado ou não sem perder o 'padrão' do começo para o fim da página foi inventado um mecanismo de aplicação da CSS chamado Seletor.

Seletores

Seletor é o que define aonde a css deverá ser aplicada no documento HTML.
Definimos seletores o mecanismo de seleção que nos permite escolher onde o estilo deve ser aplicado e onde não deve.

Através dos seletores um estilo na CSS pode ser aplicado :
•1-Em todas as tags da página (Global),
•2-Apenas nas tags que desejarmos (Classes),
•3-Apenas numa tag (ID),
•4-Na sequencia de um conjunto de tags (pai, filha, irmã) etc.

Como aplicar a css

A CSS pode ser aplicada :
•1-No header da página exatamente como uma folha de estilos comum.
•2-Antes de onde vamos utilizar ( deseleganrte mas unfciona)
•3-Numa folha de estilos separada da página html corrente.

1-Seletor Global

Ao utilizar este seletor todas as tags da página serão afetadas.:

Como definimos:
   p {
      color: red;
   }

Texto antes da tag p<p>Texto dentro da tag p</p>Texto depois da tag p.

Como o browser exibe :
Texto antes da tag p

Texto dentro da tag p

Texto depois da tag p.

Note que para aplicar este estilo basta apenas definí-lo e ele será automaticamente aplicando em todas as tags de mesma classe no documento.

2-Seletor por classe

Aplicamos o estilo via classe do elemento, ou seja, se quisermos que um estilo seja aplicado ao elemento adicionamos a classe a ele.
   Com este tipo de seletor podemos aplicar o estilo apenas nos itens que desejar-mos.
Para isso, a definição do seletor deve iniciar com o caractere "." seguido do valor correspondente mas lembre-se que na utilização da classe não usamos o ponto.

Como definimos:
    <style>
        .roxinho{
            color:purple;
        }
    </style>

        Exemplo de aplicação: <p class="roxinho">Aplicação de estilo pela classe.</p><br />

Como o browser exibe:
Exemplo de aplicação:

Aplicação de estilo pela classe.


3-Seletor Único

Aplicando um estilo via id do elemento.
   É possível aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id.
Para isso, o seletor deve iniciar com o caractere "#" seguido do valor correspondente.


Como definimos:
   #cabecalho {
      color: blue
      text-align: center;
   }

<p id="cabecalho">Teste1.</p>



Como o browser exibe:
Exemplo de aplicação:

Teste1.



   O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor "cabecalho" tenha seu texto renderizado na cor coral e centralizado.
Note que não há nenhuma indicação para qual tag a propriedade será aplicada mas sim pelo id.
Pode ser tanto a tag A quanto a tag B, até mesmo tags sem conteúdo como uma imagem , desde que essa tenha o atributo id com o valor "cabecalho".
   Como o atributo id deve ter valor único no documento, o seletor deve aplicar suas propriedades declaradas somente àquele único elemento e, por cascata, a todos os seus elementos filhos.

Seletor Hierárquico :


3-Seletor Hierárquico filha

Formato : #id tagFilha :
   Podemos ainda utilizar um seletor hierárquico que permite aplicar estilos aos elementos filhos de um elemento pai:

      #rodape img {
         margin-right: 30px;
         vertical-align: middle;
         width: 150px;
      }

   <span id="rodape">
      Tag AfetadaRodape
      <img src="mirror fashion/img/familia-pelho.jpg" />
   </span>

Exemplo de aplicação da css :
Tag AfetadaRodape

No exemplo anterior, o elemento pai rodape é selecionado pelo seu id .
O estilo será aplicado apenas nos elementos img filhos do elemento com id=rodape .

Seletor de irmãos (siblings) - afeta todas as tags irmãs


4-Seletor de tags irmãs

Formato : tag ~tagIrmã(s) :
Veja o seguinte HTML, que simula um texto com vários parágrafos, títulos e subtítulos no meio do documento:

   <article>
      <h1>Título</h1>
      <p> Início</p>
      <h2> Subtítulo</h2>
      <p>Texto</p>
      <p>Mais texto</p>
    </article>

   Como faremos se quisermos estilizar de uma certa maneira todos os parágrafos após o subtítulo?
   O seletor de irmãos (siblings) ( ~ ) serve pra isso! Ele vem do CSS3 e funciona em todos os navegadores modernos (e no IE7 pra frente).

   h2 ~ p {
      font-style: italic;
      color: green;
   }

   Isso indica que queremos selecionar todos as tags p que foram precedidos por algum h2 e são irmãos do subtítulo (ou seja, estão sob a mesma tag pai).
No HTML anterior, serão selecionados os dois últimos parágrafos (Texto e Mais texto).
Exemplo utilização :

Título

Início (afetada pela tag do item 1)

Subtítulo

Texto

Mais texto



5-Seletor de irmã adjacente

Formato : tag +tagIrmã :
Ainda com o HTML anterior, o que fazer se quisermos selecionar apenas o parágrafo imediatamente seguinte ao subtítulo? Ou seja, é um p irmão do h3 mas que aparece logo na sequência:

   <article>
      <h3>Título</h3>
      <p> Início</p>
      <h4> Subtítulo</h4>
      <p>Texto</p>
      <p>Mais texto</p>
   </article>

   Fazemos isso com o seletor de irmão adjacente - adjacent sibling (+) :

   h4 + p {
      font-variant: small-caps;
      color: purple;
   }

   Nesse caso, apenas o parágrafo Texto será selecionado.
É um irmão de h4 e aparece logo depois do mesmo.
Esse seletor faz parte da especificação CSS2.1 e tem bom suporte nos navegadores modernos, incluindo o IE7.
Exemplo utilização :

Título

Início

Subtítulo

Texto

Mais texto

Importante : Apenas a primeira tag adjacente é afetada...as demais não.


6-Seletor de filho direto

Formato : tag >tagIrmã :
   Se tivermos o seguinte HTML com títulos e seções de um artigo:

   <article>
      <h1>Título principal</h1>
      <h5>Depois do h5 titulo</h5>
      <section>
         <h5>Título da seção1</h5>
         <h5>Título da seção2</h5>
         <h6>Titulo da sub-seção 3</h6>
         <h5>Título da seção4</h5>
      </section>
</article>

   Queremos deixar apenas o título principal de outra cor. Como fazer? O seletor de nome de tag simples não vai resolver:

/* vai pegar todos os h1 da página */
   h1 {
      color: purple;
   }

   Tentar o seletor de hierarquia também não vai ajudar:
/* vai pegar todos os h1 do article, incluindo o de dentro da section */
   article h1 {
      color: purple;
   }

   Entra aí o seletor de filho direto ( > ) do CSS2.1 e suportado desde o IE7 também.

/* vai pegar só o h1 principal, filho direto de article e não os netos */
   article > h5 {
      color: purple;
   }

Título principal

Depois do h5 titulo
Título da seção1
Título da seção2
Titulo da sub-seção 3
Título da seção4


7-Negação

Seleciona todas que não forem do tipo. Formato : tag :not :
   Imagine o seguinte HTML com vários parágrafos simples:

   <p>Texto</p>
   <p>Outro texto</p>
   <p>Texto especial</p>
   <p>Mais texto</p>

   Queremos fazer todos os parágrafos de cor cinza, exceto o que tem o texto especial.
   Precisamos destacá-lo de alguma forma no HTML para depois selecioná-lo no CSS. Uma classe ou ID resolve:

   <p>Texto</p>
   <p> Outro texto</p>
   <p class="especial" >Texto especial</p>
   <p>Mais texto</p>

   Mas como escrever o CSS? Queremos mudar a cor dos parágrafos que não têm a classe especial.
   Um jeito seria mudar a cor de todos e sobrescrever o especial depois:

   p {
      color: gray;
   }

   p.especial {
      color: black; /* restaura cor do especial */
   }

   No CSS3, há uma outra forma, usando o seletor de negação.
Ele nos permite escrever um seletor que pega elementos que não batem naquela regra.

   p:not(.especial) {
      color: gray;
   }

   Isso diz que queremos todos os parágrafos que não têm a classe especial. A sintaxe do :not() recebe
como argumento algum outro seletor simples (como classes, IDs ou tags).
Essa propriedade do CSS3 possui suporte mais limitado no IE, somente a partir da versão 9 (nos
outros navegadores não há problemas).
Exemplo de utilização :

Texto


Outro texto


Texto especial


Mais texto



Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.


8-PSEUDO-CLASSES

Primeiro e último item

Pegue o seguinte HTML de uma lista de elementos:

   <ul>
      <li>Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li>Quarto item</li>
</ul>

   E se quisermos estilizar elementos específicos dessa lista? Por exemplo, o primeiro elemento deve ter cor vermelha e o último, azul.
Com esse HTML simples, usando apenas os seletores que vimos até agora, será bem difícil.
A solução mais comum seria adicionar classes ou IDs no HTML para selecioná-los depois no CSS:

   <ul>
      <li class="primeiro">Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li class="ultimo">Quarto item</li>
   </ul>

   Agora é fácil usar cores diferentes para o primeiro e último itens da lista.
Mas essa técnica exigiu alteração no HTML e exige que lembremos de colocar a classe correta, no ponto correto, toda vez que fizermos mudanças nos itens da lista.
   O CSS tem um recurso chamado de pseudo-classes que são como classes CSS já pré-definidas para nós.
É como se o navegador já colocasse certas classes por padrão em certos elementos, cobrindo situações comuns como essa de selecionar o primeiro ou o último elemento.
   Há duas pseudo-classes do CSS3 que representam exatamente o primeiro elemento filho de outro (first-child) e o último elemento filho (last-child).
Essas classes já estão definidas, não precisamos aplicá-las em nosso HTML e podemos voltar para o HTML inicial:

   <ul>
      <li>Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li>Quarto item</li>
   </ul>

   No CSS, podemos usar pseudo-classes quase da mesma forma que usaríamos nossas classes normais.
   Repare que para diferenciar um tipo do outro, mudou-se o operador de ponto para dois pontos:

   li:first-child {
      color: red;
   }

   li:last-child {
      color: blue;
   }

   O suporte a esses seletores é completo nos navegadores modernos.
O first-child vem desde o IE7, Firefox 3 e Chrome 4. E (estranhamente), o last-child só a partir do IE9 mas desde o Firefox 1 e Chrome 1.

Exemplo de utilização :
Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.


NTH-CHILD - 9-Pseudo classes - Enésimo item.

   Um seletor ainda mais genérico do CSS3 é o :nth-child() que nos permite passar o índice do elemento.
Por exemplo, podemos pegar o terceiro item com:

   li:nth-child(4) { color: yellow; }

Exemplo de utilização :
Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.

10-Pseudo classes - Itens pares e impares.

   Porém, o mais interessante é que o nth-child pode receber uma expressão aritmética para indicar quais índices selecionar.
É fácil fazer uma lista zebrada, com itens ímpares de uma cor e pares de outra:

10-Pseudo classes - Itens pares.

   li:nth-child(2n) { color: green; }

10-Pseudo classes - Itens impares.

   li:nth-child(2n+1) { color: blue; }

O suporte existe a partir do IE9, Firefox 3.5 e Chrome 1.
Nota : O exemplo esta diferente porque este efeito altera todos os demais elementos da página mas esta no style.

Exemplo de utilização: Exemplo de utilização :
Nota : O exemplo esta diferente porque este efeito altera todos os demais elementos da página mas esta no style.



Pseudo classes de estado

11-Pseudo classes de estado

Ativados por eventos ou mudanças
   Queremos mudar a cor de um link quando o usuário passa o mouse por cima.
   Ou seja, queremos mudar seu visual a partir de um evento do usuário (no caso, passar o mouse em cima).
   Uma solução ingênua seria criar um código JavaScript que adiciona uma classe nos links quando o evento de mouseover acontece (e remove a classe no mouseout).
   Entretanto, o CSS possui excelentes pseudo-classes que representam estados dos elementos e, em especial, uma que representa o momento que o usuário está com o mouse em cima do elemento, a

      :hover.

   É como se o navegador aplicasse uma classe chamada hover automaticamente quando o usuário passa o mouse em cima do elemento e depois retirasse a classe quando ele sai.
Tudo sem precisarmos controlar isso com JavaScript.

/* seleciona o link no exato momento em que passamos o mouse por cima dele */
   h6:hover {
      background-color:#FF00FF;
   }

   Podemos usar hover em todo tipo de elemento, não apenas links. Mas os links ainda têm outras pseudo-classes que podem ser úteis:

/* seleciona todas as âncoras que têm o atributo "href", ou seja, links */
   a:link {
      background-color:#FF0000;
   }

/* seleciona todos os links cujo valor de "href" é um endereço já visitado */
   a:visited {
      background-color:#00FF00;
   }

/* seleciona o link no exato momento em que clicamos nele */
   a:active {
      background-color:#0000FF;
   }

Exemplo de utilização :
Teste


12-Pseudo classes : Primeira letra

   Pseudo-classes nos ajudam a selecionar elementos com certas características sem termos que colocar uma classe manualmente neles.
Porém, o que fazer quando precisamos selecionar certo tipo de conteúdo que nem elemento tem?
Exemplo: temos um texto num parágrafo:

<p>Estudar é a melhor maneira de aprender.</p>

   Queremos dar um estilo de revista ao nosso texto e estilizar apenas a primeira letra da frase com uma
fonte maior. Como fazer para selecionar essa letra? A solução ingênua seria colocar um elemento ao redor da letra para podermos selecioná-la no CSS:

<p><span>E</span> studar é a melhor maneira de aprender.</p>

Essa solução deixa o HTML confuso e difícil de manter.
   O CSS apresenta então a ideia de pseudo-elementos.
São elementos que não existem no documento mas podem ser selecionados pelo CSS.
É como se houvesse um elemento lá!
   Podemos voltar o HTML inicial:

<p>Estudar é a melhor maneira de aprender.</p>

E no CSS:
   p::first-letter {
      font-size: 200%;
   }


   Temos ainda outro pseudo-elemento para selecionar a primeira linha apenas em um texto grande:
   p::first-line {
      font-style: italic;
   }

Exemplo de utilização :

Estudar é a melhor maneira de aprender.





13-Novos conteúdos

Pesonalização de tags para sites de busca
   Há ainda um outro tipo de pseudo-elemento mais poderoso que nos permite gerar conteúdo novo via CSS.
Imagine uma lista de links que queremos, visualmente, colocar entre colchetes:
[ Link 1 ]
[ Link 2 ]
[ Link 3 ]
   Podemos, claro, apenas escrever os tais colchetes no HTML. Mas será que o conteúdo é semântico?
Queremos que esses colchetes sejam indexados pelo Google? Queremos que sejam lidos como parte do texto pelos leitores de tela?
Talvez não. Pode ser um conteúdo apenas visual. Podemos gerá-lo com CSS usando os pseudoelementos after e before.
O HTML seria simples:

<a href="...">Link1</a>
<a href="...">Link2</a>
<a href="...">Link3</a>

E no CSS:
   a:before {
      content: '[';
   }
   a:after {
      content: ']';
   }
   Ou ainda, imagine que queremos colocar a mensagem (externo) ao lado de todos os links
externos da nossa página. Usando pseudo-elementos e seletores de atributo, conseguimos:
   a[href^=http://]:after {
      content: ' (externo)';
   }
Isso pega todos os elementos <a> que começam com http:// e coloca a palavra (externo) depois.
Exemplo de utilização :
Link1
Link2
Link3


Caso tenha entendido o que foi explicado acima e precise de um resumo, segue o link para download de um resumo muito bom. Resumo de seletores