Scribd
Carregar
6 visualizações

HTML CSS

O documento fornece uma introdução ao HTML e CSS, abordando sua estrutura básica, elementos, semântica e propriedades. Inclui tópicos como formulários, listas, tabelas, seletores, layout e animações. Também apresenta conceitos avançados como Grid Layout e Flexbox, além de media queries para responsividade.

Enviado por

Carlos Weber
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
6 visualizações

HTML CSS

O documento fornece uma introdução ao HTML e CSS, abordando sua estrutura básica, elementos, semântica e propriedades. Inclui tópicos como formulários, listas, tabelas, seletores, layout e animações. Também apresenta conceitos avançados como Grid Layout e Flexbox, além de media queries para responsividade.

Enviado por

Carlos Weber
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 6

1

HTML BÁSICO

• Estrutura Básica
<!DOCTYPE html>: Declaração do tipo de documento. Deve ser a primeira linha
do código HTML.
<html>: Elemento raiz que contém todo o conteúdo HTML.
<head>: Contém metadados sobre o documento, como título e links para
arquivos CSS.
<title>: Define o título do documento, que aparece na aba do navegador.
<body>: Contém o conteúdo visível da página, como texto, imagens e outros
elementos.
<main>: Define o conteúdo principal do documento.

• Textos e Parágrafos
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Cabeçalhos, variando de <h1> (mais
importante) a <h6> (menos importante).
<p>: Define um parágrafo.
<br>: Quebra de linha.
<hr>: Linha horizontal, geralmente usada para separar seções.

• Listas
<ul>: Lista não ordenada.
<ol>: Lista ordenada.
<li>: Item de lista, utilizado dentro de `<ul>` ou `<ol>`.

• Links e Imagens
<a>: Define um hyperlink.
<img>: Insere uma imagem. Deve ter o atributo `src` (fonte da imagem) e
geralmente o atributo `alt` (texto alternativo).
2

• Tabelas
<table>: Define uma tabela.
<tr>: Define uma linha da tabela.
<td>: Define uma célula de dados na tabela.
<th>: Define uma célula de cabeçalho na tabela.
<caption>: Adiciona uma legenda à tabela.

• Formulários
<form>: Define um formulário.
<input>: Define um campo de entrada. Pode ter vários tipos, como `text`,
`password`, `checkbox`, `radio`, etc.
<textarea>: Define uma área de texto multilinha.
<button>: Define um botão.
<select>: Cria uma lista suspensa.
<option>: Define uma opção dentro de um `<select>`.

• Semântica
<header>: Define o cabeçalho de um documento ou seção.
<nav>: Define uma seção de navegação.
<section>: Define uma seção genérica no documento.
<article>: Define um artigo ou conteúdo independente.
<footer>: Define o rodapé de um documento ou seção.
<aside>: Define conteúdo lateral ou complementar.

• Metadados e Links
<meta>: Fornece metadados sobre o documento, como charset e descrições.
<link>: Define um link para um recurso externo, geralmente utilizado para
vincular arquivos CSS.
3

HTML AVANÇADO

• Formulário
<input type="date">: Permite a seleção de uma data.
<input type="color">: Permite a seleção de uma cor.
<input type="range">: Permite a seleção de um valor dentro de um intervalo.
<datalist>: Fornece uma lista de opções para um campo de entrada.
<output>: Define um resultado de cálculo.

• Semântica
<details>: Cria um widget que pode ser expandido ou contraído.
<summary>: Fornece um resumo visível para um <details>.
<dialog>: Define uma caixa de diálogo ou pop-up.

• Mídia
<video>: Insere um vídeo no documento.
<source>: Define múltiplas fontes para elementos de mídia (<video>, <audio>).
<track>: Adiciona faixas de texto (como legendas) para elementos de mídia.
4

CSS BÁSICO

• Seletores

element: Seleciona todos os elementos do tipo especificado (p, div, h1, etc.).

.classe: Seleciona todos os elementos com a classe especificada (.highlight).

#id: Seleciona um único elemento com o ID especificado (#header).

• Propriedades
color: Define a cor do texto.
font-family: Define a fonte do texto.
font-size: Define o tamanho da fonte.
font-weight: Define a espessura da fonte (normal, bold, etc.).
text-align: Define o alinhamento do texto (left, right, center, justify).
float: Define se o elemento deve flutuar à esquerda ou à direita.

• Cor e Fundo
background-color: Define a cor de fundo.
background-image: Define uma imagem de fundo.
background-size: Define o tamanho da imagem de fundo (cover, contain,
valores em pixels).

• Layout e Espaçamento
margin: Define a margem externa ao redor de um elemento.
padding: Define o preenchimento interno dentro de um elemento.
border: Define a borda ao redor de um elemento.

• Display e Position
5

display: Define o comportamento de exibição do elemento (block, inline, inline-


block, none).
position: Define o tipo de posicionamento (static, relative, absolute, fixed).
top, right, bottom, left: Define o posicionamento dos elementos quando position
é relative, absolute ou fixed.

• Tamanho e Altura
width e height: Define a largura e altura dos elementos.
max-width e max-height: Define o tamanho máximo do elemento.

• Bordas e Textura
border-radius: Define bordas arredondadas.
box-shadow: Define uma sombra ao redor do elemento.
text-shadow: Define uma sombra para o texto.
6

CSS AVANÇADO

• Grid Layout
display: grid: Define um contêiner de grid.
grid-template-columns e grid-template-rows: Define o número e o tamanho
das colunas e linhas do grid.
grid-area: Define a área onde um item de grid deve ser colocado.
grid-gap: Define o espaçamento entre linhas e colunas.

• Flexbox
flex: Define como um item pode crescer ou encolher em relação aos outros itens
no contêiner flexível.
align-self: Alinha um item individualmente dentro do contêiner.
flex-wrap: Define se os itens devem quebrar em uma nova linha se não caberem
no contêiner.

• Animações e Transições
@keyframes: Define a sequência de uma animação.
animation: Aplica uma animação a um elemento.
transition: Define como a mudança de propriedade deve ser animada.

• Media Queries
@media: Aplica estilos com base em condições de mídia conforme tamanho da
tela.
@supports: Aplica estilos com base em recursos suportados.

Você também pode gostar