• Tweet
• Email

• Tweet
• Email

CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte IV) vamos finalizar os selectores e dar-lhe a conhecer algumas dicas valiosas, bem como um pequeno resumo sobre aquilo que abordámos até agora.

Não perca os artigos anteriores:

• Programação CSS para iniciantes (Parte I)
• Programação CSS para iniciantes (Parte II)
• Programação CSS para iniciantes (Parte III)

7. SELECCIONAR ATRIBUTOS PARCIAIS

As regras de estilização podem seleccionar elementos HTML para estilização ao corresponder valores parciais de atributos. Isto permite ao selector definir qual o elemento baseado na presença de uma palavra nos atributos que tenham uma lista de palavras separadas por um espaço. Geralmente esta técnica é utilizada para corresponder com uma das palavras utilizadas no atributo class de um elemento HTML.

A sintaxe para corresponder a uma palavra numa lista contém um “~” no selector para corresponder todos os elementos que tenham um atributo class com uma palavra atribuída. ( [class~="palavra"] ). Para complementar, um selector de uma regra de estilização pode seleccionar um elemento HTML para estilizar correspondendo ao início de um valor de um atributo do elemento.

Normalmente esta técnica é utilizada para corresponder a valores inseridos num elemento HTML no atributo “lang”. A sintaxe css para corresponder ao início de um valor de um atributo adiciona um “|” ao selector, de forma a definir que está a corresponder a todos os elementos que tenham o atributo “lang” com o inicio definido no selector.

1. Crie um documento HTML e insira o código abaixo:

   <ol>
   <li class="reptil">Crocodilo</li>
   <li class="animal">Cavalo</li>
   <li class="animal">Cão</li>
   <li class="ave">Caturra</li>
   <li class="peixe">Bacalhau</li>
   </ol>
   
   <ul>
   <li lang="pt">Olá Portugal</li>
   <li lang="pt-br">Olá Brasil</li>
   <li lang="en-us">Hello America</li>
   </ul>

2. De seguida crie um ficheiro de folha de estilos e insira o seguinte código para seleccionar e colorir os animais que estiverem na class “animal”:

   *[class~="animal"] {background: red}

   

3. Agora adicione uma nova regra de estilos para seleccionar de acordo com o atributo lang:

   *[lang|="pt"] {color: white; background: blue}

   

4. Agora dê asas à sua imaginação e altere o código CSS para criar diferentes regras de estilização de acordo com a sua preferência. A melhor maneira de ficar a conhecer e aprender estas técnicas é meter mãos à obra e experimentar, errando e corrigindo os erros. Assim você irá ganhar a experiência e o conhecimento necessários para efectuar estas operações sem necessitar de consultar conteúdo para relembrar como é feito!

8. AVALIAR A IMPORTÂNCIA

Os navegadores avaliam a importância das regras de estilo presentes na folha de estilo em cascata, determinando qual o “peso” de cada regra e determinando quais têm mais importância e deverão ser aplicadas. A importância de cada regra de estilo pode ser definida inserindo uma declaração “!important” para aumentar a sua importância.

A título de exemplo, a regra “h2 {color: blue !important}” tem superioridade sobre esta regra “h2 {color: red}”, sendo assim a cor azul aplicada aos headings h2. Embora as folhas de estilo de autor tenham superioridade sobre as demais, uma regra de utilizador que contenha a declaração !important tem superioridade sobre uma regra de autor com a mesma declaração. Então a hierarquia é determinada desta forma:

1. Declaração de utilizador !important
2. Declaração de autor !important
3. Folha de estilo de autor
4. Folha de estilo de utilizador
5. Folha de estilo do navegador

Quando mais que uma regra de estilização têm a mesma importância e estão a estilizar o mesmo elemento, o navegador irá avaliar qual a especificidade do selector em cada uma das regras de estilização, atribuindo mais valor aquela que for mais específica. A avaliação de especificidade atribui “pontos” por cada selector, que são guardados para mais tarde ser feita a comparação.

Então, a especificidade pode ser expressada em uma lista de números separados por virgulas, em que 0,0,0,0 é considerado valor zero na especificidade. Considere alguns itens importantes a ter em conta:

• Por cada elemento e pseudo elemento no selector, adiciona 0,0,0,1.
• Por cada valor no atributo class, selecção por atributo ou pseudo class adiciona 0,0,1,0.
• Por cada atributo id no selector adiciona 0,1,0,0.
• Por cada declaração de estilo em linha adiciona 1,0,0,0.

No processo da comparação da especificidade dos valores, os registos são examinados individualmente da esquerda para a direita até que seja encontrada uma diferença. A regra de estilizaçao com o mais valor no registo é então aplicada. Vamos ver um exemplo:

1. Crie um documento HTML contendo três cabeçalhos:

   <h2>Primeiro cabeçalho</h2>
   <h2 id="heading2">Segundo cabeçalho</h2>
   <h2 class="header">Terceiro cabeçalho</h2>

2. De seguida crie uma folha de estilos e linke-a ao documento. Insira o seguinte código:

   h2 {color: yellow !important}
   h2 {color: red }

3. Agora adicione as seguintes regras de estilização que irão estilizar individualmente o fundo dos elementos de maneiras diferentes:

   h2 {background: aqua}
   body h2{background: blue}
   
   #heading2{background: maroon}
   h2#heading2{background: red}
   
   h2.header{background: olive}
   body.h2.headers{background: green}

4. Agora guarde os ficheiros e observe o resultado:
   
5. Agora é a altura em que você pega no código que já tem e vai experimentar alterar valores, introduzir e remover atributos nas regras de estilização e observar o resultado – lembre-se: a melhor maneira de aprender é sempre praticar, onde cometemos erros e aprendemos com os mesmos.

9. RESUMO

• Um selector por tipo selecciona todos os elementos do tipo especificado e múltiplos elementos podem ser especificados numa lista.
• O selector universal * pode ser utilizado para seleccionar todos os elementos.
• O selector de class . selecciona todos os elementos que contenham um atributo class ao qual tenha sido atribuído um valor.
• O selector ID # selecciona todos os elementos que contenham um atributo ID com um valor atribuído.
• Um selector descendente especifica tanto o tipo de elemento como elemento do qual é descendente, separado por um espaço.
• Um selector por atributo pode corresponder a uma palavra numa lista utilizando a sintaxe que inclui “~”.
• Um selector por atributo pode corresponder ao inicio de um valor de um atributo utilizando a sintaxe “|”.
• Uma regra de estilo pode ganhar superioridade sobre outra ao utilizar a declaração !important.

Esta foi a última parte da série Programação CSS para Iniciantes, mas não vamos ficar por aqui relativamente ao CSS, fique atento e não perca os próximos conteúdos!

Abraço e até já!