Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Css

    Enviado por

    Gustavo Venceslau
    24 visualizações22 páginas
    Slide de iniciação as CSS para criação de sites dentro do padrão Webstandards

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PPSX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Slide de iniciação as CSS para criação de sites dentro do padrão Webstandards

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPSX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    24 visualizações22 páginas

    Css

    Enviado por

    Gustavo Venceslau
    Slide de iniciação as CSS para criação de sites dentro do padrão Webstandards

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPSX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 22

    CSS - CASCADING STYLE SHEETS

    Diante das dificuldades para atualizaes, manipulaes e maior produtividade nos arquivos html, houve a necessidade de criar mecanismos para solucionar esses problemas, o que ocorreu em 1995 com o nascimento do CSS, padres web que servem para separar a estrutura (html) da forma (css).

    CSS - CASCADING STYLE SHEETS


    Separando a estrutura da forma
    CSS CSS CSS JS

    HTML

    HTML

    HTML

    HTML

    CSS - CASCADING STYLE SHEETS


    Vantagens:

    Desvantagens*:

    Separam forma da estrutura; So arquivos que s contem textos; No exigem plugins; Facilitam codificao e manutenes posteriores

    Diferenas entre browsers.

    *Predominantemente o IE

    CSS - CASCADING STYLE SHEETS


    Mtodos de Especificao:
    Existem 3 maneiras de se especificar o documento CSS:

    Inline Embedded Linked

    CSS - CASCADING STYLE SHEETS


    CSS Inline
    Estilo aplicado localmente na tag HTML atravs do atributo style:
    <body> <p style=font-family: Arial; color: red> Frase na fonte Arial e na cor vermelha. </p> </body>

    CSS - CASCADING STYLE SHEETS


    CSS Embedding
    Estilo incorporado ao HTML atravs de um Bloco de style
    <head> <style> p {font-family: Arial; color: red} </style> </head> <body> <p>Esta fonte est escrita com fonte arial e cor vermelha.</p> </body>

    CSS - CASCADING STYLE SHEETS


    CSS Linking
    Vincula-se um arquivo externo apontando-o internamente com a tag <link>
    <head> <link rel=stylesheet href=linking.css type=text/css> </head> P{font-family:arial; color: red} <body> <p>Esta fonte est escrita com fonte arial e cor vermelha.</p> </body>

    CSS - CASCADING STYLE SHEETS


    A regra CSS e sua sintaxe

    Uma regra CSS define como ser aplicado o estilo a um ou mais elementos; Um conjunto de regras CSS formam uma Folha de Estilo; Uma regra CSS composta de trs partes: seletor, propriedade e valor.

    seletor { propriedade: valor; }

    h1 { text-decoration: underline; }

    CSS - CASCADING STYLE SHEETS


    A regra CSS e sua sintaxe

    Seletor o elemento HTML em si; Propriedade o atributo do elemento HTML; Valor a caracterstica a ser assumida pela propriedade;

    seletor { propriedade: valor; }

    h1 { text-decoration: underline; }

    CSS - CASCADING STYLE SHEETS


    Propriedades dos Seletores
    o atributo ao qual ser aplicada a regra
    Devem sempre estar entre chaves {} Podem existir duas ou mais propriedades por seletor, desde que separadas por um ; A propriedade pode ter mais de um valor associado

    CSS - CASCADING STYLE SHEETS


    Exemplos de propriedades dos Seletores
    Background Background-color Background-image Background-position Background-repeat Border Border-color Border-left Border-top Border-right Text-align Text-decoration Text-indent Font Font-size Font-family Font-style Width Height Color

    CSS - CASCADING STYLE SHEETS


    Valores das Propriedades
    a caracterstica especfica a ser assumida pela propriedade
    Exemplos: Letra tipo arial Cor preta Fundo vermelho

    CSS - CASCADING STYLE SHEETS


    Tipos de Seletores

    Simples Mltiplos Contextuais Classes Pseudoclasses Grupos de ID

    CSS - CASCADING STYLE SHEETS


    Seletores Simples
    So aqueles formados por tags HTML

    p { font-family:courrier; color: red } h1 { font: small-caps bold; color: red } h2 { font: small-caps bold }

    CSS - CASCADING STYLE SHEETS


    Seletores Mltiplos
    So aqueles formados por mais de um seletor simultaneamente

    p, td { font-family:courrier; color: red } h1, h2 { font: small-caps bold; color: red } h3, h4 { font: small-caps bold }

    CSS - CASCADING STYLE SHEETS


    Seletores Contextuais
    O estilo aplicado no primeiro seletor se e somente se a tag estiver contida na rea de influncia do seletor que vem a seguir.

    h1 p {font: small-caps bold } h3 div {font: small-caps bold }

    CSS - CASCADING STYLE SHEETS


    Seletores do tipo Classe
    Cria um estilo independente que poder ser aplicado numa tag HTML posteriormente:

    .minhaclasse { font-family: courrier; color: red}

    Pode criar um estilo dependente para ser aplicado somente com uma tag em particular: p.minhaclasse { font-family: courrier; color: red}

    CSS - CASCADING STYLE SHEETS


    Seletores do tipo PseudoClasses
    As pseudoclasses so seletores que influenciam o comportamento da tag a

    a:visited link j visitado a:link link que no foi visitado a:hover cursor sobre o link a:active link estiver ativo (sob o clique do mouse)

    CSS - CASCADING STYLE SHEETS


    Seletores do tipo ID
    So usados apenas uma vez para definir um nico tem, porm so utilizados para organizar seletores contextuais alm de permitir que funes JavaScript identifiquem um objeto exclusivo na tela.

    HTML - <div id=conteudo>...</div> CSS - #condeudo {width:100px; background-color: red}

    CSS - CASCADING STYLE SHEETS


    CSS Hacks
    um cdigo CSS que criado especificamente para atender a um browser onde ajusta o comportamento do objeto somente onde ele for posto. Se fazem mais hacks para o IE do que para qualquer outro browser.
    Exemplo 1:
    div {width: 500px; _width: 400px} Somente o IE aceita uma propriedade precedida de um sublinhado ( underline _ ) Exemplo 2: div#content {margin: auto; textalign: center; } O IE no entende as margens automticas, assim temos que dizer que o contedo centralizado de outra forma.

    CSS - CASCADING STYLE SHEETS

    Obrigado! Gustavo Venceslau


    WebDesigner
    Portfolio: www.gustavovenceslau.com Email/MSN: falecom@gustavovenceslau.com Twitter: @gusvenceslau

    Você também pode gostar