Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
aula_03_CSS
Compartilhar
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.
Continue navegando
Materiais relacionados
Compartilhar