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
