Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Programação Web - Aula 10

    Enviado por

    Josué Campira
    2 visualizações25 páginas

    Título original

    Programação Web_Aula 10

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

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

    Programação Web - Aula 10

    Enviado por

    Josué Campira

    Direitos autorais:

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

    Aula 10

    Disciplina: PROGRAMAÇÃO
    WEB (PW)

    Docente: Higino Malate

    E-mail: h-gino@hotmail.com
    Meta

    Higino Malate
    Meta
    O tag <meta> provê meta dados (metadata) sobre o
    documento HTML. Meta dados não é exibido na
    página, mas é analisado pela máquina.
    Os elementos meta são tipicamente usados para
    especificar a descrição da página, palavra-chave, autor
    do documento, a última modificação/actualização, e
    outros meta dados.
    O tag <meta> deve ser inserido dentro do head.
    O meta dado pode ser usado pelo navegador (para
    saber como exibir o conteúdo, carregar a página),
    motores de busca (palavras-chaves), ou outros serviços
    da web.
    Higino Malate
    Meta
    Alguns motores de busca usam o nome e o conteúdo
    dos atributos dos elementos meta para indexar suas
    páginas.
    O seguinte elemento meta define a descrição da
    página:
    <meta name="description" content="Free Web tutorials
    on HTML, CSS, XML" />
    O seguinte elemento meta define as palavras-chaves
    para a página:
    <meta name="keywords" content="HTML, CSS, XML" />
    A intenção dos atributos name e content é de
    descrever o conteúdo da página.
    Higino Malate
    Meta
    Ex:
    <meta name="description" content="Free Web tutorials
    on html, css, javascript“ />

    <meta name="keywords" content="html, css, xml“ />

    <meta name="author" content=“Higino Malate" />

    <meta name="revised" content="2013/04/23" />

    <meta http-equiv="Refresh" content="5;


    URL=../www_w3schools_default.html" />

    Higino Malate
    CSS

    Higino Malate
    CSS
    CSS significa em inglês: Cascading Style Sheet, que
    traduzindo para o português fica: Folha de Estilo em
    Cascata.
    É usado para alterar cores, fontes, tamanho,
    espaçamentos, etc.

    Higino Malate
    Folhas de estilo podem economizar muito trabalho

    Folhas de estilo definem como elementos HTML são


    exibidos.
    Os estilos normalmente são guardados num ficheiro
    .css externo.
    Folhas de estilo externo faculta ao desenvolvedor
    mudar a aparência e o layout de todas as páginas num
    Web site, editando apenas um simples documento css.

    Higino Malate
    Ordem do CSS
    Que estilo será usado quando há mais de um estilo
    especificado para um elemento HTML?
    O último da lista tem maior prioridade:
    Padrão do navegador;
    Folha de extilo externa;
    Folha de estilo interna (dentro do tag <head>);
    Inline style (dentro de um elemento HTML).

    Higino Malate
    Sintaxe do CSS
    A sintaxe do CSS é composta por 3 partes:
    Selector
    Property
    Value

    selector {property: value}

    O selector é normalmente o elemento HTML que se


    pretende definir.
    O property é o atributo que se pretende mudar, e
    cada property pode levar um valor.

    Higino Malate
    Sintaxe do CSS
     Se o valor for múltiplas palavras, deve se por dentro de
    aspas:
     p {font-family: "sans serif"}

     Se deseja especificar mais de um property, deve se


    separar cada um com ponto e vírgula.
     p {text-align:center;color:red}

     Para fazer uma definição de estilo mais legível, pode se


    descrever cada property em cada linha:
    P
    { text-align: center;
    color: red;
    font-family: arial }
    Higino Malate
    Agrupando
    Pode se agrupar os selectors.
    Separando cada selector com vírgula.

    Ex: Todos os elementos do cabeçalho serão exibidos


    com a cor de texto verde:
    h1,h2,h3,h4,h5,h6
    {
    color: green;
    }

    Higino Malate
    Classe Selector
    Com a classe selector pode se definir diferentes estilos
    para o mesmo tipo de elemento HTML.
    Ex: Tendo 2 tipos de parágrafos no documento:
    Um parágrafo alinhado a direita;
    Outro parágrafo alinhado no centro.
    p.right{text-align: right}
    p.center{text-align: center}
    Usando o atributo class no elemento HTML:
    <p class="right">This paragraph will be right-aligned.</p>
    <p class="center">This paragraph will be center-aligned.</p>
    Para aplicar mais de uma classe por elemento, a sintaxe é:
    <p class="center bold">This is a paragraph.</p>
     O parágrafo acima tem a classe “center” e “bold”.

    Higino Malate
    Omitindo o nome do tag
    Pode se omitir o nome do tag no selector para definir o
    estilo que será usado por todos elementos HTML que
    tenham a mesma classe.
    No exemplo abaixo todos os elementos HTML com a
    class=“center” serão alinhados no centro.
    .center {text-align: center}
    Isto significa que os dois elementos abaixo seguirão a
    regra do selector “.center”.
    <h1 class="center">This heading will be center-aligned</h1>
    <p class="center">This paragraph will also be center-aligned.</p>
    O nome da classe não deve começar com um
    número, porque não vai funcionar no Mozilla…
    Higino Malate
    ID selector
    Só pode ser usado uma vez por cada página. Aplica-se
    um identificador único a um elemento HTML com o
    atributo id.
     <p id="footer">&copy; 200X The Company. All rights reserved.</p>

    Para nomear o elemento acima em CSS, proceda o


    nome de ID com cardenal (#).
    p#footer {
    padding: 20px;
    }
    Não se esqueça que o ID é usado para definir estilo
    de um elemento da página, e a classe pode ser usada
    para definir estilo de múltiplos elementos.

    Higino Malate
    Adicionar estilo a elementos com atributos particulares

    Pode se aplicar estilos a elementos HTML com


    atributos particulares.
    A regra do estilo abaixo irá igualar todos os elementos
    input que tenham o valor “text” no type:
    input[type="text"] {background-color: blue}

    Higino Malate
    Comentários CSS
    O comentário CSS começa com /* e termina com */ :

    /* Este é um comentário*/
    P
    {
    text-align: center;
    /* Este é outro comentário */
    color: black;
    font-family: arial
    }

    Higino Malate
    Como inserir Folha Estilo
    Quando o navegador lê a folha de estilo, ele formata o
    documento de acordo com a mesma.
    Existem 3 formas de inserir a folha de estilo:

    Folha de estilo externa (External Style Sheet);


    Folha de estilo interna (Internal Style Sheet);
    Inline Styles

    Higino Malate
    Folha de Estilo Externa
    Uma folha de estilo externa é ideal quando o estilo é
    aplicado a muitas páginas.
    Cada página tem que estar ligada a folha de estilo usando
    o tag <link>.
    O tag <link> deve estar dentro do <head>:
    <head>
    <link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
    </head>
    O navegador irá ler as definições de estilo do ficheiro
    mystyle.css.
    Uma folha de estilo externa pode ser escrita em qualquer
    editor de texto. O ficheiro não pode conter nenhum tag
    HTML. E deve ser salvo com a extensão .css.
    Higino Malate
    Exemplo:
    hr{color: sienna}
    p {margin-left: 20px}
    body {background-image:url("images/back40.gif")}

    Não deixe espaço entre o proterty value e as


    unidades.

    Se usares "margin-left: 20 px" no lugar de "margin-left:


    20px” só irá funcionar correctamente no IE6 e não
    funcionará no Mozilla Firefox ou Netscape.

    Higino Malate
    Folha de Estilo Interna
    Uma folha de estilo interna deve ser usada quando um
    único documento tem único estilo.
    Deve se definir a folha de estilo interna dentro do
    <head> usando o tag <style>.
    <head>
    <style type="text/css">
    hr {color: sienna}
    p {margin-left: 20px}
    body {background-image: url("images/back40.gif")}
    </style>
    </head>

    Higino Malate
    Navegadores Antigos
    Normalmente o navegador ignora tags desconhecidos.
    Navegadores antigos não suportam estilos, ignora o tag
    <style>, mas exibe o conteúdo do mesmo.
    É possível impedir que esta situação aconteça, escondendo o
    conteúdo com o comentário HTML:
    <head>
    <style type="text/css">
    <!--
    hr {color: sienna}
    p {margin-left: 20px}
    body {background-image: url("images/back40.gif")}
    -->
    </style>
    </head>
    Higino Malate
    Inline Styles
    Um inline style perde vantagens nas folhas de estilo por
    misturar conteúdo com apresentação.
    Use este método com limitação, como quando um estilo
    é aplicado a uma única ocorrência de um elemento.
    Para usar o inline styles terá que usar o atributo do estilo
    no tag relevante.
    O atributo do estilo pode conter qualquer propriedade
    (property) de CSS.
    O exemplo mostra como mudar a cor e a margem de um
    parágrafo:
    <p style="color: sienna; margin-left: 20px">This is a
    paragraph</p>

    Higino Malate
    ?
    Higino Malate
    É o suficiente por hoje!

    Higino Malate

    Você também pode gostar