xhtml_03 44
Pré-visualização6 páginas
é possível utilizar uma mesma propriedade, várias vezes.
\u2022 Exemplo: h1 {
color : gray;
font-family: sans-serif;
}
h2 {
color : gray;
font-family: sans-serif;
}
p {
color : red;
}
arquivo.css
Aqui está uma regra para configurar a
cor de todos os cabeçalhos de nível 1
<h1> na página, além de configurar
o tipo da fonte para sans-serif
E aqui está uma regra para fazer a
mesma coisa com todos os cabeçalhos
de nível 2 <h2> encontrados
Mudar a cor de todos os parágrafos
encontrados para vermelha
14
Otimizando o código CSS(cont.)
\u2022 Porém, há um problema com a abordagem anterior\u2026
\u2013 Há duplicaçãoduplicação de propriedades e valores!
\u2022 O que fazer?
Pergunta intrigante\u2026
h1, h2 {
color : gray;
font-family: sans-serif;
}
h2 {
color : gray;
font-family: sans-serif;
}
p {
color : red;
}
arquivo.css
Para escrever uma mesma regra para
vários seletores, escreva-os
separados por vírgula
Nesta regra, todos os cabeçalhos de
níveis 1 e 2 terão suas aparências
alteradas automaticamente\u2026
Delete isso\u2026
\u2026mas, o que faríamos se quiséssemos, amanhã,
colocar uma linha de borda apenas nos cabeçalhos
de nível 1 <h1>, mas não em cabeçalhos <h2>?
15
Regras aplicadas a um mesmo seletor
\u2022 Até aqui, cada regra mostrada mencionava sempre tag\u2019s distintas
\u2013 Saiba que é permitido escrever várias regras para uma mesmapara uma mesma tagtag XHTML
\u2022 Assim, no geral, se houver regras que mencionam um mesmo descritor
XHTML, cada regra irá \u201cadicionar\u201d aparência em relação à anterior *
\u2013 Pode-se \u201c\u201cacumularacumular\u201d\u201d aparência escrevendo regras mais específicas
*Iremos ver, mais adiante, que, em alguns casos, o browser irá decidir de acordo
com o peso da regra (não considerando se ela é a última dentro do arquivo css).
h1, h2 {color : gray;font-family: sans-serif;}
h1 { border-bottom : 1px solid black;}
16
Overriding (sobreposição)
\u2022 Em situações que envolvam regras aplicadas a um mesmo descritor
XHTML, é comum sobreporsobrepor a aparência definida em regras anteriores
\u2013 A isso, dá-se o nome de override (ou sobreposição) de aparência
\u2022 Se as propriedades são conflitantes, será escolhida a regra mais
específica que o browser encontrar dentro do arquivo CSS
Obs: note que a cor cinza do cabeçalho h1 será sopreposta pela última regra mais específica
h1, h2, h3 {color : gray;font-family: sans-serif;}
h1 { color : red;border-bottom : 1px solid black;}
17
Um meta-padrão
\u2022 Procure fatorarfatorar código comum a todos os descritores XHTML
\u2013 Ora, se a aparência tiver de mudar, apenas um único local será alterado
\u2022 Só então, a partir daí, defina regras de estilo mais específicasespecíficas
\u2013 Uma boa dica é fazer override de propriedades, caso estas já tenham sido
definidas em regras de estilo anteriores no código CSS
\u2022 Mesmo assim, muito cuidado na escrita de regras conflitantes!
\u2022 E lembre-se: ao resolver um conflito de regras em um arquivo CSS, o
browser irá sempre em busca da regra mais específica
\u2013 Mais sobre o cálculo de pesos no final do módulo\u2026
18
Herança
\u2022 Mesmo fatorando código comum e se valendo de override para ajustes
específicos, em CSS, é facil começar a duplicar propriedadesduplicar propriedades
Veja um exemplo:
h1, h2 {
color : gray;
font-family: sans-serif;
}
h2 {
color : red;
border-bottom : 1px solid black;
}
p {
color : blue;
font-family: sans-serif;
}
arquivo.css
\u2026problema! Ora, por que definir font-
family para cada elemento? E se, amanhã,
for adicionado à página um elemento
<blockquote>? Teríamos de adicionar uma
nova regra no arquivo css para ele também?
Ajustes específicos em <h2> foram
feitos com override, mas\u2026
Conforme visto em slides anteriores, é
interessante fatorar código comum aos
elementos (neste caso, os cabeçalhos
<h1> e <h2 >, suas cores e tipo de fonte)
19
Herança(cont.)
\u2022 \u201cElementos-filhos\u201d podem herdar aparência de seus \u201cpais\u201d
\u2013 Mas isso apenas para algumasalgumas
propriedades!
\u2022 Pergunta intrigante:
body {
font-family: sans-serif;
}
h1, h2 {
color : gray;
font-family: sans-serif;
}
h2 {
color : red;
border-bottom : 1px solid black;
}
p {
color : blue;
font-family: sans-serif;
}
arquivo.css
Iremos mover a propriedade para o \u201cpai\u201d de
todos os elementos envolvidos no arquivo.
Delete isso\u2026
A grande maioria dos filhos de <body> (inclusive
seus \u201cnetos\u201d) serão afetados diretamente; como se
houvesse uma regra explícita para cada um.
\u2026mas, e se houvesse uma tag <img>
definida dentro de algum parágrafo? <img>
é um elemento inline (como <a>,
<em>,\u2026 ); sua fonte seria alterada?
Delete isso\u2026
20
\u201cSobrepondo\u201d a Herança
\u2022 Movendo a propriedade para <body>, quase todos os elementos
tiveram suas fontes afetadas
\u2013 Mas, e se houver uma
herança indesejadaherança indesejada??
\u2022 Como faço isso?
body {
font-family: sans-serif;
}
h1, h2 {
color : gray;
}
h2 {
color : red;
border-bottom : 1px solid black;
}
p {
color : blue;
}
em {
font-family: serif;
}
arquivo.css
Ora, você pode anular a herança fazendo
override específico para um determinado
elemento afetado por ela\u2026
É facil: apenas adicione uma nova regra
selecionando apenas um determinado
elemento desejado e atribuindo uma nova
aparência ao mesmo
21
Herança, override, \u2026 confusão!
\u2022 Como saber quais propriedades admitem herança e quais não?
\u2013 É aí que uma boaboa referênciareferência entra em cena (CSS Pocket ReferenceCSS Pocket Reference)
\u2022 Entretanto, no geral, estilos que afetam texto (e.g. color, font-
family, font-size, font-weight, font-style) admitem herança
\u2013 Teste font-weight e font-style e veja isso na prática!
\u2022 Outras propriedades (e.g. border) não serão herdadas!
\u2013 Pense um pouco: ora, não é porque se quer colocar uma borda ao redor do
corpo <body> do documento XHTML que todos os elementos filhos (e.g.
<p>, <h1>, <a>, <em>, etc. ) devem ter uma também, certo?
Obs: acima, note que, em alguns casos, vale também o bom senso na hora de se construir a regra\u2026
22
Classes
\u2022 Com CSS, também é possível definir uma classeclasse (ou grupo), à qual
podem ser associados vários elementos XHTML da página
\u2013 As classes podem ser aplicadas a qualquer elemento HTML.
\u2013 Ademais, pode-se aplicar estilos estilos distintosdistintos para o mesmo tipo de elementopara o mesmo tipo de elemento do
XHTML, usando classes classes distintasdistintas para cada um deles
\u2022 Use o atributo class para adicionar elementos a uma classe
\u2013 Um elemento pode, ainda, se relacionar com várias classes
\u2022 Desde que os múltiplos nomes de classes no atributo class sejam separados com
espaços em branco (mais sobre isto adiante\u2026)
23
Declaração de uma classe
p.vermelho {
color : red;
}
Use um \u201c.\u201d entre o nome do
elemento XHTML desejado e o
nome da classe para selecionar um
elemento específico da mesma
Uma forma simples é
escrever o seletor primeiro\u2026
A definição de classes ocorre
dentro do arquivo CSS (junto
com as demais regras, quando
for o caso\u2026)
Evite utilizar espaços em branco
e/ou caracteres especiais para
nomear uma classe
Esta regra irá selecionar todos os
parágrafos que pertençam à classe
de nome \u201cvermelho\u201d
\u2026 e, depois, o nome da classe.
24
Relacionando-se com classes
\u2022 Para associar um elemento XHTML a uma classe, basta utilizar o
atributo class (isto fará com que ele seja adicionado ao \u201cgrupo\u201d)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN\u201c
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en\u201c>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>O título do documento</title>
</head>
<body>
<p class=\u201cvermelho\u201d> Este parágrafo terá cor vermelha </p>
<p class=\u201cazul\u201d> Este parágrafo terá cor azul </p>
...
Exemplo:
Pergunta 01: e se quiséssemos criar uma classe para elementos distintos (não apenas parágrafos)?
Observe o uso do atributo e o nome da classe
index.css
p.p.vermelho
vermelho {{color: red;
color: red;}}
p.p.azulazul {{color: blue;
color: blue;
}}
Pergunta 02: e se fosse preciso fatorar código comum às classes?
25
Classes: conceitos