Scribd
Carregar
7 visualizações

HTML_CSS

O documento aborda o modelo de caixa (box model) em design web, detalhando suas partes como conteúdo, padding, border e margin, além de discutir as propriedades de display, como inline e block. Também apresenta elementos semânticos do HTML5, como <header>, <section>, <nav> e <footer>, e a importância da documentação para aprender sobre tags e propriedades. Por fim, menciona a tag <img> para inserção de imagens e as propriedades de posicionamento para mover elementos na página.

Enviado por

marcelomarquescosta02
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
7 visualizações

HTML_CSS

O documento aborda o modelo de caixa (box model) em design web, detalhando suas partes como conteúdo, padding, border e margin, além de discutir as propriedades de display, como inline e block. Também apresenta elementos semânticos do HTML5, como <header>, <section>, <nav> e <footer>, e a importância da documentação para aprender sobre tags e propriedades. Por fim, menciona a tag <img> para inserção de imagens e as propriedades de posicionamento para mover elementos na página.

Enviado por

marcelomarquescosta02
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 39

BOX MODEL

• Caixas: Uma interface web é composta de diversas caixas que organizam o


conteúdo.
BOX MODEL
• Content (conteúdo):Define a largura inicial da caixa .
• Padding (preenchimento):Separa o conteúdo das bordas da caixa. É a
margem interna.
• Border (borda):Define bordas para a caixa.
BOX MODEL
• Margin (margem):Define a distância entre uma caixa e outra.
• Width (largura): A largura total da caixa, por padrão é o somatório do
conteúdo + padding (left/right) + border (left/right).
• Height (altura): A altura total da caixa, por padrão é o somatório do
conteúdo + padding (top/bottom) + border (top/bottom).
TOP, RIGHT, BOTTOM, LEFT
• Propriedades como margin, padding e border permitem
definirmos valores diferentes para cada um dos lados da
caixa (box model).
DISPLAY INLINE E BLOCK

• Define como a caixa (box model) irá se comportar.


• Inline: Respeita o fluxo da escrita sem iniciar uma nova linha, não é possível
definir valores de width, height, margin (top/bottom) e etc. É o estilo padrão.
• Block: Inicia uma nova linha e não permite que outros elementos sejam
posicionados em sua linha. Aceita todas as propriedades do box model.
NONE E INLINE-BLOCK

• None: Remove o elemento completamente da tela


• inline-block: O elemento continua inline, mas passa a receber as propriedades
do box model
DISPLAY EXERCÍCIO:
REFERÊNCIA : HTTPS://GITHUB.COM/PROGRS/WEB
LISTAS

• Listas ordenadas;
• Listas não ordenadas;
LISTA ORDENADA
LISTA NÃO ORDENADA
EXEMPLO DE CÓDIGO

• https://github.com/ProgRS/listas
ELEMENTOS SEMÂNTICOS DA HTML5

• Marcações que agregam mais significado ao HTML


• <header>
• <section>
• <main>
• <nav>
• <footer>
<HEADER>
• O <header> é utilizado para representar o cabeçalho de um documento ou
seção declarado no HTML. Nele podemos inserir elementos de <h1> a <h6>,
até elementos para representar imagens, parágrafos ou mesmo listas de
navegação.
<SECTION>
• O elemento <section> representa uma seção dentro de um documento e
geralmente contém um título, o qual é definido por meio de um dos elementos
entre <h1> e <h6>. Podemos utilizar o <section>, por exemplo, para
descrever as seções/tópicos de um documento.
<NAV>

• O elemento <nav> é utilizado quando precisamos representar um


agrupamento de links de navegação, que, por sua vez, são criados com os
elementos <ul>, <li> e <a>.
<FOOTER>

• O elemento <footer> representa um rodapé de um documento, como a área


presente no final de uma página web. Normalmente é utilizado para
descrever informações de autoria, como nome e contato do autor, e data de
criação do conteúdo.
CÓDIGO

• https://github.com/ProgRS/elemento_semanticos
DOCUMENTAÇÃO

• Existem centenas de tags e propriedades, é quase impossível você gravar


todas elas. Por isso consultamos uma documentação.
• W3C: https://www.w3.org/TR/
• Mozilla: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
EXERCÍCIO

• Busque 3 tags HTML e 3 propriedades CSS na documentação que já vimos


sobre e leia as suas especificações.
IMG
• A tag <img> é utilizada para
adicionarmos imagens à nossa
página
• src: Atributo que define o
caminho da imagem
• alt: Texto alternativo que será
lido por leitores de
tela(acessibilidade) , robôs e
que irá aparecer caso a
imagem não carrege
POSICIONAMENTO
• position:fixed;
• Ficara sempre visível, mesmo que o usuário utilize a barra de scroll
• https://codepen.io/pen/
• Para fixar um elemento na pagina utilizamos a propriedade position com o
valor fixed
• No arquivo html: atribua a classe div_fixa
• No css: atribua position:fixed a classe criada
MOVENDO ELEMENTOS

• top:
• bottom:
• left:
• right:
• Estas propriedades recebem qualquer dimensão aceita pelo css, porem a
mais usada pixel
MOVENDO ELEMENTOS NA PARTE INFERIOR DA
PÁGINA
TOP E LEFT

• top e left também são usadas para mover elementos com position:
• div 1 esta posicionada à 450 pixel do topo e 300 pixel da borda esquerda
da página
•
RESUMO TOP E BOTTOM

• Top e bottom são responsáveis por mover o elemento com position na vertical
RESUMO LEFT E RIGHT

• Responsável por mover o elemento com position na horizontal


SELETORES EXERCÍCIO:
HTTPS://GITHUB.COM/PROGRS/PROJETO_FINAL
REFERÊNCIA: HTTPS://GITHUB.COM/PROGRS/BARBEARIA-
STYLUS
RESUMO

• top: move elementos na vertical, de cima para baixo


• bottom: move elementos na vertical, de baixo para cima
• left: move elementos na horizontal, da esquerda para direita
• right: move elementos na horizontal, da direita para esquerda

Você também pode gostar