Scribd
Carregar
15 visualizações27 páginas

4 - Web HTML CSS JS PHP

Enviado por

victor menezes
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
15 visualizações27 páginas

4 - Web HTML CSS JS PHP

Enviado por

victor menezes
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/ 27

DESENV.

WEB EM
HTML5, CSS,
JAVASCRIPT E PHP

Profº: Luiz Felipe Cirqueira dos Santos


LINGUAGEM DE MARCAÇÃO E ESTILOS ­CSS
INTRODUÇÃO
CSS (Cascading Style Sheets);
Linguagem de estilo utilizada para descrever a
apresentação de documentos HTML;
Controla o layout, cores, fontes, espaçamento e
outras características visuais dos elementos de uma
página web.
Importância

Separação de Conteúdo e Estilo;


Reutilização;
Melhoria da Experiência do Usuário;
Acessibilidade.
Separação de Conteúdo e Estilo

CSS permite separar o conteúdo


(HTML) da apresentação (CSS);
Facilita a manutenção e o design
consistente em várias páginas
Reutilização

Estilos podem ser reutilizados em


múltiplas páginas;
Reduz a repetição de código;
Permite atualizações eficientes.
Melhoria da Experiência do
Usuário
CSS melhora a aparência visual das
páginas;
Torna as páginas mais atraentes e
fáceis de navegar
Acessibilidade

Permite criar designs responsivos;


Adaptação a diferentes dispositivos e
tamanhos de tela;
Melhora a acessibilidade.
Sintaxe

Seletor: Indica o(s) elemento(s) HTML a serem estilizados;


Propriedade: Atributo do estilo que será alterado (ex.: color,
font-size);
Valor: Especifica o valor da propriedade (ex.: red, 16px).
SELEÇÃO DE ELEMENTOS
Seletores Simples

Seletores de Tipo: Seleciona todos os elementos de um


tipo específico;
Seletores de Classe: Seleciona elementos com uma classe
específica;
Seletores de ID: Seleciona um elemento com um ID
específico.
Seletores Simples
Seletores Combinados

Seletores de Descendente: Seleciona elementos dentro


de um elemento pai específico;
Seletores de Filho: Seleciona elementos que são filhos
diretos de um elemento pai;
Seletores de Grupo: Seleciona múltiplos elementos que
compartilham o mesmo estilo.
Seletores Combinados
Exemplo 1 - Parágrafo com CSS
Exemplo 2 - Estilizando uma Lista e um Botão
Exemplo 2 - Estilizando uma Lista e um Botão
FORMAS DE INCLUSÃO DO CSS NO HTML
Formas de Inclusão

CSS Inline: O CSS inline é aplicado diretamente no


elemento HTML através do atributo style;
CSS Interno: O CSS interno é colocado dentro de uma
tag <style> dentro do cabeçalho (<head>) do
documento HTML;
CSS Externo: O CSS externo é colocado em um arquivo
separado com extensão .css e vinculado ao documento
HTML com a tag <link>.
Inline
Interno
Externo
Desafio 1: Estilizando um Cabeçalho e Parágrafo
Crie uma página HTML com um cabeçalho (<h1>) e um
parágrafo (<p>). Estilize o cabeçalho para ter uma cor de
fundo e uma cor de texto diferente, e estilize o parágrafo
para ter uma margem, um espaçamento entre linhas e uma
cor de texto diferente.
Dicas:
Utilize seletores de tipo (h1 e p);
Aplique propriedades como background-color, color, margin, e
line-height.
Desafio 2: Estilizando uma Lista de Navegação
Crie uma lista de navegação (<ul>) com três itens (<li>).
Estilize a lista para que os itens apareçam horizontalmente,
sem marcadores de lista. Adicione um efeito de mudança de
cor quando o usuário passar o mouse sobre os itens.

Dicas:
Utilize display: inline para os itens da lista;
Remova os marcadores de lista com list-style-type: none;
Adicione um efeito hover com o seletor :hover.
Desafio 3: Estilizando um Formulário de Contato
Crie um formulário de contato com campos para Nome, Email e
Mensagem. Estilize os campos de entrada (<input> e <textarea>)
para ter uma borda, espaçamento interno (padding) e uma cor de
fundo. Estilize o botão de envio para ter uma cor de fundo, uma cor
de texto, e mudar de cor ao passar o mouse.
Dicas:
Utilize seletores de tipo (input, textarea, button);
Aplique propriedades como border, padding, background-color,
e color;
Utilize o seletor :hover para o efeito de mudança de cor no
botão.
Desafio 4: Desafio CSS Externo
Crie um arquivo CSS externo para estilizar um documento HTML
contendo um cabeçalho (<h1>), um parágrafo (<p>), e uma lista
(<ul>).

Dicas:
Crie um arquivo .css separado e adicione uma tag <link> no
<head> do documento HTML para vincular o arquivo CSS.
Dúvidas

Você também pode gostar