Capítulo 2
CSS
Esta é uma tradução do Capítulo 2 do Livro Cascading Style Sheets, designing for the Web, escrito por Håkon Wium Lie e Bert Bos (2a. edição, 1999, Addison Wesley, ISBN 0-201-59625-3)
Conforme vimos no Capítulo anterior, os elementos do HTML são usados pelos desenvolvedores de páginas Web para marcar a estrutura dos seus documentos. As especificações do HTML estabelecem diretrizes de como os elementos devam ser renderizados no navegador. Por exemplo, você pode ter certeza de que os conteúdos marcados com um elemento strong serão renderizados em negrito, bem como os conteúdos marcados com o elemento h1 serão renderizados, na maioria dos navegadores, com um tamanho de fonte grande... ou pelo menos com tamanho de fonte maior do que o conteúdo marcado com o elemento p como também daquele marcado com o elemento h2. Contudo entre o que é esperado e o que é real a grande verdade é que você não tem qualquer controle sobre a maneira como seu texto irá ser renderizado.
As CSS mudaram esta verdade. CSS devolve ao desenvolvedor o controle das coisas. Nós estaremos dedicando o restante deste livro à tarefa de explicar o que você poderá fazer com CSS. No presente Capítulo mostraremos a você os fundamentos básicos necessários para escrever uma folha de estilos e como as CSS e o HTML reunidos controlam a estrutura e a apresentação de um documento.
Regras e folhas de estilos
Você não precisa escrever uma folha de estilos para começar a usar CSS. No Capítulo 16 você aprenderá como lincar para folhas de estilos existentes na Web.
Existem duas maneiras de se criar folhas de estilos. Você pode usar um editor de texto normal e escrever sua folha de estilos "na unha" ou usar uma ferramenta própria para escrever folhas de estilos - como, por exemplo, uma aplicação Web que suporte CSS. As ferramentas apropriadas têm a vantagem de permitir a criação de folhas de estilos sem a necessidade de que se conheça a sintaxe das CSS. Contudo na maioria dos casos o desenvolvedor tem necessidade de introduzir modificações na folha de estilos gerada pela ferramenta e assim sendo nós recomendamos que você aprenda a escrever e editar CSSs "na unha". Vamos começar!
H1 { color: green }
No exemplo acima mostramos uma regra CSS simples. Uma regra é uma determinação sobre a estilização de um ou mais elementos. Uma folha de estilo é um conjunto de uma ou mais regras que se aplicam a um documento HTML. A regra mostrada acima define a cor dos elementos de cabeçalho de primeiro nível (h1). Veja a seguir uma imagem de como seria o resultado visual da regra:
Figura 2.1
![[image]](0.png)
Vamos a seguir estudar com detalhes a regra.
Anatomia da regra
Uma regra divide-se em duas partes:
- Seletor (Selector) - A parte da regra escrita antes do sinal de abre chaves ( { )
- Declaração (Declaration) - A parte da regra que fica dentro do sinal de chaves ( { } )
![[image]](anatomy-rule.png)
O seletor age como se fosse um link entre a marcação HTML do documento e a estilização. É o seletor que especifica em quais elementos serão aplicadas as declarações de estilo. A declaração é a parte da regra que define o efeito de estilização a ser aplicado. No exemplo acima o seletor é o elemento h1 e a declaração é "color: green." Em conseqüência, todos os elementos h1 serão estilizados conforme escrito na declaração, ou seja, serão na cor verde. (A propriedade color aplica uma cor no texto do primeiro plano, existem outras propriedades para fundo, bordas, etc.)
O seletor mostrado acima é um seletor conhecido como tipo de elemento: ele seleciona todos os elementos do tipo "h1." Seletores assim são chamados seletor tipo. Qualquer elemento HTML pode ser usado como um seletor tipo. Estes são os seletores mais simples que existem. Veremos outros seletores em Ver seletores CSS , "Seletores CSS."
Anatomia da declaração
Uma declaração é constituída de duas partes separadas por dois pontos:
- Propriedade (Propertie) - a parte antes dos dois pontos
- Valor - (Value) a parte depois dos dois pontos
![[image]](anatomy-decl.png)
Propriedade é a qualidade ou a característica própria de alguma coisa. No exemplo anterior é a cor. CSS2 (ver na caixa a seguir) define aproximadamente 120 propriedades e podemos declarar valores para cada uma delas.
O valor é a definição precisa da propriedade. No exemplo mostrado o valor é "green", mas poderia ser blue, red, yellow, ou outra cor qualquer.
O diagrama a seguir mostra os componentes de uma regra. O sinal de chaves ({ }) e os dois pontos (:) servem para informar ao navegador quem são o seletor, a propriedade e o valor.
Figura 2.2 Diagrama de uma regra.
![[image]](anatomy-diag.png)
Grupando seletores e regras
Ao escrever CSS, brevidade deve ser um objetivo. Nós concluímos que se pudermos reduzir o tamanho das folhas de estilo estaremos facilitando a tarefa dos desenvolvedores na edição e escrita de folhas de estilo "a unha". E é claro, folhas de estilo minimizadas carregam mais rápido. CSS prevê vários mecanismos capazes de simplificar as folhas de estilo através do agrupamento de seletores e de declarações.
Como exemplo, considere as três regras a seguir:
H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }
Todas as três regras contêm exatamente a mesma declaração - definem a fonte em negrito. (Isto é feito com a propriedade font-weight, que será discutida em See Fonts. .) Já que as três declarações são idênticas nós podemos grupar os seletores em uma lista separados por vírgula e escrever a declaração uma só vez como mostrado abaixo:
H1, H2, H3 { font-style: bold }
Esta última regra produz o mesmo resultado das três regras mostradas anteriormente.
Um seletor pode ter mais de uma declaração. Podemos, por exemplo escrever uma folha de estilos com as seguintes regras:
H1 { color: green }
H1 { text-align: center }
Neste caso, definimos que todos os h1s serão verdes e centrados na tela. (Isto é feito usando a propriedade text-align, discutida no Capítulo 5.)
Podermos obter resultado idêntico, agrupando as declarações para um mesmo seletor em uma lista separando as declarações por um ponto e vírgula, como mostradas a seguir:
H1 {
color: green;
text-align: center;
}
Todas as declarações dever estar contidas dentro de um par de chaves ({}). As declarações são separadas por um ponto e vírgula e pode - mas não é obrigatório - ser colocado um ponto e vírgula também na última declaração. Para tornar seu código mais fácil de ser lido nós sugerimos que você coloque cada declaração em uma linha, como fizemos acima. (os navegadores ignoram espaços em branco e quebras de linha existentes nas folhas de estilo.)
Você acaba de conhecer o básico para escrever regras CSS e criar folhas de estilos. Mas, isto não é tudo. Para fazer funcionar sua folha de estilos é necessário que ela seja "atrelada" ao seu documento HTML.
"Atrelando" folha de estilos ao documento
Para que uma folha de estilos tenha efeito em um documento HTML ela deverá estar "atrelada" ao documento. Ou seja, a folha de estilos e o documento HTML têm que estar combinados entre si para apropriadamente apresentar o documento. Isto, pode ser feito de quatro maneiras diferentes:
- Aplicar uma folha de estilo ao documento usando o elemento style.
- Aplicar estilos individualmente ao elemento usando o atributo style.
- Lincar para uma folha de estilos externa usando o elemento link.
- Importar uma folha de estilos usando a diretiva CSS @import.
Na seção seguinte nós iremos mostrar o primeiro método: usar o elemento style. Mostraremos o uso do atributo style no Capítulo 4, "CSS selectors," e o uso do elemento link e da diretiva @import serão mostrados no Capítulo 16 , "External style sheets."
Atrelamento com uso do elemento STYLE
Você atrela uma folha de estilos a um documento HTML colocando a folha de estilos dentro do elemento style no topo do seu documento. O elemento style foi introduzido no HTML com a finalidade específica de permitir a inserção de folhas de estilos em documentos HTML. A seguir mostramos um exemplo de folha de estilos (destacada em negrito) atrelada a um documento usando o elemento style. Veja o resultado da aplicação dos estilos na Figura 2.3.
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE>
H1, H2 { color: green }
</STYLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific
composer. Among his works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
<H2>Historical perspective</H2>
<P>Bach composed in what has been referred to as
the Baroque period.
</BODY>
</HTML>
Figura 2.3 Renderização resultante da aplicação de regras de estilo para fazer h1s na cor verde e atrelar esta regra ao documento usando o elemento style. (Veja no seu navegador)
![[image]](1.png)
Note que o elemento style é colocado após o elemento title e antes do elemento body no documento. O título de um documento não é renderizado na tela, assim ele não é afetado por regras de estilos.
O conteúdo dentro do elemento style é uma folha de estilos. Contudo, embora elementos como h1, p, e ul sejam renderizados na tela o conteúdo do elemento style (uma folha de estilos) não o é. É o efeito do conteúdo do elemento style - a folha de estilos - que aparece na tela. Assim sendo você não verá: "{ color: green }" na tela; você verá sim os elementos h1 renderizados na cor verde. No exemplo mostrado nenhuma outra regra foi aplicada aos demais elementos e assim sendo estes elementos serão renderizados na cor default determinada pelo navegador.
Os navegadores e as CSS
Para conhecer os navegadores disponíveis no mercado ver W3C overview page
Para que as CSS funcionem conforme descrito neste livro você deverá estar usando um navegador em conformidade com as CSS, ou seja, um navegador que suporte CSS. Um navegador em conformidade com as CSS reconhecerá o elemento style como um container para uma folha de estilos e renderizará o documento de acordo com as regras de estilos ali contidas. A maioria dos navegadores atuais oferece suporte para as CSS, por exemplo, o Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) e Opera 3.5 (O3.5). Estimativas conservadoras dão conta de que mais da metade das pessoas na Web usam um navegador em conformidade com as CSS e este total está crescendo. São grandes as chances de que as pessoas com quem você se comunica estejam usando um navegador que suporte CSS. Se não, dê a elas uma razão para fazer um upgrade do navegador!
O melhor lugar para se informar sobre suporte às CSS pelos navegadores é em: WebReview's charts
Ops, nem todas as especificações CSS estão devidamente implementadas. Quando você começar suas experiências com folhas de estilos logo vai perceber que cada navegador tem suas limitações e seus bugs. Como regra geral os navegadores mais modernos se comportam melhor que os mais antigos. IE4 e O3.5 estão entre os melhores, e Netscape's a seguir - nomeado Gecko - promete sólido suporte às CSS.
Aqueles que não usam navegadores que suportam CSS mesmo assim podem ler páginas que usam folhas de estilos. CSS foi projetada para permitir que o conteúdo esteja disponível mesmo que o navegador nada entenda de CSS. Alguns navegadores, tais como o Netscape's Navigator versão 2 e 3 não suportam folhas de estilos, mas eles sabem sobre a existência do elemento style e o ignoram. O comportamento correto dos navegadores futuros é o de oferecer suporte às CSS.
Navegadores mais antigos tais como o Netscape's Navigator 1 e Microsoft Internet Explorer 2, ignoram as tags style, mas renderizam normalmente o conteúdo do elemento style. Assim, para estes navegadores o usuário acabará vendo a folha de estilos renderizada no navegador. Á época que este livro foi escrito (1999) uma pequena porcentagem de usuários se utiliza de tais navegadores. Para evitar este problema devemos colocar a folha de estilos dentro de sinais de comentário HTML, que foram estudados no Capítulo 1 . Uma vez que comentários não são mostrados na tela, ao colocar a folha de estilo dentro de sinais de comentários evitam-se que a folha de estilos seja mostrada nos navegadores mais antigos acima citados. Por outro lado, os navegadores mais modernos conhecem este truque e tratarão o conteúdo do elemento style normalmente como folha de estilos.
Lembre-se que sinais de comentários HTML começam com <!-- e terminam com -->. A seguir mostramos um exemplo de como colocar os sinais de comentário HTML
conforme explicado acima. Os sinais de comentário cercam o conteúdo do elemento style:
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE>
<!--
H1 { color: green }
-->
</STYLE>
<BODY>
..
</BODY>
</HTML>
CSS possui seus sinais próprios para permitir comentários na folha de estilos. Um comentário CSS começa com "/*" e termina com "*/." (Os programadores em linguagem C estão familiarizados com esta sintaxe de comentários.) Regras CSS dentro de comentários não terão qualquer efeito sobre a apresentação do documento.
O navegador também precisa ser informado de que estamos trabalhando com folhas de estilos. Atualmente CSS é a única linguagem para folha de estilos em uso com documentos HTML e nós não pretendemos alterar isto. Para XML a situação pode ser diferente. Mas, assim como existe mais de um formato para imagens (GIF, JPEG e PNG para citar apenas algumas), poderá haver mais de uma linguagem para folhas de estilos. Assim é sempre uma boa prática informar ao navegador que se trata de CSS. Isto é feito usando-se o atributo type do elemento style. O valor deste atributo indica ao navegador qual o tipo de folha de estilos está sendo usada. Para CSS, o valor do atributo é: "text/css." A seguir um exemplo do uso do atributo type (em combinação com os comentários HTML):
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: green }
-->
</STYLE>
<BODY>
..
</BODY>
</HTML>
Ao carregar um documento o navegador confere para saber se ele entende a linguagem da folha de estilo. Se ele entende, tentará ler a folha e caso não entenda, ignora. O atributo type (ver o Capítulo 1 para uma explicação sobre os atributos em HTML) é o lugar onde o navegador irá buscar conhecer qual a linguagem que foi escrita a folha de estilos. Use sempre o atributo type.
Para facilitar a leitura dos códigos mostrados neste livro nós omitiremos os comentários HTML nas folhas de estilos, mas usaremos normalmente o atributo type.
Estrutura em árvore e herança
No Capítulo 1 discutimos a representação de um documento HTML como se fora uma estrutura em árvore e como os elementos HTML têm pai e filhos. Existem inúmeras razões para se pensar em estrutura de árvore. Em se tratando de folhas de estilos uma boa razão diz respeito à herança. Exatamente como filhos herdam características e bens de seus pais, com elementos HTML acontece o mesmo. Em lugar herdar genes e dinheiro os elementos HTML herdam propriedades de estilização.
Vamos começar dando uma olhada no exemplo a seguir:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a
<STRONG>prolific</STRONG> composer. Among his
works are:
<UL>
<LI>the Goldberg Variations
<LI>the Brandenburg Concertos
<LI>the Christmas Oratorio
</UL>
</BODY>
</HTML>
A estrutura em árvore do documento acima é:
![[image]](anatomy-tree.png)
De acordo com a herança os valores das propriedades CSS definidos para um elemento serão transferidos (herdados) para seus descendentes na árvore da estrutura do documento. Nos exemplos que mostramos até agora definimos uma cor verde para os elementos h1 e h2. Vamos supor agora que queremos que todos os elementos do documento sejam na cor verde. Podemos fazer isto listando todos os seletores tipo como mostrado abaixo:
<STYLE TYPE="text/css">
H1, H2, P, LI { color: green }
</STYLE>
Contudo a maioria dos documentos HTML é bem mais complexa do que este simples exemplo acima, e usando esta técnica nossa folha de estilos iria ficar muito grande. Existe uma maneira bem melhor - e mais curta - de se obter o mesmo efeito. Em lugar de definir estilo para cada um dos elementos do documento (como fizemos acima), nós definimos o estilo para o ancestral comum a todos os elementos que vem a ser o elemento body, conforme mostrado a seguir:
<STYLE TYPE="text/css">
BODY { color: green }
</STYLE>
Uma vez que todos os elementos herdam as propriedades de estilo do elemento body, todos eles herdarão a cor verde (Figura 2.4 ).
Figura 2.4 O resultado da herança.
(Veja no seu navegador)
![[image]](2.png)
Como você acaba de constatar, a herança funciona como um veículo de transporte para os estilos a serem aplicados aos descendentes de um elemento. Uma vez que o elemento body é o ancestral de todos os elementos visíveis na tela ele é ideal para aplicar regras de estilos que devam afetar todos os elementos do documento.
Sobrescrevendo a herança
No exemplo anterior todos os elementos tinham a mesma cor , herdada do seu ancestral. Há casos em que nem todos os elementos descendentes têm a mesma aparência herdada de seu ancestral. Não se espante com isto, pois as CSS consideram estes casos. Suponha que você queira que todos os elementos do documento sejam na cor verde, exceto os elementos h1 que deveram ser na cor azul. Isto é fácil de conseguir com CSS, conforme mostrado a seguir:
<STYLE TYPE="text/css">
BODY { color: green }
H1 { color: navy }
</STYLE>
Como h1 é filho do elemento body (e assim sendo herda seus estilos), as duas regras acima são conflitantes. A primeira delas define uma cor verde para o elemento body - e em conseqüência a mesma cor verde para h1 por herança - enquanto a segunda regra define uma cor azul especificamente para o elemento e h1. Qual delas será aplicada? Vamos descobrir:
![[image]](3.png)
A razão pela qual a segunda regra é aplicada explica-se pela sua especificidade, ou seja, a segunda regra é mais específica do que a primeira. A primeira regra é geral - ela afeta todos os elementos visíveis do documento. A segunda regra afeta somente os elementos h1 existentes no documento e assim, é mais específica.
Fosse CSS uma linguagem de programação a ordem em que as regras são escritas determinaria qual delas seria aplicada. Mas, CSS não é uma linguagem de programação e então a ordem é irrelevante. O resultado seria exatamente o mesmo se nós tivéssemos escrito nossa folha de estilo assim:
<STYLE TYPE="text/css">
H1 { color: navy }
BODY { color: green }
</STYLE>
CSS foi projetado de maneira a resolver conflitos entre folhas de estilos como mostrado acima. A especificidade é um dos aspectos de resolução de conflitos. Para maiores detalhes consulte o Capítulo 15 do livro , "Cascading and inheritance."
Propriedades que não são herdadas
Como regra geral podemos admitir que as propriedades em CSS são herdadas pelos filhos de seus elementos pai como mostrado nos exemplos anteriores. Algumas propriedades não são herdadas e existem razões bem fortes para assim ser. Usaremos a propriedade background (descrita no Capítulo 11) para demonstrar uma das propriedades que não são herdadas.
Suponha que você deseja colocar uma imagem de fundo em uma página Web. isto é um efeito bastante comum e usando CSS, você poderia escrever:
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
BODY {
background: url(texture.gif) white;
color: black;
}
</STYLE>
<BODY>
<H1>Bach's <EM>home</EM> page</H1>
<P>Johann Sebastian Bach was a prolific
composer.
</BODY>
</HTML>
A propriedade background aponta para uma URL ("texture.gif") que contém o valor da imagem a ser aplicada. Ao carregar a página, seria apresentado na tela o que está mostrado a seguir:
![[image]](4.png)
Há algumas coisas a notar no exemplo mostrado:
- As imagem de fundo cobre toda a superfície da tela como se fosse um papel de parede, sendo que o fundo dos elementos h1 e p foram também cobertos. Isto não foi devido a herança mas pelo fato de que se não for definido nada em contrário todos os fundos são transparentes Assim sendo, uma vez que nós não definimos uma imagem de fundo para os elementos h1 e p a imagem do elemento pai, body, será vista através da transparência do fundo daqueles elementos.
- Além da URL da imagem, uma cor (white) foi também definida para o fundo. No caso de a imagem estar indisponível ou não for encontrada o fundo assumirá a cor branca (white) definida.
- A cor do elemento body foi definida para black (preta). É de boa prática definir a propriedade (cor) color para o texto sempre que uma cor for definida para a propriedade background e garantir contraste entre elas.
Mas, afinal por que a propriedade background não é herdada? Visualmente, o efeito de transparência é semelhante à herança: faz parecer que todos os elementos têm o mesmo fundo. Há duas razões: primeiro que fundos transparentes são carregados mais rápidos (nada há para renderizar!) que outros fundos. Segundo uma vez que imagens de fundo são posicionadas em relação ao elemento a que pertencem se houvesse herança apareceria (salvo raras exceções) um fundo sem continuidade.
Tarefas comuns a realizar com CSS
Definir cores e fundos - como foi descrito acima - estão entre as tarefas mais comuns a serem realizadas com CSS. Outras incluem definição de fontes e espaços em volta dos elementos. Nesta seção veremos o uso de algumas propriedades mais comuns das CSS.
Tarefas comuns: fontes
Veremos a seguir as fontes. Se você já usou aplicações para desktop no passado será capaz de entender a seguinte folha de estilos:
H1 { font: 36pt serif }
A regra mostrada define o tamanho e família de fonte para elementos h1. A primeira parte da regra - 36pt - define um tamanho de fonte igual a 36 points. Um "point" é uma velha medida de unidade tipográfica que sobreviveu e existe na era digital. No Capítulo a seguir nós mostraremos as razões de se preferir usar a unidade "em" no lugar da unidade "pt", mas por agora ficaremos com o point. A segunda parte da regra - serif - informa ao navegador para usar uma fonte com serifas (Os pequenos traços em cada linha da fonte. No Capítulo 5 trataremos delas). No caso da home page de Bach's as fontes com serifas são mais apropriadas, porque as fontes sem serifas não eram usadas na época do compositor. A seguir o resultado:
![[image]](5.png)
A propriedade font é uma abreviatura para definir várias outras propriedades para fontes de uma só vez. Usar propriedades abreviadas é uma boa prática para diminuir o tamanho das folhas de estilos. Caso você optasse por usar a versão expandida o exemplo acima ficaria assim:
H1 {
font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal;
}
Algumas vezes você precisa definir apenas uma das propriedades. Por exemplo, para tornar o texto inclinado em alguns elementos. Veja a seguir:
UL { font-style: italic }
A propriedade font-style não altera o tamanho e nem a família das fontes, ela apenas torna em itálico uma fonte existente. Quando definida para o elemento ul, os elementos li que estão dentro de ul tornam-se itálico uma vez que font-style é uma propriedade herdada. Veja o efeito quando aplicado na nossa página de testes:
![[image]](6.png)
A propriedade font-weight é usada para alterar o peso - grossura - das letras. Você pode enfatizar o conteúdo dos itens da lista definindo negrito para seu ancestral:
UL {
font-style: italic;
font-weight: bold;
}
Que resulta em:
![[image]](7.png)
As propriedades, font-variant e line-height, ainda não são plenamente suportadas pelos navegadores e por isso não estão ainda entre as tarefas comuns.
Tarefas comuns: margens
Definir espaçamentos em volta de um elemento é uma tarefa básica em tipografia. Observe que o título acima deste parágrafo apresenta um espaço acima e outro espaço (um pouco menor) abaixo. Este parágrafo impresso em um livro tem um espaço à esquerda e um espaço (um pouco menor) à direita. CSS pode definir o tamanho do espaço a ser deixado em volta dos diferentes elementos.
Por default, seu navegador sabe um pouco sobre como deverão ser renderizados cada um dos elementos do HTML. Por exemplo: ele sabe que lists e blockquote devem ser recuados em relação ao restante do texto. Como designer você pode construir baseado nestes padrões default, mas poderá também agir para fazer ajustes ao seu gosto. Vamos tomar o elemento blockquote para exemplificar. Considere o documento abaixo:
<HTML>
<TITLE>Fredrick the Great meets Bach</TITLE>
<BODY>
<P>One evening, just as Fredrick the Great was
getting his flute ready, and his musicians
were assembled, an officer brought him a
list of the strangers who had arrived. With
his flute in his hand he ran over the list,
but immediately turned to the assembled
musicians, and said, with a kind of
agitation:
<BLOCKQUOTE>"Gentlemen, old Bach is come."
</BLOCKQUOTE>
<P>The flute was now laid aside, and old Bach, who
had alighted at his son's lodgings, was immediately
summoned to the Palace.
</BODY>
</HTML>
A figura abaixo mostra como um navegador HTML típico renderiza o documento:
![[image]](8.png)
Como você pode notar o navegador adicionou um recuo em volta dos lados do elemento blockquote. Em CSS, este espaço é chamado de "margins" e todos os elementos têm suas margens próprias nos quatro lados. As propriedades são: margin-top, margin-right, margin-bottom, e margin-left. Você pode alterar a maneira como um blockquote é renderizado usando uma folha de estilos como abaixo:
BLOCKQUOTE {
margin-top: 1em;
margin-right: 0em;
margin-bottom: 1em;
margin-left: 0em;
font-style: italic;
}
A unidade "em" será estudada com detalhes no Capítulo seguinte, mas nós iremos desde já revelar um segredo sobre ela: esta unidade é escalável em relação ao tamanho da fonte. No exemplo acima as margens verticais terão o mesmo tamanho (1em) que o tamanho da fonte definida para blockquote, e as margens horizontais serão zero. Para enfatizar o texto contido no elemento blockquote a fonte foi definida em estilo itálico. O resultado é o mostrado abaixo:
![[image]](9.png)
Tal como vimos para a propriedade font que é uma abreviatura para definir várias propriedades, a propriedade margin é também uma abreviatura para definir todas as propriedades da margem. O exemplo acima pode ser abreviado para:
BLOCKQUOTE {
margin: 1em 0em 1em 0em;
font-style: italic;
}
O primeiro valor - 1em - é para margin-top. Os outros valores estão na ordem dos ponteiros do relógio, ou seja: 0em para margin-right, 1em para margin-bottom, e 0em para margin-left.
Como zeramos a margem esquerda do texto, é necessário acrescentar um outro estilo pra destacá-lo do restante. Fizemos isto definindo font-style itálico e adicionando um fundo para destacar ainda mais o texto em blockquote:
BLOCKQUOTE {
margin: 1em 0em 1em 0em;
font-style: italic;
background: #EDB;
}
O resultado é mostrado abaixo:
![[image]](10.png)
Como já era esperado o fundo do elemento blockquote mudou. Ao contrário do que vimos nos exemplos anteriores a cor do fundo foi definida usando a notação red/green/blue (RGB). Cores RGB são descritas com detalhes no Capítulo 11 .
Um problema de estilização que podemos notar no exemplo acima é que a cor de fundo cobre apenas o texto. O espaçamento em volta do texto - a área das margens - não é coberta pela cor do fundo. Em CSS existe um outro tipo de espaçamento chamado padding, que é coberto pela cor definida para o fundo do elemento. A propriedade padding é muito semelhante à propriedade margin: ambas adicionam um espaçamento em volta do elemento:
BLOCKQUOTE {
margin: 1em 0em 1em 0em;
font-style: italic;
background: #EDB;
padding: 0.5em;
}
Veja a seguir o resultado do uso de padding:
![[image]](11.png)
Notar que definimos apenas um valor (0.5em) para a propriedade padding. Assim como para a propriedade margin, a propriedade padding pode ser resumida e neste caso o valor será considerado para os quatro lados padding-top, padding-right, padding-bottom e padding-left respectivamente. Assim, quando quisermos definir o mesmo valor para os 4 lados para escrevê-lo uma só vez. Isto é válido tanto para padding quanto para margin (algumas outras propriedades também podem ter seus valores escritos desta maneira como veremos em Space around boxes. ).
Tarefas comuns: links
Para facilitar a navegação entre documentos de hipertexto os links devem ser estilizados de uma maneira que os destaque no documento. Os navegadores HTML por padrão colocam um sublinhado nos links. Além disto é comum a mudança de cor nos textos dos links para indicar se o link foi visitado ou não. Links são uma parte fundamental da Web e as CSS oferecem suporte extra para estilizá-los. A seguir um exemplo simples:
A:link { text-decoration: underline }
No exemplo acima links não visitados serão sublinhados:
![[image]](12.png)
Notar que os links estão sublinhados como nós definimos mas também estão na cor azul o que nós não definimos. Quando o desenvolvedor não define todas as possibilidades para os links, o navegador adota estilos default para links. A interação entra os estilos definidos pelo autor, o estilo default do navegador e os estilos definidos pelo usuário (as preferências do usuário) é e aqui temos outro exemplo de resolução de regras CSS's conflitantes) chamada de efeito cascata (a letra "C" de CSS). Veremos o efeito cascata a seguir.
O seletor (A:link) merece uma explicação. Você provavelmente reconhece "A" como sendo um elemento HTML, mas, a outra parte é nova.":link" é uma das inúmeras pseudo classes existentes em CSS. Pseudo classes são usadas para estilizar elementos baseado em informações fora do documento propriamente dito. Por exemplo: não se pode saber se determinado link foi visitado ou não. Pseudo classes são descritas com detaçlhes no Capítulo
4, contudo nós daremos mais alguns exemplos a seguir:
A:visited { text-decoration: none }
Esta regra estiliza links visitados, assim como
A:link estiliza links não visitados.
A seguir um exemplo um pouco mais complexo:
A:link, A:visited { text-decoration: none }
A:hover { background: cyan }
A última regra mostra uma nova pseudo classe :hover. Supondo que o usuário coloque o ponteiro de um dispositivo (um mouse, por exemplo) sobre o link a regra de estilo definida em :hover será aplicada no link. Um efeito muito comum para estes casos é a mudança da cor de fundo do link. O resultado seria assim:
![[image]](13.png)
A pseudo classe :hover tem uma história interessante. Foi introduzida com as CSS2 depois que o efeito hover tornou-se popular entre programadores JavaScript . A solução com JavaScript requer um código bastante complicado quando comparada com a solução CSS é a adoção da pseudo classe :hover tornou-se bastante popular entre os Web Designers.
Uma palavra sobre o efeito cascata
Uma funcionalidade fundamental das CSS é o fato de que mais de uma folha de estilos pode afetar a apresentação do documento. Esta funcionalidade é conhecida como efeito cascata porque as diferentes folhas de estilos são consideradas e aplicadas como se estivessem em série. Efeito cascata é uma funcionalidade fundamental das CSS, porque nós chegamos a conclusão que um único documento pode estar atrelado a folhas de estilos residentes em diferentes lugares: no navegador, as folhas de estilos dos autores do documento e possivelmente as preferências de estilos do usuário.
Nos últimos exemplos estudados nós vimos que os links eram na cor azul embora nós não tivéssemos definido esta cor na folha de estilos. O navegador sabe também como estilizar e apresentar elementos como blockquote e h1 mesmo sem que isto tenha sido definido em folhas de estilos. Tudo o que o navegador sabe antecipadamente (por default) como estilizar está armazenado numa folha de estilos default do navegador e será confrontada com a folha de estilos do autor e do usuário para o resultado final da estilização e determinação de como o documento será apresentado.
Sabemos há muito que os autores desejam desenvolver suas próprias estilizações. Mas descobrimos que os usuários também têm suas preferências de estilização para visualizar os documentos. Com CSS, os usuários podem fazer isto, desenvolvendo uma folha de estilos personalizada que será confrontada com a folha de estilos do autor e do navegador. Havendo conflitos entre as folhas de estilos, quem resolve é o navegador. Usualmente o autor tem a preferência, seguido pelo usuário e finalmente pelo navegador. Mas o autor pode definir sua regra de estilo como sendo importante e assim ter a prioridade máxima na resolução de conflitos.
Nós estudaremos com detalhes o efeito cascata no Capítulo 15 , "Cascading and inheritance." Mas, antes disto, existe muita coisa a estudar sobre fontes espaçamentos e cores.