Top Banner
12

CSS - Cascading Style Sheets - 2

Jan 20, 2017

Download

Software

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • h1 {

    background: #000;

    }

    #id {

    color: #F00;

    }

    .class {

    color: #F00;

    }

  • Seletor de tipo: utilizando este seletor, selecionamos todas as tags de um

    mesmo tipo. Exemplo: a, p, h1

    Seletor de classe: utilizando este seletor, selecionamos os elementos com a

    classe aplicada. Exemplo: .destaque seleciona todos os elementos com a

    classe "destaque".

    Seletor de id: utilizando este seletor, selecionamos a tag com id especificada.

    Exemplo: #cabecalho ir selecionar o elemento com a id "cabecalho".

    Seletor descendente: utilizando este seletor, podemos escolher um ou mais

    elementos que esto dentro de outro. Exemplo: body div .paragrafo (body -> div

    -> .paragrafo)

  • Pseudo-classes so tipos de classes especiais que no so definidas pelo

    desenvolvedor (j so pr-definidas). O seletor de pseudo-classe escrito com

    o nome do elemento + dois pontos + nome da pseudo-classe.

    Uso comum na tag

    a:link, estilizamos links no-visitados, em seu estado normal.

    a:visited, estilizamos apenas links visitados, que j foram clicados.

    a:hover, estilizamos quando o mouse est em cima do mesmo.

    a:focus, estilizamos quando os selecionamos com o teclado, atravs da

    tecla Tab.

    a:active, estilizamos quando o mouse est sendo clicado ou pressionamos

    Enter, ativando o link.

  • a:link o estado inicial dos links;

    - a:link dever ser a primeira declarao

    a:active dever acontecer mesmo em links j visitados;

    - a:active dever ser declarado depois de a:visited;

    a:hover no precisa funcionar em a:active;

    a:active pode ser declarado depois de a:hover.

    Em consequncia a ordem das declaraes deve ser:

    1. a:link

    2. a:visited

    3. a:hover

    4. a:active

  • A maioria das propriedades que aplicamos a um elemento, ir passar aos seus

    "herdeiros", ou seja, os elementos que esto contidos naquele.

    Preencha o campo Nome.

    /* CSS */

    .error {

    color: #F00;

    }

  • As CSS tambm obedecem algumas regras de precedncia. Quando vrias regras

    se aplicam a um mesmo elemento, o navegador precisa decidir qual delas tem

    precedncia

    1. Regras em linha (atributo style) tem precedncia sobre regras em tags style ou

    arquivos externos CSS;

    2. Seletores de elemento (por exemplo, p) tem a menor precedncia (podemos

    dizer que, numa escala, este tipo de seletor vale "1");

    3. Seletores de classe (por exemplo, .destaque) tem mais precedncia (vale

    "10");

    4. Seletores de id (por exemplo, #conteudo) tem maior precedncia (vale "100").

  • CONTEDOCOMENTADO

  • margin: 5px; Aplica nas 4 arestas

    margin: 5px 10px; Aplica em (acima & abaixo) (direita & esquerda)

    margin: 5px 20px 7px; Aplica em (acima) (direita & esquerda) (abaixo)

    margin: 5px 15px 0 12px; Aplica em (acima) (direita) (abaixo) (esquerda)

    * Mesmo para padding

  • As vantagens das CSSs (http://www.pinceladasdaweb.com.br/blog/2006/05/13/as-

    vantagens-das-css/)

    HTML E CSS NA PRTICA

    (http://guilhermemuller.com.br/pt/elearning/html_css_basico/ndice)

    Globo.com - (http://www.globo.com)

    Maujor (http://www.maujor.com)

    ITP Driveby: Cascading Style Sheets (http://www.mandalatv.net/itp/drivebys/css/)

    SlidePlayer: Lesson 03 - Cascading Style Sheets (http://slideplayer.com/slide/8119935/)