mozilla
Os seus resultados da pesquisa

    Conteúdo

     

    Esta página descreve algumas maneiras que você pode usar no CSS para adicionar conteúdo quando um documento é exibido.

    Você modifica sua folha de estilo para adicionar conteúdo de texto e uma imagem.

    Informação: Conteúdo

    Uma das vantagens importantes das CSS é que ele o ajuda a separar o estilo do documento do seu conteúdo. Mas há situações onde faz sentido especificar certo conteúdo como parte de sua folha de estilo, não como parte do seu documento.

    O conteúdo especificado em uma folha de estilo pode consistir em texto ou imagens. Você especifica o conteúdo em sua folha de estilo quando o conteúdo tem uma ligação próxima à estrutura do documento.

    Mais detalhes
    Especificar o conteúdo em uma folha de estilo pode causar complicações. Por exemplo, você pode ter versões diferentes da língua do seu documento que compartilham uma folha de estilo. Se parte da folha de estilo tem que ser traduzida, isto mostra que você precisa por estas partes da folha de estilo em arquivos separados e arrumá-los para então ligá-los com a versão apropriada da língua do seu documento.

    Estas complicações não surgem se o conteúdo que você especificou consistir em símbolos ou imagens que se aplicam em todas as línguas e culturas.


    O conteúdo especificado em uma folha de estilo não se tornará parte do DOM.

    Conteúdo do texto

    CSS pode inserir um texto antes ou depois de um elemento. Para especificar isto, faça uma regra e adicione :before ou :after ao seletor. Na declaração, especifique a propriedade content com o conteúdo do texto como seu valor.

    Exemplo
    Esta regra adiciona o texto Referência: antes de todo elemento com a classe ref:
    .ref:before {
      font-weight: bold;
      color: navy;
      content: "Referência: ";
      }
    
    Mais detalhes
    O caractere de configuração de uma folha de estilo é por padrão o UTF-8, mas isto pode ser especificado na ligação, na própria folha de estilo ou por outras maneiras. Para detalhes, veja 4.4 CSS style sheet representation na CSS Specification.

    Caracteres individuais podem às vezes ser especificados por um mecanismo de escape que use o contra barra (\) com o caráter de escape. Por exemplo, \265B é um símbolo do xadrez para a rainha preta ♛. Para detalhes, veja Referring to characters not represented in a character encoding e também Characters and case em CSS Specification.

    Conteúdo da imagem

    Para adicionar uma imagem antes ou depois de um elemento, você pode especificar a URL de um arquivo de imagem no valor da propriedade content.

    Exemplo
    Esta regra adiciona um espaço e um ícone depois de cada ligação da classe glossary:
    a.glossary:after {content: " " url("../images/glossary-icon.gif");}
    


    Para adicionar uma imagem ao fundo de um elemento, especifique a URL de um arquivo de imagem no valor da propriedade background. Isto é uma propriedade que especifica a cor do fundo, a imagem, como a imagem repete, e alguns outros detalhes.

    Exemplo
    Esta regra configura o fundo de um elemento específico, usando uma URL para especificar um arquivo de imagem.

    O seletor especifica o id do elemento. O valor no-repeat faz a imagem aparecer apenas uma vez:

    #sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
    
    Mais detalhes
    Para informações sobre propriedades individuais que afetam o fundo, e sobre outras opções que você pode especificar para as imagens de fundo, veja The background na CSS Specification.

    Ação: Adicionando uma imagem de fundo

    Esta imagem é um quadrado branco com uma linha azul em baixo. Baixe o arquivo desta imagem no mesmo diretório do seu arquivo CSS:

    Image:Blue-rule.png

    (Por exemplo, clique com o botão direito sobre isto para abrir o menu de contexto, então escolha Salvar Imagem Como... e especifique o diretório que você está usando para este tutorial.)

    Edite o seu arquivo CSS e adicione esta regra ao corpo, configurando a imagem de fundo para a página inteira.

    background: url("Blue-rule.png");
    

    O valor repeat é o padrão, então isto não precisa ser especificado. A imagem é repetida horizontal e verticalmente, dando a aparência parecida com a de um papel de escrita com linhas:

    Image:Blue-rule-ground.png

    Cascading Style Sheets

    Cascading Style Sheets

    Desafio
    Baixe esta imagem:
    Image:Yellow-pin.png

    Adicione uma regra à sua folha de estilo então isto mostrará a imagem no começo de cada linha:

    Image:Blue-rule-ground.png

    image:Yellow-pin.png Cascading Style Sheets
    image:Yellow-pin.png Cascading Style Sheets

    O que vem depois?

    Uma maneira comum de adicionar conteúdo à folha de estilo é marcar os itens em listas. 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.

    A próxima página descreve como especificar o estilo para elementos de listas: Listas

    Categorias

    Interwiki Language Links

    Etiquetas do documento e colaboradores

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