Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Aula 03.01-CSS

    Enviado por

    Geancarlo Maydana
    6 visualizações18 páginas
    aula de css

    Título original

    Aula_03.01-CSS

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    aula de css

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    6 visualizações18 páginas

    Aula 03.01-CSS

    Enviado por

    Geancarlo Maydana
    aula de css

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 18

    Programacao para a Web

    CSS

    Cleo Zanella Billa

    30 de Setembro de 2011

    Slide 1 / 18
    O que e CSS?

    CSS
    CSS quer dizer Cascading Style Sheets.
    Referencias e
    Material Extra
    Estilos definem como mostrar elementos HTML.
    Estilos foram adicionados no HTML 4.0.
    Estilos reduzem significativamente o trabalho.
    Exemplo: Clique Aqui.

    Slide 2 / 18
    CSS resolve um grande problema

    CSS
    HTML nunca teve a intencao de conter tags de formatacao.
    Referencias e
    Material Extra
    HTML tem a intencao de definir o conteudo de um
    documento. Ex.
    <h1>T h i s i s a h e a d i n g</ h1>
    <p>T h i s i s a p a r a g r a p h .</p>

    Quando tags como < f ont > e atributos de cores foram


    adicionados no HTML 3.2, comecou o pesadelo dos
    desenvolvedores web.

    Slide 3 / 18
    CSS resolve um grande problema

    CSS
    O desenvolvimento de web sites grandes, onde cada pagina
    Referencias e
    Material Extra tinha que ter informacoes sobre cores e fontes se tornou um
    processo altamente custoso.
    Para solucionar esse problema o W3C criou o CSS.
    Em HTML 4.0 (e posteriores), toda a formatacao pode ser
    removida do codigo HTML e colocada em um arquivo CSS.
    Hoje em dia todos os browsers suportam CSS.

    Slide 4 / 18
    Como usar Estilos (CSS)

    CSS
    Quando o browser le o estilo, formata o documento de
    Referencias e
    Material Extra acordo ele.
    Existem tres formas de inserir um estilo a um documento:
    Inline Styles
    Internal Style Sheet
    External Style Sheet

    Slide 5 / 18
    Inline Styles

    CSS
    Esse metodo e usado quando se quer aplicar um estilo a
    Referencias e
    Material Extra apenas um elemento de um arquivo HTML.
    Esse metodo e definido usando o atributo style dentro de
    uma determinada tag (table, body, td, tr, h1, p, ...).
    <p s t y l e= c o l o r : b l u e ; marg i n l e f t : 2 0 px >T h i s i s a
    p a r a g r a p h .</p>

    Consume muito tempo e nao e muito pratico utilizar o


    atributo style.
    A melhor forma de adicionar CSS a um documento HTML e
    por o CSS em arquivo separado (External Style Sheet)
    Porem as vezes e necessario.

    Slide 6 / 18
    Internal Style Sheet

    CSS
    Quando esse metodo e usado, um unico documento e
    Referencias e
    Material Extra tratado.
    Esse metodo e definido usando a tag style dentro da tag
    head.
    <head>
    < s t y l e t y p e= t e x t / c s s >
    body { b a c k g r o u n dc o l o r : y e l l o w }
    p { color : blue }
    </ s t y l e>
    </ head>

    Slide 7 / 18
    External Style Sheet

    CSS
    Esse metodo e usado quando um mesmo estilo deve ser
    Referencias e
    Material Extra aplicado a varias paginas.
    Com esse metodo, toda a aparencia de um site web pode ser
    mudada, alterando-se apenas um arquivo.
    Cada pagina deve ser linkada ao arquivo css usando a tag
    link que deve ser inserida dentro da tag head.
    <head>
    < l i n k r e l= s t y l e s h e e t t y p e= t e x t / c s s h r e f=
    m y s t y l e . c s s />
    </ head>

    Slide 8 / 18
    Ordem dos Estilos

    CSS
    Qual estilo sera usado se mais de um estiver especificado
    Referencias e
    Material Extra para um elemento HTML?
    Dizemos que os estilos cascatam (cascade) de acordo com as
    regras abaixo, sendo o 4 de maior prioridade.
    1. Browser Default
    2. External Style Sheet
    3. Internal Style Sheet
    4. Inline Style
    Obs.: Se o link para o external style sheet estiver colocado depois das definicoes do internal style sheet

    no HTML, o external style sheet vai sobrescrever o internal style sheet.

    Slide 9 / 18
    Exemplos

    CSS
    Codigo HTML
    Referencias e
    Material Extra
    <html>
    <head>
    < l i n k r e l= s t y l e s h e e t t y p e= t e x t / c s s h r e f= e x 1 .
    c s s />
    </ head>
    <body>
    <h1>T h i s h e a d e r i s 36 p t</ h1>
    <h2>T h i s h e a d e r i s b l u e</ h2>
    <p>T h i s p a r a g r a p h h a s a l e f t m a r g i n o f 50 p i x e l s</
    p>
    </ body>
    </ html>

    Slide 10 / 18
    Exemplos

    CSS
    Codigo CSS: ex1.css
    Referencias e
    Material Extra
    body {
    b a c k g r o u n dc o l o r : y e l l o w ;
    }

    h1 {
    f o n t s i z e : 3 6 p t ;
    }

    h2 {
    color : blue ;
    }

    p {
    marg i n l e f t : 5 0 px ;
    }

    Slide 11 / 18
    Exemplo 01

    CSS
    Resultado no Browser
    Referencias e
    Material Extra

    Exemplos na Web:
    Exemplo 01: Clique Aqui
    Exemplo 02: Clique Aqui

    Slide 12 / 18
    Sintaxe CSS

    CSS
    Um CSS tem duas partes principais: o seletor e uma ou mais
    Referencias e
    Material Extra declaracoes.

    Slide 13 / 18
    Sintaxe CSS

    CSS
    Seletores: h1, h2, p, a, ul, ol, table, tr, td, ...
    Referencias e
    Material Extra
    Declaracoes: uma propriedade e um valor.
    Propriedades: color, background-color, font-size,
    text-align, ...
    Valores: blue, gray, 12px, center, ...
    Ex.:
    body { b a c k g r o u n dc o l o r : y e l l o w ; }
    h1 { f o n t s i z e : 3 6 p t ; c o l o r : b l u e ; b a c k g r o u n d c o l o r : w h i t e }
    p{ marg i n l e f t : 5 0 px ; c o l o r : g r e e n ; }

    Para testar: Clique Aqui

    Slide 14 / 18
    Comentarios CSS

    CSS
    Em CSS um comentario comeca com /*, e termina com
    Referencias e
    Material Extra */.
    Exemplo:
    / T h i s i s a comment /
    p {
    t e x t a l i g n : c e n t e r ;
    / T h i s i s a n o t h e r comment /
    color : black ;
    f o n t f a m i l y : a r i a l ;
    }

    Slide 15 / 18
    Exerccio

    CSS
    1. Crie um conjunto de paginas Web para conter as disciplinas
    Referencias e
    Material Extra que voces esta fazendo nesse semestre.
    (a) Cada disciplina deve ter sua propria pagina.
    (b) Faca uma pagina inicial com um link para cada pagina
    de disciplina.
    (c) Adicione estilos as paginas. As paginas de disciplina
    devem seguir o mesmo padrao (cor de fundo, cor e
    tamanho de ttulo, etc).
    Guia de referencia das propriedades CSS: Clique Aqui

    Slide 16 / 18
    Exerccio

    CSS
    2. Resolva a lista de exerccios disponvel no moodle.
    Referencias e
    Material Extra

    Slide 17 / 18
    Referencias e Material Extra

    CSS
    Tutoriais:
    Referencias e
    Material Extra
    HTML: http://www.w3schools.com/html/
    CSS: http://www.w3schools.com/css
    CSS: http://maujor.com/tutorial/intrtut.php

    Guia de referencia das propriedades CSS: Clique Aqui


    Guia de referencia HTML: Clique Aqui
    Procure outros ...

    Slide 18 / 18

    Você também pode gostar