Scribd Logo
Carica

Benvenuto in Scribd!

  • CSS - CSS em Cabecalhos

    Caricato da

    robrascribd
    27 visualizzazioni3 pagine

    Titolo originale

    CSS - CSS Em Cabecalhos

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    27 visualizzazioni3 pagine

    CSS - CSS em Cabecalhos

    Caricato da

    robrascribd

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    EFEITOS CSS EM CABEALHOS

    : :Introduo: :
    Voc pode obter efeitos decorativos, bastante interessantes nos cabealhos dos seus documentos HTML, com o uso das CSS (Folhas de Estilo em Cascata).

    : :Objetivo: :
    Este tutorial tem por objetivo apresentar as linhas gerais de uma tcnica CSS para obteno de efeitos decorativos em cabealhos HTML, com o uso da propriedade CSS border. Dominada a tcnica voc concluir que ela vlida para aplicao em qualquer elemento HTML.

    : : O elemento HTML cabealho e a propriedade CSS border: :


    A tag <h..> do HTML e a propriedade border das CSS, so conforme abaixo descrevo a ttulo de recordao ou de "refrescar" a memria: 1-) A tag <h> em HTML bem conhecida e como sabe-se, destina-se a marcar os cabealhos do documento e pode ser escrita em uma de suas 06 (seis) instncias: <h1> <h2>......<h6>. HTML, admitindo estilizao separada para cada uma delas e nas seguintes propriedades. border-width - espessura da borda; border-color - cor da borda. 2-) A propriedade border das CSS destina-se a formatar as 04 (quatro) bordas do elemento

    border-style - formato, tipo ou estilo da borda;

    : :A regra CSS para a propriedade border: :


    Uma regra CSS tpica para colocar as quatro bordas nos cabealhos <h2> de um documento mostro abaixo:
    h2 {

    HTML com a cor vermelha, espessura de 2 pixel e tipo slida contnua)tem sua sintaxe conforme

    border-width: 2px;

    border-style: solid; }

    border-color: #FF0000; /* todas as bordas vermelhas */

    /* todas as bordas contnuas */

    /* todas as bordas 2px */

    : :A estilizao para obteno do efeito: :


    Agora vamos nos valer do fato que as CSS permitem que voc estilize individualmente as quatro

    bordas, para declararmos valores diferentes para as bordas esquerda/direita e superior/inferior. A regra CSS acima passaria a ser escrita assim: h2 {
    border-left-width: 10px; border-top-width: 2px; border-style: solid; } border-right-width: 10px; /* borda direita =10px */ /* borda superior= 2px */ /* borda esquerda=10px */

    border-bottom-width: 2px; /* borda inferior= 2px */ border-color: #FF0000; /* 4 bordas contnuas */ /* 4 bordas vermelhas */

    Com isso obtemos um efeito no cabealho.

    : :Variando os efeitos: :
    E com um pouquinho de imaginao voc cria efeitos bem interessantes Experimente mais estas sugestes:

    colocar uma cor de fundo no elemento <h2>; declarar uma width: 200px para <h2>; colocar borda tracejada;

    colocar bordas somente inferior e a esquerda;

    e uma variedade de outras possibilidades.

    : :Um documento completo para voc estudar: :


    E a seguir uma pgina HTML completa com as regras CSS e HTML deste tutorial para voc tornar-se um "expert" em cabealhos estilizados com CSS.
    <html>

    "copiar e colar" no seu editor, visualizar no navegador e fazendo alteraes aprender mais e

    <head>

    <title>Cabecalhos com CSS</title> <style type="text/css"> h2 { border-left-width: 10px; border-top-width: 2px;

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    border-right-width: 10px; /* borda direita =10px */ /* borda superior= 2px */

    /* borda esquerda=10px */

    border-bottom-width: 2px; /* borda inferior= 2px */ border-style: solid; } border-color: #FF0000; </style> <body> /* 4 bordas contnuas */ /* 4 bordas vermelhas */

    </head> <h2>Cabealho com efeito CSS</h2> </body> </html>

    Potrebbero piacerti anche