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. • Seletor (Elemento) descreve o elemento de design ao qual o estilo será aplicado.→ A mesma tag HTML, mas sem os sinais de maior e menor. Essa parte da regra é, às vezes, chamada de seletor. • Proriedade (Atributo) o aspecto específico do elemento que você quer usar como→ estilo. Deve ser um nome de atributo CSS válido, como o atributo fontsize. • Valor a configuração aplicada ao atributo. Deve ser uma configuração válida para→ o atributo em questão, como 20pt (20 pontos) para fontsize. • Atributo: valor a parte declaração da regra. Você pode atribuir múltiplas→ declarações se desejar separálos com pontoevírgula (;). Por exemplo: h1 {color: #000000;} é uma regra CSS Onde: •h1 é o seletor •{color: #000000;} é a declaração •color é a propriedade CSS •#000000 é o valor CSS p {textindent:10pt;} é uma regra CSS Onde: •p é o seletor. •{textindent: 10pt} é a declaração CSS •textindent é a propriedade CSS •10pt é 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 “Primeiro_CSS.html”. 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: • 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 • 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 • 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. • 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) • Regras mais específicas têm a prioridade sobre as menos específicas. • Entre regras de mesmo peso, têm prioridade aquelas declaradas por último na sequência das regras na folha de estilos. • 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;