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:

  1. 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>
  2. Crie uma folha de estilos com as regras de estilização abaixo:
    ul li {color: red}
    ol li {color: green}
  3. Guarde ambos os ficheiros e observe o resultado:
    CSS
  4. Edite o ficheiro de estilização e substitua pelo seguinte código:
    #menu li {color: green}
  5. Guarde o ficheiro e observe o resultado:
    CSS

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>.

  1. 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>
  2. Crie uma folha de estilos e linke-a ao documento. Introduza o seguinte código:
    h3 + p {background: yellow}
  3. De seguida adicione o seguinte código para estilizar o “Span – neto”:
    p > span {background: lime}
  4. 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}
  5. Guarde os documentos e observe o resultado:
    CSS

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.

  1. 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>
  2. 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}
  3. 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}
  4. 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}
  5. 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}
  6. Guarde os documentos e observe o resultado:
    CSS

Não perca a continuação deste artigo com a Parte IV onde iremos continuar a abordagem aos selectores em CSS!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Rick
    24 de janeiro de 2012

    Muito bom!



    • Diogo Espinha
      26 de janeiro de 2012

      Obrigado pelo seu comentário Rick!

      Abraço!



  2. Gilmar Coimbra
    29 de maio de 2012

    Parabéns, uma vez mais, pelas excelentes postagens!
    (Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

    Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

    Obrigado.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz