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
