Programação CSS para iniciantes (Parte III)

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 (Ver 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 III) vamos-lhe continuar a mostrar como seleccionar os elementos de um documento HTML para estilizar ao seu gosto.

Não perca os artigos anteriores:

CSS

4. SELECCIONAR POR DESCENDENTES

Um selector descendente pode ser utilizado numa regra de estilo para seleccionar elementos HTML por referência a um outro elemento do qual são descendentes. Por exemplo, um elemento span dentro de um parágrafo é descendente do elemento parágrafo – então podemos utilizar um selector descendente para seleccioná-lo e aplicar estilização:

Crie um documento HTML com uma lista não ordenada e uma lista ordenada dentro de um container div:

<div id="menu">
<ul>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
</ul>
<ol>
<li>Computador</li>
<li>Mouse</li>
</ol>
</div>

Crie uma folha de estilos com as regras de estilização abaixo:
```
ul li {color: red}
ol li {color: green}
```
Guarde ambos os ficheiros e observe o resultado:
Edite o ficheiro de estilização e substitua pelo seguinte código:
```
#menu li {color: green}
```
Guarde o ficheiro e observe o resultado:

5. SELECCIONAR POR RELAÇÃO

As regras de estilização podem seleccionar elementos para estilização utilizando a estrutura do documento HTML em si. Os elementos em todos os documentos HTML são ordenados hierarquicamente, descendendo do elemento <html>. O próximo nível contém o <head> e <body>. Cada um destes contém elementos que poderão conter elementos, e assim continuará a hierarquia. No código abaixo, as relações que introduzimos são em criadas a partir do <body>.

Crie um documento HTML contendo o seguinte código:

<body>
<h3>Cabeçalho - filho</h3>
<p>parágrafo - filho</p>
<p>parárafo - filho
    <span>Span - neto</span></p>
<ul>
<li>Lista 1 - neto</li>

<li>Lista 2
    <span>Span - bisneto</span></li>
</ul>
</body>

Crie uma folha de estilos e linke-a ao documento. Introduza o seguinte código:
```
h3 + p {background: yellow}
```
De seguida adicione o seguinte código para estilizar o “Span – neto”:
```
p > span {background: lime}
```
Adicione o seguinte código para seleccionar cada elemento descendente na lista, atribuindo diferentes estilizações:
```
body > ul {background: fuchsia}
body > ul > li {background: aqua}
body > ul > li > span {background: orange}
```
Guarde os documentos e observe o resultado:

6. SELECCIONAR POR ATRIBUTO

As regras de estilização podem seleccionar elementos HTML para estilizar através de um atributo que esse elemento contenha. O selector neste caso especifica o nome do atributo dentro de parêntesis rectos [ ]. A título de exemplo, o selector *[src] seleccionaria todos os elementos que tivessem o atributo “src” , independentemente dos valores associados a esse atributo. Além disso, o selector por atributo pode especificar múltiplos atributos para seleccionar apenas os elementos que contenham todos os atributos especificados. A título de exemplo, o selector *[src][alt] seleccionaria todos os elementos que contivessem ambos os atributos, mais uma vez independentemente dos valores associados a esses atributos.

Crie um documento HTML e insira o seguinte código:

<div><a id="top">Âncora</a></div><hr />
<div><a href="http://www.escolacriatividade.com/">Hiperligação</a></div><hr />
<div><a href="http://www.escolacriatividade.com/" title="Escola Criatividade">Hiperligação com Título</a></div><hr />
<div><a href="#top" title="Topo da página">Hiperligação de página</a></div><hr />
<div><a id="bottom">Âncora</a></div>

De seguida crie uma folha de estilos e linke-a ao documento HTML. Insira o seguinte código para estilizar o fundo de todas as âncoras contento um atributo id:
```
a[id] {background: red}
```
Adicione uma regra de estilização ao seu ficheiro CSS para colorir o texto nas hiperligações que contenham o atributo href:
```
a[href] {color: orange}
```
Agora adicione outra regra de estilização que vai colorir o fundo de todas as hiperligações que contenham o atributo href e o atributo title:
```
a[href][title] {background:green}
```
Por último, adicione esta regra de estilização para desenhar um limite à volta das hiperligações que tenham um atributo href com o valor “#top”:
```
a[href="#top"] {border: 0.3em solid black}
```
Guarde os documentos e observe o resultado: