0% acharam este documento útil (0 voto)

114 visualizações

Apostila - HTML-CSS

O documento discute técnicas para organizar páginas HTML, incluindo modelos de caixas, tipos de caixas, tags semânticas de agrupamento e layouts com múltiplas colunas e tabelas/grade. Também aborda organização de folhas de estilo CSS e unidades de medida para design responsivo.

Enviado por

Emerson Alves

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

114 visualizações

Apostila - HTML-CSS

Enviado por

Emerson Alves

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 59

HTML, CSS, JavaScript

Aplicação em sistemas Web

Prof. Emerson A. Silva

Organizando a pagina HTML
› Modelo de Caixas
Organizando a pagina HTML
› Modelo de Caixas
Organizando a pagina HTML
› Modelo de Caixas
Organizando a pagina HTML
› Tipos de Caixa
– Caixa do tipo Block-Level

Um elemento dito block-level sempre vai se

iniciar em uma nova linha e vai ocupar a largura
total do elemento onde ele está contido. Se não
estiver contido em nenhuma outra caixa, ele vai
ocupar 100% da largura do <body>.
Organizando a pagina HTML
› Tipos de Caixa
– Caixa do tipo Block-Level
Organizando a pagina HTML
› Tipos de Caixa
– Caixa do tipo Inline-Level

Um elemento do tipo inline-level não vai

começar em uma nova linha, e sim no ponto
exato onde foram definidos. E a largura dele vai
ocupar apenas o tamanho relativo ao seu
conteúdo.
Organizando a pagina HTML
› Tipos de Caixa
– Caixa do tipo Inline-Level
Organizando a pagina HTML
› Tags de semânticas de agrupamento
– São tags para dividir as partes do nosso documento HTML

Header -
Cria áreas relativas a cabeçalhos.
Nav -
Define uma área que possui os links de navegação, um <nav> pode estar no <header>.
Main -
É um agrupador usado para delimitar o conteúdo principal do nosso site.
Section -
Cria seções na pagina. Uma seção é um agrupamento temático de conteúdos.
Article -
E um elemento que vai conter um conteúdo que pode ser lido de forma independente.
Aside -
Delimita um conteúdo periférico e complementar ao conteúdo principal de um artigo ou
seção.
Footer - Cria um rodapé para o site inteiro.
Organizando a pagina HTML
› Tags de semânticas de agrupamento
header
nav

main
section
article

article aside

footer
Organizando o CSS

O Meta Charset UTF-8 é um código importante utilizado

na codificação de caracteres em sites e páginas da web.
Ele define o conjunto de caracteres que serão utilizados
na exibição do conteúdo em um site, permitindo que
diferentes navegadores e dispositivos possam exibir
corretamente o texto e caracteres especiais presentes na
página.
Organizando o CSS
1. @charset “UTF-8”;
2. Importação de fontes online
3. Fontes baixadas
4. Root
5. Configuração padrão para todas as tags
Organizando o CSS
O que é o root do CSS

É uma pseudo-class CSS :root que equivale a raiz da pagina

HTML, ele representa o documento, como se fosse aplicado
à tag <html>.
Muito útil para declarar VARIÁVEIS para guardar valores
globais da pagina.
Organizando o CSS
O :root {} do CSS
Organizando o CSS
Dica para organizar e
encontrar mais fácil as
coisas no CSS.

Manter as tags no
CSS na mesma
ordem na qual
foram usadas no
arquivo HTML.
Organizando o CSS

https://github.com/caelum/apostila-html-css-
javascript/blob/master/14CA-responsividade-com-
viewport-e-unidades-relativas.md
Organizando a pagina HTML
› Layout de duas ou mais colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-count
Define a quantidade de colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-gap
Espaçamento entre as colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-rule-style
Estilo da linha entre as colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-rule-width
Configura a largura da linha entre as colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-rule-color
Estilo da linha entre as colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-rule
Configura largura, estilo e cor da linha entre as colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-span
Permite um elemento se espalhar por todas as colunas
Organizando a pagina HTML
› Layout de duas ou mais colunas

column-width
Configura a largura das colunas, o conteúdo terá quantas colunas
couberem, sem que nenhuma delas tenha largura menor que o valor
Organizando a pagina HTML
› Layout de Tabela/Grid
Organizando a pagina HTML
› Layout de Tabela/Grid
display: grid
grid-template-columns
column-gap
row-gap
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-template-areas
Organizando a pagina HTML
› Layout de Tabela/Grid
display: grid
grid-template-columns
Um elemento HTML se torna uma Tabela/Grid quando sua propriedade
display é definida como grid ou inline-grid.
Organizando a pagina HTML
› Layout de Tabela/Grid
Organizando a pagina HTML
› Layout de Tabela/Grid
column-gap / row-gap
Altera os espaços entre as células da tabela, column-gap é para configurar o espaço
entre as colunas e row-gap é para configurar o espaço entre as linhas da tabela.
Organizando a pagina HTML
› Layout de Tabela/Grid
grid-column-start
grid-column-end
grid-row-start
grid-row-end
Permite colocar um elemento ocupando mais de uma coluna ou linha, e também permite
posicionar algum elemento numa linha o coluna específica
Organizando a pagina HTML
› Layout de Tabela/Grid
grid-column-start / grid-column-end
grid-row-start / grid-row-end
Organizando a pagina HTML
› Layout de Tabela/Grid
grid-column-start / grid-column-end
grid-row-start / grid-row-end
Organizando a pagina HTML
› Layout de Tabela/Grid
grid-template-areas:
Sites Responsivos VS Mobile Dedicado
Sites Responsivos VS Mobile Dedicado
 Site único e responsivo ou sites dedicados?

Os sites únicos e responsivos são, basicamente, os sites que sofrem

adaptações do layout de acordo com o dispositivo em que é
visualizado.

Ou seja, cria-se um único modelo de site e, à medida que as

especificações da tela mudam, muda-se também a disposição e
tamanho dos elementos, pensando na especificidade de interação
para cada tipo de dispositivo.
Sites Responsivos VS Mobile Dedicado
 Site único e responsivo ou sites dedicados?

Já os sites mobile dedicados são uma espécie de variação do site

desktop, desenvolvido em uma estrutura paralela, que aparece para o
usuário somente quando requisitado de determinado dispositivo.

Se estiver acessando o site em

desktop, por exemplo, temos acesso
a um tipo de layout, mesmo que o
layout seja reajustado responsi-
vamente modificando as dimensões
do browser.

Exemplos: Dominus e Magalu

Sites Responsivos VS Mobile Dedicado
 Site único e responsivo ou sites dedicados?

Design:
Os layouts acabam sendo mais simples para facilitar a
adaptação dos elementos em diferentes tamanhos de tela.
Maior liberdade na criação do layout, uma vez que cada um
funcionará em paralelo

Domínio:
Utiliza um único domínio, facilitando o compartilhamento
de endereços web.
Utiliza subdomínios como ”m.”, redirecionados do domínio
principal, o que pode resultar em um pouco mais de tempo para
ser acessado pelo usuário.
Sites com Design Responsivo
Unidades de medida no CSS
Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas absolutas

➢ cm (centímetro)
➢ pt (ponto) pc (paica)
➢ São unidades de medidas são bem antigas,
usadas para padronização do tamanho das
fontes impressas em papel.
➢ 1pt é equivalente a 1.66 pixels
➢ 1pc é equivalente a 12 pontos.
➢ in (polegadas)
➢ px (pixels da tela)
Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas relativas
Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas relativas

REM – 1rem é igual ao tamanho padrão da fonte da raiz do

documento, normalmente 16px, assim 1rem = 16px;
EM – Semelhante ao REM mas se passeia no tamanho da fonte do
elemento pai;
Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas relativas

VW – (V) de view, ou seja, a tela do seu navegador, e W de width

(largura), assim, 100vw é 100% da largura visível do navegador;
VH – Semelhante ao VW mas o H é de height (altura), assim, 100vh é
100% da altura visível do navegador;
Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas relativas

Porcentagem (%)
Essa unidade de medida é um dos tipos mais utilizados, quando trabalhamos
com CSS. Isso porque, ela se adapta aos diferentes tamanhos de tela. O uso dessa
unidade é feito da seguinte forma: quando declaramos que um elemento terá 100% de
largura, estamos dizendo que esse mesmo elemento, tem a largura total do elemento
que o envolve.
Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas relativas

FR (para utilizar em grid)

A unidade fr representa uma fração do espaço disponível no container do grid.
Assim tornamos o layout com Grid mais flexível
Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas relativas

FR (para utilizar em grid)

Sites com Design Responsivo
Unidades de medida no CSS
Unidades de medidas relativas

FR (para utilizar em grid)

Sites com Design Responsivo
Media Queries
Sites com Design Responsivo
Media Queries

O que são as Media Queries?

É uma regra na CSS que te possibilita incluir um

bloco de propriedades se, e somente, se uma
determinada condição for verdadeira.
Sites com Design Responsivo
Media Queries
Breackpoints

Os breakpoints são pontos de interrupção no css.

Sites com Design Responsivo
Media Queries
Breackpoints

Os breackpoints mais utilizados

https://blog.apiki.com/media-queries-breakpoints-projetos-mobile-first/
Sites com Design Responsivo
Media Queries
Breackpoints
Os breackpoints mais utilizados

https://blog.apiki.com/media-queries-breakpoints-projetos-mobile-first/
Media queries do CSS – resoluções padrão,
breakpoints em CSS e tamanhos de telefone

https://www.freecodecamp.org/portuguese/news/tutorial-de-media-queries-do-css-resolucoes-padrao-breakpoints-do-css-e-tamanhos-de-telefone/
Media queries do CSS – resoluções padrão,
breakpoints em CSS e tamanhos de telefone

https://www.freecodecamp.org/portuguese/news/tutorial-de-media-queries-do-css-resolucoes-padrao-breakpoints-do-css-e-tamanhos-de-telefone/

Apostila - HTML-CSS

Enviado por

Apostila - HTML-CSS

Enviado por

HTML, CSS, JavaScript

Aplicação em sistemas Web

Prof. Emerson A. Silva

Um elemento dito block-level sempre vai se

Um elemento do tipo inline-level não vai

O Meta Charset UTF-8 é um código importante utilizado

É uma pseudo-class CSS :root que equivale a raiz da pagina

Os sites únicos e responsivos são, basicamente, os sites que sofrem

Ou seja, cria-se um único modelo de site e, à medida que as

Já os sites mobile dedicados são uma espécie de variação do site

Se estiver acessando o site em

Exemplos: Dominus e Magalu

REM – 1rem é igual ao tamanho padrão da fonte da raiz do

VW – (V) de view, ou seja, a tela do seu navegador, e W de width

FR (para utilizar em grid)

FR (para utilizar em grid)

FR (para utilizar em grid)

O que são as Media Queries?

É uma regra na CSS que te possibilita incluir um

Os breakpoints são pontos de interrupção no css.

Os breackpoints mais utilizados

Você também pode gostar