Scribd Logo
Upload

Welcome to Scribd!

  • Tecnologias para Internet

    Uploaded by

    MarceloDomenikki
    6 views25 pages

    Original Title

    Tecnologias Para Internet

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views25 pages

    Tecnologias para Internet

    Uploaded by

    MarceloDomenikki

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 25

    Prof Thyago Maia

    Tecnologias para Internet



    Aula 4
    Sumrio
    Camada de Apresentao
    Introduo a CSS
    Introduo ao HTML
    Estilos HTML
    A partir do HTML 4.0, toda formatao de uma
    pgina HTML pode ser definida em uma folha de
    estilo;
    Quando um navegador l uma folha de estilo, o
    mesmo formata o documento HTML de acordo com
    as especificaes definidas na folha de estilo;
    Existem 3 formas para inserir uma folha de estilo:
    Folha de estilo externa;
    Folha de estilo interna;
    Estilos em linha;



    Introduo ao HTML
    Folha de estilo interna
    Pode ser usada se um documento HTML possui
    um nico estilo;
    Estilos internos so definidos entre as tags <head>
    e </head>, atravs da tag <style>;

    <html>

    <head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
    </style>
    </head>
    <body>
    ...
    Introduo ao HTML
    Folha de estilo externa
    Ideal quando o mesmo estilo aplicado em vrias
    pginas;
    Podemos mudar o estilo de 50 pginas HTML, por
    exemplo, a partir de um nico arquivo;

    <html>

    <head>
    <link rel="stylesheet" type="text/css"
    href="mystyle.css" />
    </head>
    <body>
    ...
    Introduo ao HTML
    Estilos em linha
    Estilos aplicveis em um elemento simples;
    Para utilizar estilos em linha, definimos o atributo
    style em uma tag especfica;
    O valor do atributo poder conter qualquer propriedade
    CSS;

    <html>
    <body>

    <p style=margin-left: 20px>
    Pargrafo com 20 pixels de margem esquerda
    </p>

    </body>
    </html>
    Introduo a CSS
    O que CSS?
    Sigla para Cascading Style Sheets;
    Estilos definem como os elementos HTML sero
    apresentados;
    Estilos foram adicionados no HTML 4.0 para
    resolver um problema:
    Separar o contedo da sua formatao!
    Folhas de estilo externas salvam tempo de
    trabalho;
    Folhas de estilo externas so armazenadas em
    arquivos .css;



    Introduo a CSS
    Sintaxe CSS
    Uma regra CSS possui duas partes: Um seletor e
    uma ou mais declaraes;




    O seletor normalmente um elemento HTML que
    ir seguir as especificaes definidas nas
    declaraes (h1, body, p, a, etc.);
    h1
    {
    Color: blue;
    Font-size: 12px;
    }
    Seletor
    Declarao
    Propriedade
    Valor
    Introduo a CSS
    Os seletores id e class
    Alm dos seletores de elementos HTML, CSS
    tambm permite que ns criemos nossos prprios
    seletores, chamados id e class;


    Introduo a CSS
    Os seletores id
    Seletores id so usados para especificar um estilo
    para um elemento nico;
    Seletores id formatam elementos HTML que os
    invocam a partir do atributo id;


    /* no css */

    #paragrafos
    {
    color: red;
    }
    <!-- no html -->


    <p id=paragrafos />
    Introduo a CSS
    Os seletores class
    Seletores class so usados para especificar um
    estilo para um grupo de elementos;
    Seletores class formatam elementos HTML que os
    invocam a partir do atributo class;


    /* no css */
    .centro
    {
    text-align:
    center;
    }
    <!-- no html -->


    <p class=centro />
    Introduo a CSS
    Os seletores class
    Tambm podemos especificar que apenas alguns
    tipos de elementos HTML devero ser afetados
    pela classe;


    /* no css */
    p.centro
    {
    text-align:
    center;
    }
    <!-- no html -->


    <p class=centro />
    Introduo a CSS
    A propriedade Background
    Utilizada para definir efeitos de fundo em um
    elemento CSS;
    Alguns possveis efeitos: background-color (cor de
    fundo), background-image (imagem de fundo),
    background-repeat (repetio da imagem de
    fundo);

    body
    {
    background-color: #b0c4de;
    }
    Introduo a CSS
    Formatao de texto com CSS
    Utilizamos a propriedade color para setar uma cor
    no texto de um determinado elemento;
    Com CSS, uma cor pode ser especificada com:
    Um valor hexadecimal (Ex.: #FF0000)
    Um valor RGB (Ex.: rgb(255,0,0))
    O nome da cor em ingls (Ex.: red)

    body
    {
    color: blue;
    }
    Introduo a CSS
    Alinhamento de texto com CSS
    Utilizamos a propriedade text-align para definir o
    alinhamento horizontal em textos;
    O texto pode ser centralizado (center), alinhado a
    esquerda ou direita (left ou right) ou justificado
    (justify);
    h1
    {
    text-align: right;
    }

    P
    {
    text-align: center;
    }
    Introduo a CSS
    Decorao de textos com CSS
    A propriedade text-decoration usada para setar
    ou remover decoraes em textos;
    a { text-decoration: none; }
    h1 { text-decoration: line-through; }
    h2 { text-decoration: underline; }
    h3 { text-decoration: overline; }
    h4 { text-decoration: blink; }

    Introduo a CSS
    Transformaes de textos
    A propriedade text-transform usada para manter
    textos em caixa alta ou caixa baixa;
    p { text-transform: uppercase; }
    #area { text-transform: lowercase; }
    #area2 { text-transform: capitalize; }
    Introduo a CSS
    Indentao
    A propriedade text-indent usada para especificar
    a indentao da primeira linha de um texto;
    p
    {
    text-indent: 50px;
    }
    Introduo a CSS
    Tipos de Fonte
    A propriedade font-family usada para setar o tipo
    de fonte a ser utilizado em um texto;
    Podemos definir vrios tipos de fonte para a
    mesma propriedade.
    Caso um ou mais navegadores no suporte um dos tipos
    listados;
    p
    {
    font-family: Times new Roman, Times, Serif;
    }
    Introduo a CSS
    Estilos de Fonte
    A propriedade font-style usada para definir o
    estilo de fonte a ser utilizado em um texto;
    p
    {
    font-style: italic;
    }

    #exemplo
    {
    font-style: oblique;
    }
    Introduo a CSS
    Tamanho de Fonte
    A propriedade font-size seta o tamanho do texto;
    p
    {
    font-size: 40px;
    }

    #exemplo
    {
    font-size: 14px;
    }
    Introduo a CSS
    Largura e altura de um elemento
    As propriedades width e height (largura e altura)
    setam, respectivamente, a largura e altura de um
    determinado elemento;
    p
    {
    width: 240px;
    height: 100px;
    }
    Introduo a CSS
    Bordas
    Atravs da propriedade border (borda) podemos
    inserir bordas em elementos CSS;
    p
    {
    border: 5px solid red;
    }

    #exemplo
    {
    border: 1px dotted blue;
    }

    Introduo a CSS
    Margens
    Atravs da propriedade margin podemos inserir
    margens em elementos CSS;
    #exemplo
    {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
    margin-right: 100px;
    }
    Introduo a CSS
    Padding
    A propriedade padding define o espao entre a
    borda de um elemento e seu contedo;
    #exemplo
    {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 100px;
    padding-right: 100px;
    }

    You might also like