Scribd Logo
Upload

Welcome to Scribd!

  • Av2 Resumo HTML

    Uploaded by

    Bella De Luxo
    2 views7 pages
    Av2 Resumo HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    ODT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Av2 Resumo HTML

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views7 pages

    Av2 Resumo HTML

    Uploaded by

    Bella De Luxo
    Av2 Resumo HTML

    Copyright:

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

    O atributo class

    O atributo class pode estar presente em uma, ou mais, tags HTML, sendo assim, você pode definir que uma
    determinada classe terá cor do texto em vermelho e distribuir essa classe em milhares de elementos da página.

    não há o menor problema em utilizar uma mesma classe em vários elementos. No trecho acima utilizamos
    class=”cor_vermelha” em dois elementos, uma <div> e um <p>.Um elemento HTML também pode estar ligado a
    várias classes, para isso basta separar os nomes das classes por um espaço dentro do valor do atributo class.

    O atributo ID
    O atributo ID é muito semelhante às classes, também pode selecionar elementos em um documento HTML, porém,
    você só pode identificar um elemento por ID.

    Depois que você criou este atributo id=”meu_id”, o elemento <p> tem o identificador meu_id (que é como uma
    impressão digital para um elemento do seu documento HTML), nenhum outro elemento poderá ter o mesmo
    atributo.

    Métodos para inserir CSS em Tags HTML


    Existem três maneiras para inserir CSS em um documento HTML, em linha, interno e através de um arquivo CSS.
    • Em linha: podemos utilizar o atributo style para inserir CSS diretamente em uma tag HTML;
    • Interno: podemos utilizar a tag <style> dentro da <head> do documento para inserir CSS;
    • Através de um arquivo de CSS: Esta é a solução mais correta e mais utilizada para inserir CSS em um
    documento HTML.Exemplos:
    Em linha:
    “Linkando” o CSS no HTML

    Depois de criar seu arquivo CSS, vamos “linkar” (perdão pelo neologismo) este arquivo em um documento HTML,
    para isso basta utilizar a tag <link> dentro da <head> do documento:
    Para testar se tudo funcionou, digite o seguinte no seu arquivo CSS:

    Seletores CSS
    no início desse artigo falamos sobre os atributos class e id, e agora eles vão começar a fazer sentido
    para você. Através desses atributos é que você “seleciona” uma tag HTML do documento e faz suas
    modificações apenas nessa tag escolhida.
    Selecionando um elemento diretamente
    Como eu disse no começo da aula, você também pode selecionar um elemento diretamente, mesmo que este
    não tenha nenhuma classe ou ID, no entanto, tome bastante cuidado ao fazer isso, todos os elementos de
    mesma espécie serão afetados no documento.
    Para selecionar um elemento diretamente, simplesmente digite o nome da tag sem os sinais de </>:
    Convenção de nomes das classes e IDs

    Sempre que for criar uma nova classe ou ID em CSS e no seu atributo HTML, utilize sempre essas regrinhas:
    • Sempre utilize letras minúsculas;
    • Sempre inicie o nome com uma letra;
    • Utilize apenas letras, números, underline (_) e hífen (-) para nomes de classes;
    • Dê nomes realistas, por exemplo: “topo-do-site” é muito mais realista e detalhista do que “tds”;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="meuestilo.css">
    <title>Título</title>
    </head>
    <body>
    <div class="topo">
    <h1 class="titulo-topo">Meu site</h1>
    <p class="paragrafo-topo">Aprendi no TutsUP.</p>
    </div>
    <div class="corpo">
    <h1 class="titulo-corpo">Corpo do meu site</h1>
    <p class="paragrafo-corpo">Aprendi no TutsUP.</p>
    </div>
    <div class="barra-lateral">
    <h1 class="titulo-lateral">Barra lateral do meu site</h1>
    <p class="paragrafo-lateral">Aprendi no TutsUP.</p>
    </div>
    <div class="rodape">
    <h1 class="titulo-rodape">Rodapé do meu site</h1>
    <p class="paragrafo-rodape">Aprendi no TutsUP.</p>
    </div>
    </body>
    </html>

    Copie e cole nos seus arquivos:

    HTML
    CSS

    You might also like