Scribd Logo
Hochladen

Willkommen bei Scribd!

  • CSS 03 Cores Background

    Hochgeladen von

    cotta421
    9 Ansichten20 Seiten

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    9 Ansichten20 Seiten

    CSS 03 Cores Background

    Hochgeladen von

    cotta421

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 20

    CSS Folha de Estilo em Cascata

    Unidade 3 Cores e Background


    Curso: Auxiliar de Web Design
    Carga horria: 30h/a
    Professor Regis Pires Magalhes
    regis@ifpi.edu.br
    http://sites.google.com/site/ifpiregis
    A disciplina
    Unidades
    1. Fundamentos de CSS
    2. Textos, Fontes e Espaamentos
    3. Cores e background
    4. Listas, Menus e Links
    5. Tabelas e Formulrios
    6. Posicionamento e Layout
    Cores na Web
    Branco
    Cores na Web
    Uma cor cinza
    Cores na Web
    Uma cor laranja
    Cores na Web
    Valores numricos entre 0 e 255.
    80% de 255 204,
    40% de 255 102 e
    0% de 255 0.
    Cores na Web
    Cor em Hexadecimal
    CC = (12 x 16) + 12 = 204
    66 = (6 x 16) + 6 = 102
    00 = (0 x 16) + 0 = 0
    Cores na Web
    Regras para cores
    div.um {background-color: #FF0000;}
    div.dois {background-color: #F00;}
    div.tres {background-color: rgb(255, 0, 0);}
    div.quatro {background-color: rgb(100%, 0%, 0%);}
    div.cinco {background-color: red;}
    div.seis {background-color: ThreeDShadow;}
    #FF0000 = #F00 =
    rgb(255,0,0) =
    rgb(100%,0%,0%) = red
    Cor pelo cdigo hexadecimal
    #FFF = #FFFFFF
    #CF9 = #CCFF99
    #cde = #ccddee
    #49c = #4499cc
    Ferramenta online:
    http://www.colorschemer.com/online.html
    Cor pelo cdigo rgb
    rgb abreviatura para:
    r = red (vermelha)
    g = green (verde)
    b = blue (azul)
    Cor obtida com a mistura de uma quantidade
    xxx de vermelho com yyy de verde e com zzz de
    azul.
    definies vlidas:
    rgb(145, 230, 50)
    rgb(20%, 0%, 70%)
    definio no vlida:
    rgb(255, 20%, 120)
    Cor por palavra-chave
    As Recomendaes para CSS 2.1 listam as 17 cores a
    seguir:
    p {
    color: aqua;
    }
    div {
    background-color: teal;
    }
    Propriedade CSS background
    Define as caractersticas do fundo dos
    elementos HTML e so listadas a seguir:
    background-color............... cor do fundo;
    background-image............. imagem de fundo;
    background-repeat............. maneira como a imagem de
    fundo posicionada;
    background-attachment.......se a imagem de fundo "rola"
    ou no com a tela;
    background-position............como e onde a imagem de
    fundo posicionada;
    background........................maneira abreviada para
    todas as propriedades;
    Cor do fundo
    <html>
    <head>
    <style type="text/css">
    body {background-color: #cff;} /*azul claro*/
    h2 {background-color: #f00;} /* vermelho */
    p {background-color: #0f0;} /* verde */
    </style>
    </head>
    <body>
    <h2>Estude CSS</h2>
    <p>Com CSS voc controla melhor seu layout</p>
    </body>
    </html>
    Imagem de fundo
    <html>
    <head>
    <style type="text/css">
    body { background-image: url("/images/css.gif");}
    </style>
    </head><body></body>
    </html>
    Imagem de fundo repetir verticalmente
    <html>
    <head>
    <style type="text/css">
    body {
    background-image: url("/images/css.gif");
    background-repeat: repeat-y;
    }
    </style>
    </head>
    <body></body>
    </html>
    Imagem de fundo repetir horizontalmente
    <html>
    <head>
    <style type="text/css">
    body {
    background-image: url("/images/css.gif");
    background-repeat: repeat-x;
    }
    </style>
    </head>
    <body></body>
    </html>
    Imagem de fundo posicionar
    <html>
    <head>
    <style type="text/css">
    body {
    background-image: url("/images/css.gif");
    background-repeat: no-repeat;
    background-position: 200px 70px;
    }
    </style>
    </head>
    <body></body>
    </html>
    Imagem de fundo fixar (sem rolagem)
    <html>
    <head>
    <style type="text/css">
    body {
    background-image: url("/images/css.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    </style>
    </head>
    <body>
    <p>Role a tela</p><p>Role a tela1</p>...<p>Role a tela20</p>
    </body>
    </html>
    Imagem de fundo declarao nica
    <html>
    <head>
    <style type="text/css">/>
    body {
    background: #00FF00 url("css.gif") no-repeat fixed 200px 70px;
    }
    </style>
    </head>
    Sintaxe:
    background: color image repeat attachment position;

    Das könnte Ihnen auch gefallen