xhtml_03 44

avançados
\u2022 É possível associar elementos distintos a uma ou várias classe(s)
\u2013\u2013 Vários elementosVários elementos,, uma classeuma classe: se não houver nada antes do sinal
de \u201c.\u201d e o nome da classe, todos os elementos daquela classe serão afetados
\u2013\u2013 UmUm elementoelemento,, váriasvárias classesclasses: o processo inverso também é
possível - um elemento pode pertencer a vários grupos simultaneamente*
* E se houver regras conflitantes entre as várias classes acima? Como o browser irá decidir?
.centro { 
text-align:center;
}
<h1 class=\u201ccentro\u201d> Um texto </h1>
<p class=\u201ccentro\u201d> Um texto </p>
.borda { border-bottom: 1px solid black; }
.verde { color: green; }
.centro{ text-align:center; }
<p class=\u201cverde borda centro\u201d>...
26
Um exemplo breve\u2026
Laboratório 07: overriding, herança, classes, \u2026LaboratórioLaboratório 0707:: overriding,overriding, herançaherança, classes, \u2026, classes, \u2026
27
Validador CSS 
\u2022 Escrever um CSS otimizado, muitas vezes, não é sinônimo de que ele 
foi realmente escrito sem erros de sintaxe
\u2013 Há alguma forma de verificar se o webdesigner não cometeu erros no CSS?
\u2022\u2022 OO ValidadorValidador CSSCSS dada W3CW3C
\u2013 Da mesma forma que no validador XHTML, é um serviço gratuito, online e
que permite checar se um determinado CSS foi escrito corretamente
\u2013 Por conseguinte, ele irá garantir que o CSS é bem estruturado e que todas as
regras, propriedades e valores aderem a um padrão definido
\u2022 A url do validador CSS: http://jigsaw.w3.org/css-validator/
28
Uso do validador CSS
29
Uso do validador CSS(cont.)
E a W3C ainda lhe dá a oportunidade de inserir 
uma imagem no documento XHTML indicando 
que a folha de estilos usada para estilizar a
página é livre de erros e adere a padrõesJ!
30
Fontes
\u2022 É possível selecionar um trecho de texto e configurar seu tipo de fonte,
tamanho, cor e até algumas \u201cdecorações\u201d para o mesmo
\u2022 No CSS, fontes se apresentam e são classificadas em famíliasfamílias
\u2013 A partir daí, é só especificar as fontes que serão aplicadas em cada elemento
\u2022 Espeficique o tipo da fonte utilizando a propriedade font-family
\u2013 Apenas algumas fontes são comumente instaladas na maioria dos
computadores; logo, tome cuidado na hora de escolher suas fontes!
body {
font-family : Verdana, Geneva, Arial, sans-serif;
}
31
Fontes(cont.)
\u2022 Conforme foi dito anteriormente, cada fonte pertence a uma família
\u2013 Cada família possui um conjunto de características a serem compartilhadas
\u2022 No CSS 2.1CSS 2.1, há cinco famílias básicas de fontes:
sans-serif: Verdana, Trebuchet MS, Arial, Geneva, Arial Black, \u2026
serif: Times, Times New Roman, Georgia, \u2026
monospace: Courier, Courier New, Andale Mono, \u2026
cursive: Comic Sans, Apple Chancery, \u2026
fantasy: Impact, etc\u2026
Importante: Geneva, Courier, Helveltica e Times são fontes comumente presentes 
em Mac\u2019s. As demais, em plataformas Windows e Mac\u2019s (provavelmente).
32
body {
font-family : Verdana, Geneva, Arial, sans-serif;
}
Fontes(cont.)
A fonte Verdana está 
disponível no computador? Se
estiver, aplique a fonte neste 
elemento (no caso, body)
Se Verdana não estiver disponível, então
procure pela fonte Geneva. Se esta não 
estiver disponível, procure, então, por
Arial. E assim, por diante\u2026
Esta lista de prioridades deve ser separada por vírgulas, a partir da fonte mais 
específica até a mais genérica. Se houver a necessidade de especificar uma 
fonte de nome composto, use aspas duplas (e.g. \u201cTimes New Roman\u201d)
Não há uma regra de quantas fontes devem aparecer aqui. Porém, é
sempre bom colocar o nome de uma família como uma última opção
de contingência para aqueles que não possuem uma fonte específica
Note o uso da 
propriedade font-family
(e tão font-type)
Finalmente, se nenhuma das fontes for
encontrada, o browser irá aplicar o que ele 
considerar \u201cdefault\u201d para a fonte sans-serif
Importante: os nomes das
fontes são case-sensitive.
33
Fontes(cont.)
\u2022 Altere a intesidade (peso) da fonte com a propriedade font-weight
\u2022 Espeficique a \u201cdecoração\u201d com a propriedade text-decoration
h1 {
font-weight : bold;
}
p {
text-decoration : underline;
}
none
underline
overline
line-through
blink *
* Ainda não suportada por todos os navegadores.
É possível tornar um texto decorado usando-
se também outros valores de propriedades:
lighter *
normal
bold
bolderO peso pode variar ligeiramentede um navegador para outro.
34
Fontes(cont.)
\u2022 Espeficique o tamanho da fonte com a propriedade font-size e sua 
cor usando a propriedade color
body {
font-size : 16px;
color : red;
}
Também é possível especificar o tamanho da 
fonte utilizando outras unidades além do pixel. 
E a cor utilizando a notação Hexadecimal. Mais 
sobre estes dois pontos adiante\u2026
aqua green navy silver
blue gray olive teal
black lime purple white
fuchsia maroon red yellow
\u2022Veja algumas cores pré-definidas:
35
Fontes(cont.)
\u2022 É possível ajustar o tamanho do texto usando pixels, conforme visto
\u2022 Porém, também é possível ajustar o tamanho da fonte de forma
relativarelativa a uma outra fonte (pai ou a folha de estilos do browser)
\u2013 Isto é feito com duas unidades relativas: %% e emem
body {
font-size : 14px;
}
h1 {
font-size : 150%;
}
h2 {
font-size : 1.2em;
}
É facil: defina um tamanho para o <body>.
Isto irá agir como um default para a página
Uma boa prática: agora, defina os tamanhos de
fontes dos outros elementos de forma relativa 
ao tamanho do corpo (com % ou em). Assim, 
se o tamanho das fontes tiver de mudar, ajustes 
serão realizados em apenas um único local 
(além disso, ajustes por parte dos usuários 
também serão permitidos) J. Pense nisso\u2026
Importante: não confunda \u201cem\u201d com <em>!
36
Fontes(cont.)
\u2022 Infelizmente, algumas versões de navegadores (e.g. Internet Explorer)
não permitem, aos visitantes da página, ajustar o tamanho do texto 
quando o seu valor-base é expresso em pixels
\u2013 Para evitar isso, use keywordskeywords ao invés de pixels no valor-base
xx-small
x-small
small
medium
large
x-large
xx-large
Os valores reais das keywords não são constantes entre todos os navegadores!
body {
font-size : small;
}
h1 {
font-size : 150%;
}
h2 {
font-size : 1.2em;
}
37
Fontes(cont.)
\u2022 Adicione itálico a um elemento com a propriedade font-style
\u2022 Entretanto, nem todas as fontes fornecem suporte nativo a itálico
\u2013 Se isso acontecer, use o valor oblique
p {
font-style : italic;
}
oblique, na verdade, também indica ao navegador que um
texto \u201cem itálico\u201d é desejado. Porém, ao invés de procurar e
usar uma fonte projetada especialmente para este fim, o 
browser irá aplicar uma \u201cinclinação\u201d no texto \u201cna marra\u201d.
Um texto normal
Um texto em itálico
p {
font-style : oblique;
}
Na prática, entretanto, dependendo da escolha da fonte e 
do seu browser, os dois estilos poderão ser idênticos. 
\u2022Pergunta intrigante:
\u2026mas, por que não usar <em>
em vez de todo este cuidado?
38
Cores
\u2022 Já foi visto como especificar cores usando nomes de cores
\u2013 A paleta CSS de nomes contém pouco mais de 10 cores (fator limitante)
\u2022 Porém, não seria mais conveniente especificar cores usando uma
\u201cpaleta\u201d de aproximadamente 16 milhões de cores? Como?
\u2013 Porcentagens de Red Green Blue, (usando valores de 0-255, ou %)
\u2013 Notação Hexadecimal (seis dígitos, de 0..9, A, B, C, D, E e F)
\u2022 Uma maneira interessante de mixar cores é utilizando ferramentas de
edição de fotos ou até mesmo usando alguns catálogos da Web
39
Cores(cont.)
\u2022 Crie uma cor em termos de valores RGB (mixagem de cores)
\u2013 Ou até mesmo espeficique em termos de valores finais, diretamente
Obs: veja que é difícil \u201cadivinhar\u201d a cor sem o auxílio de uma ferramenta
h1 {
background-color : rgb(80%, 40%, 0%);
}
80% de vermelho, 40% 
de verde e 0% de azul\u2026
h1 {
background-color : rgb(204, 102, 0);
}
80% de 255 = 204
40% de 255 = 102
00% de 255 = 0
40
Cores(cont.)
\u2022 Você também pode mixar cores usando a notação Hexadecimal
\u2013 E, nesta notação, os dígitos para as cores podem conter letras!
\u2022 Na verdade, o primeiro conjunto de dois dígitos representa o
vermelho, outro