mozilla
Os seus resultados da pesquisa

    Como o CSS trabalha

    Esta página explica como o CSS trabalha no seu navegador. Você analiza seu documento de amostra, reavaliando os detalhes do seu estilo.

    Informação: Como o CSS trabalha

    Quando o Mozilla exibe um documento, é necessário combinar o conteúdo do documento com seu estilo de informação. Então o documento é processado em dois estágios:

    • No primeiro estágio, o Mozilla converte a linguagem de marcação e o CSS em DOM (Document Object Model - Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Isto combina o conteúdo do documento com seu estilo.
    • No segundo estágio, o Mozilla exibe o DOM.

    Uma linguagem de marcação usa tags para definir a estrutura do documento. Uma tag pode armazenar outras tags entre seu início e fim.

    Um DOM tem a estrutura como a de uma árvore. Cada tag e período do texto na linguagem de marcação torna-se um na estrutura da árvore. Os nós do DOM não são armazenadores. Em substituição, eles são primários aos nós subordinados.

    Os nós que correspondem a tags também são conhecidos por elementos.

    Exemplo
    No seu documento de amostra, a tag <p> e seu fim </p> criam um armazenamento:
    <p>
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
    

    No DOM, o corespondente ao nó P é um primário. Os subordinados são os nós STRONG e os nós do texto. Os nós STRONG são os primários, e os nós do texto são os subordinados.

    P ├─STRONG │ │ │ └─"C"

    ├─"ascading"

    ├─STRONG │ │ │ └─"S"

    ├─"tyle"

    ├─STRONG │ │ │ └─"S"

    └─"heets"

    O entendimento do DOM ajuda-o a projetar, depurar e manter seu CSS, pois o DOM é onde o seu CSS e o conteúdo do documento se unem.

    Ação: Analizando um DOM

    Para analizar um DOM, você precisa de um software especial. Aqui, você usa o DOM Inspector (DOMi) da Mozilla para analizar um DOM.

    Use seu navegador Mozilla para abrir seu documento simples.

    Na barra de menu do seu navegador, escolha Ferramentas – DOM Inspector, ou talvez Ferramentas – Desenvolvimento Web – DOM Inspector.

    Mais detalhes
    Se seu navegador Mozilla não tem o DOMi, você pode reinstalá-lo assegurando-se de escolher para instalar o componente de ferramentas da web. Então retorne a este tutorial.

    Se você não quiser instalar o DOMi, você pode pular esta seção e ir diretamente para a próxima página. Pulando esta seção você não interfere com o resto deste tutorial.


    No DOMi, expanda os nós do seu documento clicando em suas flechas.

    Nota: O espaçamento em seu arquivo HTML faz com que o DOMi mostre alguns nós de texto vazios, que você pode ignorar.

    O resultado deve ser parecido com isto, dependendo do que você tenha expandido:


    P │ │ │ STRONG │ │ └#text │ ├╴#textSTRONG │ │

    Quando você seleciona algum nó, você pode usar o painel direito do DOMi para achar mais sobre ele. Por exemplo, quando você seleciona um nó do texto, DOMi mostra para você o texto no painel da direita.

    Quando você seleciona um elemento nó, DOMi o analiza e fornece uma enorme quantidade de informações no seu painel direito. A informação sobre estilo é somente uma parte das informações que ele fornece.

    Desafio
    No DOMi, clique no nó STRONG.

    Use o painel direito do DOMi para achar onde fica a cor do nó (vermelho) e onde sua aparência é mais forte que o texto normal (negrito).

    O que vem depois?

    Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

    Se você tomou o desafio, você viu o estilo da informação em mais de um lugar interagir para criar o estilo final para um elemento.

    A próxima página explica mais sobre estas interações: Cascata e herança

    Etiquetas do documento e colaboradores

    Etiquetas: 
    Contributors to this page: Verruckt, Leandro Mercês Xavier, fscholz, teoli
    Última atualização por: fscholz,