Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML e Css

    Enviado por

    Marcos Tonon
    10 visualizações3 páginas

    Título original

    HTML e css

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOCX, 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 DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    10 visualizações3 páginas

    HTML e Css

    Enviado por

    Marcos Tonon

    Direitos autorais:

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

    HTML

    HTML (Hypertext Markup Language) é a linguagem de marcação usada para criar e exibir conteúdo na
    web. É a estrutura básica do seu site e permite que você organize e apresente seu conteúdo de forma
    semântica e estruturada. Vamos dar uma olhada em um exemplo simples de HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Meu Site</title>
    </head>
    <body>
    <header>
    <h1>Bem-vindo ao meu site</h1>
    <nav>
    <ul>
    <li><a href="#">Início</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
    </ul>
    </nav>
    </header>

    <main>
    <h2>Sobre mim</h2>
    <p>Meu nome é João e eu sou um desenvolvedor web. Eu amo criar sites incríveis e
    ajudar as pessoas a terem sucesso online.</p>
    </main>

    <footer>
    <p>© 2023 Meu Site. Todos os direitos reservados.</p>
    </footer>
    </body>
    </html>
    Neste exemplo, temos um documento HTML básico com uma estrutura padrão, que inclui as tags <!
    DOCTYPE html>, <html>, <head>, <title>, <body>, <header>, <nav>, <ul>, <li>, <a>, <main> e <footer>.
    Essas tags são usadas para definir a estrutura e o conteúdo da página, incluindo o cabeçalho, navegação,
    conteúdo principal e rodapé.

    CSS

    CSS (Cascading Style Sheets) é a linguagem usada para estilizar e formatar o conteúdo HTML. Ele permite
    que você crie uma aparência visual atraente para o seu site, incluindo coisas como cores, fontes, layout e
    animações. Aqui está um exemplo simples de CSS:

    body {
    font-family: Arial, sans-serif;
    background-color: #f1f1f1;
    }

    header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    }
    h1 {
    font-size: 36px;
    margin: 0;
    }

    nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    nav li {
    display: inline-block;
    margin-right: 20px;
    }

    nav li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    }

    main {
    padding: 20px;
    }

    h2 {
    font-size: 24px;
    margin-top: 0;
    }

    p{
    font-size: 16px;
    line-height: 1.5;
    }

    footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    }
    Este é um exemplo simples de CSS que estiliza o HTML que mostramos anteriormente. Ele usa seletores de
    classe e de tag para aplicar estilos a elementos específicos. Por exemplo, a regra body { font-family:
    Arial, sans-serif; background-color: #f1f1f1; } define a fonte e a cor de fundo para o corpo da

    O CSS é usado para definir a aparência e o estilo de uma página da web. Ele funciona selecionando
    elementos HTML e aplicando regras de estilo a eles. As regras de estilo são formadas por um seletor e um
    conjunto de propriedades e valores.

    Um exemplo simples de código CSS pode ter o seguinte formato:

    seletor {
    propriedade: valor;
    }: valor; }
     O seletor é usado para selecionar o elemento HTML que você deseja estilizar. Pode ser um seletor de tipo,
    seletor de classe, seletor de ID ou seletor de atributo.
     As propriedades são usadas para definir o estilo do elemento selecionado. As propriedades mais comuns
    incluem font-size, color, background-color, margin, padding e border.
     Os valores são definidos para cada propriedade e determinam como o estilo será aplicado. Os valores
    podem ser números, unidades, cores, URLs de imagem, etc.

    Aqui está um exemplo de código CSS com mais detalhes:

    body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    border: none;
    }

    h1 {
    font-size: 24px;
    color: #990000;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    }

    p{
    font-size: 14px;
    line-height: 1.5;
    color: #666666;
    margin-top: 10px;
    margin-bottom: 10px;
    }

    a{
    color: #0099ff;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    Neste exemplo, o seletor body é usado para estilizar o corpo da página. O font-family define a fonte
    usada para o texto, enquanto font-size define o tamanho do texto. color define a cor do texto, e
    background-color define a cor de fundo da página. margin, padding e border são usados para definir as
    margens, preenchimento e bordas do elemento.

    Os seletores h1 e p são usados para definir o estilo dos cabeçalhos e parágrafos na página. text-align é
    usado para definir a posição do texto, e line-height é usado para definir a altura da linha.

    O seletor a é usado para definir o estilo dos links na página. color define a cor do link, e text-
    decoration é usado para remover a sublinhado padrão do link. O seletor a:hover é usado para definir o
    estilo do link quando o mouse é movido sobre ele.

    Você também pode gostar