Apostila_HTML_CSS_E-Jovem 11
73 pág.

Apostila_HTML_CSS_E-Jovem 11


DisciplinaLógica I9.961 materiais142.090 seguidores
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 e­Jovem ­ 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 destina­se 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 font­size.
\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 font­size.
\u2022 Atributo:  valor     a   parte   declaração   da   regra.   Você   pode   atribuir   múltiplas\u2192  
declarações se desejar separá­los com ponto­e­ví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 {text­indent:10pt;} é uma regra CSS
Onde:
\u2022p é o seletor.
\u2022{text­indent: 10pt} é a declaração CSS
\u2022text­indent ­ é a propriedade CSS
\u202210pt ­ é o valor CSS
Entre os caracteres permitidos no CSS estão as letras de a­z, A­Z, os números de 0­9, hífen 
e caracteres de escape. Caracteres Unicode 161­255, 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 abri­lo 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 e­Jovem ­ 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 (font­family) 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 e­Jovem ­ Módulo II: CSS 40
Siga os mesmos passos no font­size, 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 é,  podem­se 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 aplica­se mais de uma 
regra, diz­se 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,   determina­se   a 
especificidade de cada uma delas. A regra mais especifica entre as conflitantes será 
aplicada.
Projeto e­Jovem ­ 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õe­se de duas partes: a propriedade e o valor e uma regra pode conter 
várias declarações separadas por um ponto­e­vírgula (;).
Por exemplo:
h1 {color: #000000;