Apostila - HTML-CSS

HTML, CSS, JavaScript
Aplicação em sistemas Web
Prof. Emerson A. Silva

Organizando a pagina HTML
› Modelo de Caixas
› 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>.
› Tipos de Caixa
– Caixa do tipo Block-Level
› 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.
› Tipos de Caixa
– Caixa do tipo Inline-Level
› 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.
› 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
› 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
column-count
Define a quantidade de colunas
column-gap
Espaçamento entre as colunas
column-rule-style
Estilo da linha entre as colunas
column-rule-width
Configura a largura da linha entre as colunas
column-rule-color
Estilo da linha entre as colunas
column-rule
Configura largura, estilo e cor da linha entre as colunas
column-span
Permite um elemento se espalhar por todas as 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
› 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
display: grid
grid-template-columns
Um elemento HTML se torna uma Tabela/Grid quando sua propriedade
display é definida como grid ou inline-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.
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
grid-column-start / grid-column-end
grid-row-start / grid-row-end
grid-column-start / grid-column-end
grid-row-start / grid-row-end
grid-template-areas:
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.
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

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
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)
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;
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;
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.
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


Media Queries
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.
Media Queries
Breackpoints
Os breakpoints são pontos de interrupção no css.

Media Queries
Breackpoints
Os breackpoints mais utilizados
https://blog.apiki.com/media-queries-breakpoints-projetos-mobile-first/
Media Queries
Breackpoints
Media Queries
Breackpoints
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

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila - HTML-CSS

Enviado por

Direitos autorais:

Formatos disponíveis

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