Apostila_HTML_CSS_E-Jovem 11
Pré-visualização17 páginas
retire da marcação HTML toda a formatação
(apresentação) do documento WEB. Quem vai determinar cores, formas, tipos, tamanhos,
posicionamento, e, enfim, todo o "visual" da página, são as CSS.
Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das
principais:
a) Controle total sobre a apresentação do site a partir de um arquivo central;
b) Agilização da manutenção e redesign do site;
c) Saída para diferentes tipos de mídia a partir de uma versão única de HTML;
d) Redução do tempo de carga dos documentos Web;
e) Adequação simplificada aos critérios de acessibilidade e usabilidade;
f) Elaboração de documentos consistentes com as aplicações futuras de usuários;
g) Aumento considerável na portabilidade dos documentos Web.
Quando um usuário quer acessar uma página web, o browser tem que analisar todo o
código HTML desta para representála na tela. Se você colocar uma formatação complexa
nas suas páginas, isso acrescentará um tempo maior de análise para cada página. Ao
colocar as formatações numa única folha de estilo referenciada por cada página, você reduz
a quantidade de código das páginas e, conseqüentemente, isto reduz também a quantidade
de dados que têm que ser transmitidos e analisados pelos browsers. O resultado são páginas
que aparecem mais rapidamente e usuários mais felizes.
Projeto eJovem Módulo II: CSS 38
2.2. Estrutura do CSS
O CSS é composto por regra, que é uma unidade mínima de programação de estilos, que
segue uma sintaxe própria e destinase a estilizar uma ou mais propriedades.
A sintaxe de uma regra compreende um seletor, uma propriedade e um valor, escritos
como mostrado abaixo. Ao conjunto de propriedade e valor, denominamos de declaração.
\u2022 Seletor (Elemento) descreve o elemento de design ao qual o estilo será aplicado.\u2192
A mesma tag HTML, mas sem os sinais de maior e menor. Essa parte da regra é, às
vezes, chamada de seletor.
\u2022 Proriedade (Atributo) o aspecto específico do elemento que você quer usar como\u2192
estilo. Deve ser um nome de atributo CSS válido, como o atributo fontsize.
\u2022 Valor a configuração aplicada ao atributo. Deve ser uma configuração válida para\u2192
o atributo em questão, como 20pt (20 pontos) para fontsize.
\u2022 Atributo: valor a parte declaração da regra. Você pode atribuir múltiplas\u2192
declarações se desejar separálos com pontoevírgula (;).
Por exemplo:
h1 {color: #000000;} é uma regra CSS
Onde:
\u2022h1 é o seletor
\u2022{color: #000000;} é a declaração
\u2022color é a propriedade CSS
\u2022#000000 é o valor CSS
p {textindent:10pt;} é uma regra CSS
Onde:
\u2022p é o seletor.
\u2022{textindent: 10pt} é a declaração CSS
\u2022textindent é a propriedade CSS
\u202210pt é o valor CSS
Entre os caracteres permitidos no CSS estão as letras de az, AZ, os números de 09, hífen
e caracteres de escape. Caracteres Unicode 161255, bem como caracteres Unicode como
códigos numéricos. Não é permitido iniciar um nome com um traço ou número.
2.3. Iniciando a prática do CSS
Tendo estas primeiras noções, veremos agora como incorporar as regras de CSS. Como foi
dito, não mais usaremos as TAGS da forma que foram usadas anteriormente, algumas delas
nem mais serão usadas, e as que forem usadas, serão modificadas.
Primeiramente, iremos utilizar, assim como no inicio, o programa Quanta.
Vamos novamente abrilo e executar o documento básico, como fizemos lá, digitaremos um
texto abaixo para facilitar o andamento da atividade, pegaremos um trecho da nossa
apostila:
Projeto eJovem Módulo II: CSS 39
Vamos começar a entender a mudança dos atributos do corpo do texto (<body>) e do
título do texto, não usando mais declarações de TAGS dadas antes.
Primeiramente, clique dentro da TAG <BODY>. Em seguida, na aba estilo (Figura abaixo)
e em depois no ícone CSS:
Aparecerá a tela com as propriedades do CSS.
Vamos primeiramente modificar o tipo de fonte (fontfamily) e o tamanho da fonte (font
size). Para modificar o tipo de fonte, dê dois cliques no nome font (Destaque na imagem
abaixo) e em seguida clique no ícone:
Surgirá a tela para escolha das fontes desejadas. Ao visualizar a fonte desejada, clique na
seta em destaque. (Conforme figura abaixo). Escolha 3 fontes e confirme no OK.
Projeto eJovem Módulo II: CSS 40
Siga os mesmos passos no fontsize, colocando o tamanho 13.
Confirma no OK e veja o resultado da TAG <BODY>
Agora, já que vimos uma parte do que se pode fazer, iremos então modificar um pouco mais
a TAG <BODY> e incrementar a TAG <H2>
Faça as modificações você mesmo:
Como resultado temos:
Tendo isso, podemos na nossa página modificar os valores e ir verificando o resultado.
Salve o documento como \u201cPrimeiro_CSS.html\u201d.
As Regras não são case sensitivas, isto é, podemse usar maiúsculas ou minúsculas nas
folhas de estilo indiferentemente. Isto é válido somente para as declarações específicas da
folha de estilo, porém em outros casos, não. Por exemplo: na declaração, escrever o valor
figura.gif é diferente de FIGURA.gif
Comentários podem e devem ser usados nas folhas de estilo. É recomendável que se faça
amplo uso de comentários para fornecer informações sobre os seletores, propriedades e
valores declarados, com o intuito de facilitar futuras modificações ou mesmo entendimento
do código gerado. Os comentários devem estar entre as marcas /* e */ e podem ser
inseridos em qualquer espaço em branco dentro da folha de estilos. Não são permitidos
comentários aninhados.
/* Isto é um comentário CSS */
Dentro do CSS, temos efeito cascata, que é o método pelo qual é aplicada uma regra em
função do importância da regra. Quando em um elemento HTML aplicase mais de uma
regra, dizse que há um conflito de regras e será aplicada aquela que tiver maior
prioridade, sendo determinada pela ordem do efeito cascata.
A ordem para o efeito cascata é a ordenação das regras de acordo com critérios pré
estabelecidos, com a finalidade de resolver eventuais conflitos entre regras. E estes critérios
são os abaixo enumerados:
\u2022 Localizadas todas as regras aplicáveis ao seletor/propriedade, determinase a
especificidade de cada uma delas. A regra mais especifica entre as conflitantes será
aplicada.
Projeto eJovem Módulo II: CSS 41
\u2022 Se não for encontra uma (ou mais) regra aplicável ao elemento HTML, este herdará
as propriedades de estilo de seu elemento pai. Não havendo elemento pai, será
aplicado o valor inicial default de estilo para aquele elemento
\u2022 Regras com declaração importante (!important) tem prioridade sobre aquelas sem a
declaração. Se o autor e o usuário declaram regras conflitantes com !important, as
do usuário têm prioridade sobre as do autor.
\u2022 Regras com mesmo pêso (sem !important) e coflitantes, declaradas pelo autor têm
prioridade sobre aquelas declaradas pelo usuário. Regras do usuário com maior
especificidade que aquelas do autor têm a prioridade. Regras com igual
especificidade declaradas pelo autor têm prioridade sobre as do usuário. Regras do
autor e do usuário têm prioridade sobre as regras default das aplicações do usuário
(p.ex.: o browser)
\u2022 Regras mais específicas têm a prioridade sobre as menos específicas.
\u2022 Entre regras de mesmo peso, têm prioridade aquelas declaradas por último na
sequência das regras na folha de estilos.
\u2022 Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem,
têm do maior para o menor peso (estilos inline têm o maior peso). Entre várias
folhas de estilo lincadas, têm maior prioridade aquela importada por último (mais
próxima da tag </head>). O mesmo ocorre entre as folhas importadas (@import)
2.3.1. Declaração e o fragmento de uma regra dentro dos colchetes { }
A declaração compõese de duas partes: a propriedade e o valor e uma regra pode conter
várias declarações separadas por um pontoevírgula (;).
Por exemplo:
h1 {color: #000000;