Scribd Logo
Importer

Bienvenue sur Scribd !

  • ABFFCC85 D 01

    Transféré par

    NayaraToscano
    19 vues3 pages

    Titre original

    ABFFCC85d01

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    19 vues3 pages

    ABFFCC85 D 01

    Transféré par

    NayaraToscano

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 3

    Centro Federal de Educação Tecnológica do Rio Grande do Norte

    Unidade de Ensino de Currais Novos


    Curso Técnico Subseqüente em Sistemas de Informação

    Disciplina: Autoria WEB

    Prof. Fabiano Papaiz

    Assunto: Adicionando um pouco de estilo ao nosso HTML

    No estudo anterior aprendemos que o HTML nos oferece uma maneira de descrever
    como será a estrutura das nossas páginas. Quando um browser exibe o nosso código HTML, ele
    utilizará seu próprio estilo padrão para apresentar a estrutura definida em nosso arquivo.
    Mas o estilo padrão dos browsers não é muito, digamos, apresentável.
    É aí que entram as famosas CSS, que nos oferecem uma maneira de informar ao
    browser como os elementos do nosso HTML devem ser exibidos, ou seja, dizemos para o browser
    usar o nosso estilo e não o dele.
    CSS é a abreviação para Cascading Style Sheets, traduzindo teremos Folhas de Estilo
    em Cascata.
    Para adicionarmos um pouco de estilo à nossa página devemos incluir no código HTML
    o elemento <style> dentro da seção de cabeçalho(<head>).
    Ficará dessa forma:

    Observações:
    ● o elemento <style> deve ser colocado dentro do <head>
    ● como os outros elementos, ele também possui uma tag de fechamento, que é
    </style>
    ● a tag <style> precisa de um atributo chamado type, o qual informa ao browser o
    tipo do estilo que estamos utilizando. Para estilos CSS sempre usamos o tipo "text/css".

    Agora vamos escrever uma CSS para dar um pouco de estilo ao nosso arquivo HTML
    "pagina01.html" .
    Não se preocupe muito ainda com a sintaxe do CSS, que é bem diferente do HTML.
    Apenas escreva o código abaixo: (futuramente veremos o CSS em mais detalhes)

    1
    O resultado será esse:

    Antes era assim:

    Perceba que com o nossso pequeno código CSS conseguimos fazer com que o browser
    exibisse nossa página com um tipo de fonte, cor de fundo e margens diferentes.
    Eu sei que o nosso estilo não é maravilhoso, mas convenhamos, ficou com uma
    aparência melhor que a do arquivo original.
    No nosso CSS, colocamos no início o identificador body e depois digitamos o código
    entre o { e o }. Isso faz com que o nosso estilo seja aplicado a todos os elementos dentro das tags
    <body>....</body> do nosso HTML, portanto, quando definimos a fonte para Arial estamos
    dizendo que esta será a fonte que o browser irá utilizar para os elementos dentro do body.
    Vamos fazer uma pequena análise do que fazem algumas linhas do nosso código CSS:
    Instrução O que faz
    background-color: #d2b48c; Define a cor de fundo - no caso a da página (body)
    margin-left: 10%; Define a margem esquerda
    margin-right: 10%; Define a margem direita
    font-family: arial; Define a fonte a ser usada no texto, no caso a fonte Arial

    2
    Como podemos perceber até aqui, o HTML e a CSS são utilizados para finalidades
    completamente diferentes.
    Usamos o HTML para definir a estrutura dos elementos da nossa página, já o CSS, é
    utilizado para definirmos o estilo (aparência) desses elementos.
    Quando inserimos o estilo na nossa página de exemplo, a estrutura dos elementos
    permaneceu a mesma, continuamos com os mesmos títulos e parágrafos. Alteramos apenas a forma
    como eles foram apresentados (fontes, cores, margens etc).

    Bom, por enquanto isso é tudo o que precisamos saber sobre o CSS!
    Mais adiante nos aprofundaremos neste assunto.

    Vous aimerez peut-être aussi