aula_03_CSS

breadcrumb-separator

FSV

Welton Fabricio de Brito Ribeiro

em 31/03/2015

Conteúdos escolhidos para você

CSS completo (1)

CSS completo (1)

ESTÁCIO

Introdução a CSS-Fundamentos

Introdução a CSS-Fundamentos

Desenvolvimento Web CSS

Desenvolvimento Web CSS

UFF

Apostila - CSS3

Apostila - CSS3

UNIP

Apostila - CSS3

Apostila - CSS3

UNIP

Perguntas dessa disciplina

Uma equipe iniciante foi encarregada de publicar a primeira versão de uma página institucional para um pequeno escritório de arquitetura. O grupo d...

Anhanguera

Para que o elemento h1 do HTML seja formatado com cor vermelha e fonte tamanho 9 pixels, a declaração correta em CSS é: Questão 1Resposta a. h1 {color

Uma floricultura decidiu reestruturar seu catálogo digital para que os cartões de produtos se ajustassem melhor a diferentes larguras de tela. Na v...

Anhanguera

Uma equipe iniciante foi encarregada de publicar a primeira versão de uma página institucional para um pequeno escritório de arquitetura. O grupo deci

Anhanguera

Uma equipe iniciou a refatoração de um site institucional antigo. O HTML continha atributos de cor, largura e posicionamento diretamente nos elemen...

UNOPAR

Material

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩

Cadastre-se ou realize login

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Conteúdos escolhidos para você

CSS completo (1)

CSS completo (1)

ESTÁCIO

Introdução a CSS-Fundamentos

Introdução a CSS-Fundamentos

Desenvolvimento Web CSS

Desenvolvimento Web CSS

UFF

Apostila - CSS3

Apostila - CSS3

UNIP

Apostila - CSS3

Apostila - CSS3

UNIP

Perguntas dessa disciplina

Uma equipe iniciante foi encarregada de publicar a primeira versão de uma página institucional para um pequeno escritório de arquitetura. O grupo d...

Anhanguera

Para que o elemento h1 do HTML seja formatado com cor vermelha e fonte tamanho 9 pixels, a declaração correta em CSS é: Questão 1Resposta a. h1 {color

Uma floricultura decidiu reestruturar seu catálogo digital para que os cartões de produtos se ajustassem melhor a diferentes larguras de tela. Na v...

Anhanguera

Uma equipe iniciante foi encarregada de publicar a primeira versão de uma página institucional para um pequeno escritório de arquitetura. O grupo deci

Anhanguera

Uma equipe iniciou a refatoração de um site institucional antigo. O HTML continha atributos de cor, largura e posicionamento diretamente nos elemen...

UNOPAR

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET Prof. Cayo Fontana
CSS
FOLHAS DE ESTILOS EM CASCATA
SUMÁRIO
 Introdução
 Sintaxe
 Comentário
 Formas de Declaração
 Seletores
 Precedência e Especificidade
 Cascata e Herança
INTRODUÇÃO
No passado, exclusivamente nas questões de definição de leiaute na web, a 
estilização do HTML era feito no próprio HTML, com a utilização de algumas tags
para estilos, como a tag <font>
<h1>
<font color="#00FF00">Título</font>
</h1>
À princípio, não parece estranho definir estilos com elementos HTML específicos para 
tal aplicabilidade...
INTRODUÇÃO
Imagine que você possua um site com:
 40 diferentes conteúdos (arquivos HTML’s distintos)
 4 títulos em média para cada arquivo
 160 tags de definição de fonte no total (código inflado)
Seu cliente deseja que você altere o tipo da fonte e a cor dos títulos...
 Isso dará um pouco de trabalho!
Solução proposta: CSS (Cascading Style Sheet) – Folha de Estilos em Cascata
INTRODUÇÃO
Definição
 Linguagem de Folha de estilos utilizada para padronizar as definições e 
configurações de leiaute no (X)HTML (pode-se utilizar em documentos XML)
 CSS define como e qual é a forma de apresentação em que os elementos HTML, 
em um dado documento, serão exibidos
Vantagens
 Segregação de código HTML (estruturação) de código de estilização
 Documentos e códigos HTML mais coesos e “limpos”
 Facilidade para alterar um conjunto de elementos (independente do tipo)
SINTAXE
Estrutura simples: declaração de propriedades e valores separados por um sinal de 
dois pontos “:”, e cada propriedade é separada por um sinal de ponto e vírgula “;”
background-color: yellow;
color: blue;
Estas definições de propriedades exibirão o conteúdo de elemento(s) HTML com o 
texto na cor azul e com o fundo amarelo
Existem 3 diferentes maneiras de estilizar conteúdo(s) e documento(s) HTML utilizando 
CSS
SINTAXE
Estrutura simples: declaração de propriedades e valores separados por um sinal de 
dois pontos “:”, e cada propriedade é separada por um sinal de ponto e vírgula “;”
background-color: yellow;
color: blue;
Estas definições de propriedades exibirão o conteúdo de elemento(s) HTML com o 
texto na cor azul e com o fundo amarelo
Existem 3 diferentes maneiras de estilizar conteúdo(s) e documento(s) HTML utilizando 
CSS
SINTAXE
Atributo Style
O atributo style é um atributo HTML global utilizado para definições de estilos 
diretamente no elemento HTML
<p style="color: blue; background-color: yellow;">
O conteúdo será exibido com fonte em azul e fundo amarelo.
</p>
SINTAXE
Atributo Style
O atributo style é um atributo HTML global utilizado para definições de estilos 
diretamente no elemento HTML
<p style="color: blue; background-color: yellow;">
O conteúdo será exibido com fonte em azul e fundo amarelo.
</p>
Não recomendado!
 Não apresenta as vantagens da utilização do CSS no HTML
SINTAXE
Elemento (Tag) Style
Outra maneira de se utilizar o 
CSS é declarando suas 
propriedades dentro de uma 
tag <style>
Utilizando um Seletor CSS, foi 
estabelecido que todo elemento 
p será apresentado com fonte 
azul e fundo amarelo
<style>
p {
background-color: yellow;
color: blue;
}
</style>
<p>
O conteúdo será exibido com 
fonte em azul e fundo amarelo.
</p>
SINTAXE
Arquivo Externo
Definições de CSS em um arquivo fisicamente separado do arquivo HTML
Necessário informar, no HTML atual, uma ligação com o documento de estilos
Um documento de folha de estilos em cascata, possui a extensão .css
Vantagens
 Projeto com maior organização (HTML coeso e limpo)
 Reusabilidade de definições de estilos para elementos HTML
 Desempenho na manutenibilidade do código
SINTAXE
Arquivo Externo
Ligação entre os arquivos HTML e CSS 
deve ser feita dentro da tag <head> 
do HTML
<link rel="stylesheet" 
href="estilos.css">
O conteúdo de um arquivo CSS recebe 
apenas a definição dos estilos:
Exemplo de arquivo CSS:
p {
background-color: yellow;
color: blue;
}
Elemento
HTML
Propriedade
CSS
Valor da
Propriedade
COMENTÁRIO
Comentários em código CSS são definidos pela declaração composta de dois 
caracteres: a barra “/” e o asterisco “*”
Para iniciar um comentário, a composição da declaração é feita pelo caracter barra
Inserção de comentários de código CSS é através de 
SELETORES
São elementos de ligação entre o documento HTML e o estilo CSS
O seletor especifica qual(is) elemento(s) receberão o tratamento definido no bloco 
de declaração
A declaração configura o efeito que o seletor terá, e é composta por um par, ou 
conjunto de pares, propriedade: “valor”, dentro de um bloco de declaração
O bloco de declaração é aberto com uma chave esquerda “{” e fechado com uma 
chave direita “}”
Um bloco de declaração é sempre precedido de um – ou um conjunto – de seletor
SELETORES
Seletor Universal
O seletor universal corresponde a qualquer tipo de elemento
Em sua declaração, utiliza-se o asterisco para representa-lo
Caso ele seja composto, poderá ter sua simbologia padrão omitida
• * { color: yellow; }
• *.classe { color: yellow; } é equivalente a .classe { color: yellow; }
SELETORES
Seletor de Tipo
O seletor de tipo atua para o nome corresponde à tag HTML que foi definido no 
tipo
A configuração no bloco de declaração de um seletor de tipo, incidirá em todos os 
elementos nos arquivos HTML’s referenciados
• div { color: yellow; }
• h1 { color: yellow; }
SELETORES
Seletor Descendente
Em algumas situações possivelmente deseja-se que um elemento, ou um conjunto de 
elementos, se comporte de acordo com seu contexto hierárquico
A ordem hierárquica dá-se de acordo com a ordem de composição do seletor, da 
esquerda para a direita
• div p a { color: blue; }
SELETORES
Seletor Filho
O seletor filho corresponde a um conjunto de elementos que compõem o seletor 
separados por um colchete angular direito “>”
As definições de leiaute somente serão aplicados aos filhos diretos dos elementos, na 
ordem da esquerda para a direita da sua declaração
• div > p > a { color: blue; }
SELETORES
Seletor Irmão/Relacional Adjacente
Corresponde a um conjunto de elementos que sejam adjacentes na árvore HTML, ou 
seja, que estejam no mesmo nível hierárquico
Caso haja algum elemento entre os irmãos adjacentes, a definição será ignorada
• div + a + p { color: yellow; }
SELETORES
Seletor Irmão Geral
Corresponde a um conjunto de elementos que estejam no mesmo nível hierárquico do 
documento HTML e que esteja precedido do irmão (ou irmãos) à esquerda
Caso haja algum elemento entre os irmãos adjacentes, o mesmo será ignorado
• div ~ p { color: yellow; }
SELETORES
Seletor de ID
Permite a aplicação de definições de estilos em um elemento pelo sei identificador 
único ID
Sua declaração é dada pela presença do símbolo tralha “#” precedido pelo ID do 
elemento
• #teste { color: blue; }
• div#teste { color: blue; }
SELETORES
Seletor de Atributos
Permite a aplicação de definições de estilos em elementos que possuem 
determinados atributos, ou correspondência total ou parcial de um valor de atributo
Delimitados por colchetes e, quando há presença de valor, separados pelo sinal de 
igualdade “=“
• h1[title] { color: blue; }
• h1[class=classe] { color: blue; }
SELETORES
Seletor de Classe
Estabelece um definições de estilos através do nome de uma classe, definido no CSS
Sua declaração é dada pela presença do símbolo ponto “.” precedido pelo nome 
dado ao seletor do tipo classe
• .classe { color: blue; }
• h1.classe{ color: blue; }
SELETORES
Seletor de Pseudo-Classe e Pseudo-Elements
São palavras-chaves que podem ser adicionadas à determinados seletores para especificar 
o estado de um elemento HTML
Pseudo-classes e pseudo-elementos, permitem que sejam definidas estilos não apenas aos 
conteúdos apresentados estaticamente na apresentação de um documento HTML, mas também 
em relação a comportamentos dinâmicos
Exemplos de pseudo-classes: 
 hover: posicionamento do mouse
 visited: histórico de navegação
 checked: status de um conteúdo
SELETORES
Seletor de Pseudo-Classe e Pseudo-Elements
Sua declaração é dada pelo uso de dois ponto “:” precedidos pelo nome do seletor 
ou pelo uso duplicado de dois pontos “::”, também precedidos pelo nome do seletor, 
para pseudo-classe e pseudo-elemento, respectivamente
Exemplo
Pseudo-classe: a:visited, li:hover, option:checked
Pseudo-elements: p::first-line { margin-left: 20px }
PRECEDÊNCIA DE ESTILOS
Um único documento HTML pode:
• Importar links para várias folhas de estilo externas (estilos com arquivos externos)
• Conter uma ou mais folhas de estilo incorporadas (estilos com Tag Style)
• Fazer uso de estilos inline
Problema: Definições podem entrar em conflito
Solução: CSS usa um mecanismo chamado de cascata para resolver tais conflitos e 
através de especificidade e herança
PRECEDÊNCIA DE ESTILOS
Especificidade
Determina a regra a ser aplicada pelos clientes (navegadores)
Problema:
a { div a {
} }
A especificidade do seletor determina quais as regras de precedência aplicadas 
sobre o código CSS para um mesmo elemento quando várias regras são aplicadas
 Cada seletor tem sua especificidade
PRECEDÊNCIA DE ESTILOS
No exemplo anterior conseguimos ver a atuação da cascata no código CSS
O seletor [a] possui especificidade 1, já o seletor [div a] possui especificidade 2
Porque?
Isso ocorre pela soma de elementos presentes no seletor. No primeiro caso, temos um 
elemento para um seletor. No segundo, dois elemento para um único seletor, então
 Peso = 1 (elemento div) + 1 (elemento a)
Cálculo de Especificidade
Especificidade descreve o peso de um seletor e suas declarações, e possui uma regra 
baseada em valores para que essa seja alcançada
PRECEDÊNCIA DE ESTILOS
CASCATA E HERANÇA
O estilo final para um elemento pode ser especificado em muitos lugares diferentes, 
que pode interagir num meio complexo
Esta interação complexa faz do CSS uma ferramenta poderosa, porém pode tornar 
o código confuso
O comportamento cascata efetivamente estabelece uma sequência para avaliar o 
estilo de um determinado elemento
 O estilo padrão do navegador para a linguagem de marcação
 O estilo especificado por um usuário que está lendo o documento
 O estilo ligado ao documento pelo seu autor
CASCATA E HERANÇA
Estilo Padrão do Navegador
 Ao visualizar um documento no navegador, parte do estilo é definido por um conjunto de 
definições padrão do navegador para um código HTML
Estilo Definido pelo Usuário
 Estilo oriundo das configurações do navegador no qual algum arquivo de configuração 
de estilos de usuário está definido (userConten.css por exemplo, em um perfil)
Estilo Ligado ao HTML
 Estilo definido nos arquivos de folhas de estilo relacionados ao documento HTML (ou 
definidos inline, ou no documento ou ligados a algum arquivo de estilos externo)
CASCATA E HERANÇA
Na estilização de elementos em cascata, a ordem de prioridade segue da seguinte 
maneira:
1. O autor das folhas de estilo tem prioridade
2. O leitor das folhas de estilo, 
3. O padrão do navegador
Onde;
Autor  código CSS (de atributo, de tag, ou externo), e
Leitor  configurações e definições do usuário em seu perfil no navegador
CASCATA E HERANÇA
Herança é a característica que elementos HTML herdam propriedade de outros 
elementos
Se <p> possui uma configuração e no código HTML a tag <a> é parte do conteúdo 
de <p>, então a herda definições de <p>
Na herança propriedades CSS aplicadas a uma tag são repassadas para as tags
aninhadas
<p style=“color: #FF0000;”>
<a>Link</a>
</p>
CASCATA E HERANÇA
Herança não se aplica apenas a estilização de elementos seletores, podem ser 
aplicáveis a quaisquer outros seletores existentes no CSS
A utilização de herança é uma boa prática na construção de estilos HTML usando 
CSS:
Exemplos:
 Definir todo o estilo global de HTML no seletor de elemento body, fornece o 
reuso daquele estilo para todos os demais elementos internos
 No estilo, é só especificar a fonte que você deseja usar, e todas as tags na 
página herdam a fonte: body { font-family: Arial, Helvetica, sans-serif;}
BOX MODEL – MODELO DE CAIXA
No HTML, todos os elementos são considerados caixas, independentemente do seu 
propósito
Ao serem carregados pelo navegador os elementos se ajustam
Content: conteúdo do elemento 
(imagens, textos, etc)
Padding: limpa uma área em torno 
do conteúdo (transparente)
Border: região que limita a área do 
conteúdo
Margin: limpa uma região fora da 
borda
BOX MODEL – MODELO DE CAIXAS
Definição:
h1 {
border: 1px solid #FF0000 !important;
margin: 15px;
padding: 5px 10px 5px 10px;
}
Embora o CSS nos permita alterar propriedade e valores de caixas, elementos sem 
definição serão exibidos de acordo com as propriedades padrão de cada 
navegador
DISPLAY - LEIAUTE
A propriedade display estabelece a forma de exibição dos elementos HTML
Cada elemento tem um valor padrão para a propriedade display, entretanto, como 
em todos os outros valores de propriedade, pode ser alterado
Existem diversos valores para a propriedade display, mas os mais comuns são o 
block, inline, inline-block e none
DISPLAY - LEIAUTE
Block
Uma tag que cria um espaço antes e depois dela. A tag em bloco <p>, por 
exemplo, cria um bloco que é separado de outras tags acima e abaixo.
Hs, <div>, tabelas e listas são outros exemplos de tags que funcionam por padrão 
em bloco
P { display: block; }
DISPLAY - LEIAUTE
O fundo (background) da caixa do elemento se estende até a parte exterior da 
borda, preenchendo o conteúdo, padding e áreas de borda
Se a borda possuir partes transparentes (por exemplo, é pontilhada ou tracejada), 
o fundo será visível naquela área também. Quaisquer contornos são desenhados na 
área de margem e não afetam o layout.
 Apenas margens, altura e largura de uma caixa podem ser definidos como auto
 Somente às margens podem ser dados a valores negativos
 As larguras padrão de padding e borda do elemento caixa são 0 (zero) e 
nenhum, respectivamente
DISPLAY - LEIAUTE
Inline
Tags inline não criam quebras antes ou depois deles. Eles aparecem na mesma linha 
que o conteúdo e outras tags ao lado deles. A tag <strong>é um exemplo de 
etiqueta com valor padrão inline.
Uma palavra formatada com esta tag se coloca ao lado de outro texto — até 
mesmo texto envolvido em outras tags inline como <em>.
DISPLAY - LEIAUTE
Inline-block
Usar esse valor permitirá um elemento comportar-se como um elemento de bloco, 
aceitando todas as propriedades do Box Model
No entanto, o elemento será exibido em consonância com outros elementos, e não 
vai começar em uma nova linha por padrão, como em Block
Uma distinção importante com elementos inline-block é que eles nunca se tocam, ou 
são exibidos diretamente ao lado do outro
Geralmente, um pequeno espaço existirá entre dois elementos inline-block.