Introdução às regras de estilo CSS: sintaxe, seletores, propriedades e herança, Notas de estudo de Engenharia Telemática

Baixe Introdução às regras de estilo CSS: sintaxe, seletores, propriedades e herança e outras Notas de estudo em PDF para Engenharia Telemática, somente na Docsity!

Curso Subsequente em Manutenção e Suporte em Informática

Introdução às Tecnologias Web

Cascading Style Sheets

Prof. César Rocha - Copyright©

[email protected]

Roteiro

• Em poucos slides, explorar os fundamentos do padrão Web CSSCSS

– sintaxe, seletor, propridades, regras, CSS no XHTML, vantagens, herança e

override de propriedades no código CSS, otimizando partes do CSS,

declaração de classes, pseudo-classes, usando o validador CSS, etc.

• Mostrar vários exemplos de códigos CSS que você deve testar para

solidificar seus conhecimentos nesta nova linguagem

– Este novo assunto é, como no caso do XHTML, de suma importancia para as

próximas disciplinas do curso (Desenvolvimento Web, etc.)

• Aconselha-se utilizar uma referência para acompanhar este assunto

– Mais sobre qual referência pode ser utilizada adiante…

O início da Web(cont.)

Lojas Maia (ano 1998)

Venha conhecer nossa queima de estoque da semana! Temos promoções imperdíveis para você!

Veja alguns exemplos:

Liquidificador Arno – R$ 56. Aspirador de pó CCE – R$ 156.

Traga logo sua família! Não perca tempo. Ofertas válidas enquanto durar o estoque!

Copyright © 1998 – todos os direitos são estritamente reservados.

Aqui estão alguns atributos que controlam a aparência. bgcolor define a cor de fundo e o text define a cor do texto existente

Tipo da fonte!

Você podia escrever algumas tag’s sem fechá-las (e torcia para que todos os browsers entendessem isso… )

Alinhamento

Outra forma de alinhar!

Alguns atributos requeriam aspas duplas e outros não…

Agora o tamanho da fonte!

Obs.: também não havia nenhum DOCTYPE associado ao documento…

Um padrão de apresentação

• O padrão Web CSS 2.1CSS 2. 1 (Cascading Style Sheets)

– Na verdade, uma nova linguagem que possibilita a criação de regrasregras de

apresentação para apenas uma página ou até um site completo

– O CSS precisa da definição daprecisa da definição da estruturaestrutura do XHTML para funcionar

– Uma regra CSS é uma declaração que segue uma sintaxe própria e que define

como será aplicado um estilo a um (ou mais) elemento(s) XHTML

• Um conjunto de regras CSS forma uma ffolha deolha de eestilosstilos

– Estas regras são colocadas em um arquivo textoarquivo texto com extensão ..csscss

• Portanto, o CSS também nnããoo dependedepende de uma ferramenta específica

Obs.: já existe uma proposta da W3C do CSS 3 (ainda não completamente suportado por todos os navegadores atuais). Veja maiores detalhes em: http://www.w3.org/Style/CSS/current-work

Exemplo:

p {

color : red;

border: 1px solid gray;

A espessura da borda, o seu tipo e sua cor.

A partir daí, deve-se escolher a(s) propriedade(s). Neste caso, a cor do parágrafo será modificada

A primeira coisa que se deve fazer é selecionar o elemento XHTML que se quer estilizar. Note, porém, que não há <> no seletor! … a cor do parágrafo será vermelha (mais sobre cores adiante…)

Todo este código é chamado de regra CSS. Ela deve existir, preferencialmente, dentro de um arquivo .css

Esta propriedade é multivalorada. Ela aplica uma borda nos parágrafos da página

Obs.: observe as posições das chaves, dos sinais de dois pontos e ponto e vírgulas!

Comentários

• A regra mostrada há pouco seria aplicada a todos os parágrafos

– Ora, mas se fosse preciso aplicar duas cores diferentes a dois parágrafos?

• Será visto que CSS é capaz de selecionar apenas um elemento (e até sub-elementos!)

– E se houvesse um dentro do parágrafo? Sua cor seria alterada?

• Para utilizar CSS, faz-se necessária uma boa referência

– Ora, como é possível saber quais são todas as propriedades, valores e

sintaxe possíveis aplicáveis a um elemento XHTML?

• Ex.: é possível mudar a cor do texto de uma tag ?

• CSS Pocket Reference • CSS Pocket Reference (Eric Meyer)

Ligando o CSS ao XHTML(cont.)

ç Fazendo uma referência a um arquivo css externo à página

O título do documento

...

Exemplo:

Aqui está o código XHTML que indica ao browser onde encontrar o arquivo externo

Obs.: este arquivo css pode residir na sua estrutura de diretórios ou até mesmo vir de uma URL absoluta.

Delete isso…

index.css

p { p { color: red;color: red; border: (^) 1px (^) solid gray;

border: (^) 1px } (^) solid gray; }

Servidor Web

Anatomia de um LINK

O tipo da informação é “text/css”. Em outras palavras, o browser deve considerar o texto como sintaxe css.

A localização do arquivo é dita no atributo href (note que está sendo usada uma URL relativa, mas isso não é obrigatório!)

O atributo rel identifica o relacionamento entre o arquivo XHTML e a informação que está sendo linkada. Neste caso, estamos linkando uma folha de estilos

• Aqui vale a mesma regra para doctype: o pode ser escrito em apenas uma linha. Contudo, se for necessário quebrar uma linha, esta deve ser feita entre atributos

O elemento informa ao browser que uma informação externa será “linkada” à página

é um elemento vazio. Neste caso, foi usada a regra do XHTML strict ‘ />’

Otimizando o código CSS

• É possível definir quantas regras você quiser em um arquivo CSS

– Inclusive, é possível utilizar uma mesma propriedade, várias vezes.

• 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 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 encontrados

Mudar a cor de todos os parágrafos encontrados para vermelha

Otimizando o código CSS(cont.)

• Porém, há um problema com a abordagem anterior…

– Há duplicaçãoduplicação de propriedades e valores!

• O que fazer?

Pergunta intrigante…

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… Delete isso…

…mas, o que faríamos se quiséssemos, amanhã, colocar uma linha de borda apenas nos cabeçalhos de nível 1 , mas não em cabeçalhos ?

Overriding (sobreposição)

• Em situações que envolvam regras aplicadas a um mesmo descritor

XHTML, é comum sobreporsobrepor a aparência definida em regras anteriores

– A isso, dá-se o nome de override (ou sobreposição) de aparência

• 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;

Um meta-padrão

• Procure fatorarfatorar código comum a todos os descritores XHTML

– Ora, se a aparência tiver de mudar, apenas um único local será alterado

• Só então, a partir daí, defina regras de estilo mais específicasespecíficas

– Uma boa dica é fazer override de propriedades, caso estas já tenham sido

definidas em regras de estilo anteriores no código CSS

• Mesmo assim, muito cuidado na escrita de regras conflitantes!

• E lembre-se: ao resolver um conflito de regras em um arquivo CSS, o

browser irá sempre em busca da regra mais específica

– Mais sobre o cálculo de pesos no final do módulo…

Herança(cont.)

• “Elementos-filhos” podem herdar aparência de seus “pais”

– Mas isso apenas para algumasalgumas

propriedades!

• 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 “pai” de todos os elementos envolvidos no arquivo.

Delete isso…

A grande maioria dos filhos de (inclusive seus “netos”) serão afetados diretamente; como se houvesse uma regra explícita para cada um.

…mas, e se houvesse uma tag definida dentro de algum parágrafo? é um elemento inline (como , ,… ); sua fonte seria alterada?

Delete isso…

“Sobrepondo” a Herança

• Movendo a propriedade para , quase todos os elementos

tiveram suas fontes afetadas

– Mas, e se houver uma

herança indesejada?herança indesejada?

• 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…

É facil: apenas adicione uma nova regra selecionando apenas um determinado elemento desejado e atribuindo uma nova aparência ao mesmo