Linguagem de folhas de estilo

Uma linguagem de folhas de estilo, ou linguagem de estilo, é uma linguagem de computador que exprime a apresentação de documentos estruturados, um padrão para especificar a apresentação visual e também auditiva. O principal benefício é a separação entre a estilização e a estrutura de um documento, assim ao invés de colocar a formatação dentro do documento original, o desenvolvedor cria uma ligação ou importa um arquivo de folha de estilos para a página a ser formatada.

Uma linguagem de folhas de estilo moderna, com uso generalizado é a Cascading Style Sheetss (CSS), que é usada para estilizar documentos escritos em HTML, XHTML, SVG, XUL e outras linguagens de marcação.

Para o conteúdo de documentos estruturados ser apresentado, um conjunto de regras estilísticas - descrevendo, por exemplo, cores, fontes e layout - deve ser aplicada. Uma coleção de regras estilísticas é chamado de folha de estilo. As folhas de estilo em forma de documentos escritos têm uma longa história de uso pelos editores e tipógrafos para garantir a consistência de apresentação, ortografia e pontuação. Na publicação eletrônica, as linguagens de folhas de estilo são usadas ​​principalmente no contexto da apresentação visual ao invés de ortografia e pontuação.

Componentes

Todas as linguagens de folhas de estilo oferecem funcionalidade nas seguintes áreas:

Sintaxe

A linguagem de folhas de estilo precisa de uma sintaxe para assim ser expressa de uma forma legível para máquina. Por exemplo, aqui está uma folha de estilo simples escrita na sintaxe CSS:

h1 { font-size: 1.5em }

Seletores

Os seletores especificam quais elementos devem ser influenciados pela regra de estilo. Como tal, selectores ligam a estrutura do documento às regras estilísticas nas folhas de estilo. No exemplo acima , o selector h1 seleciona todos os elementos h1 de um documento. Os seletores mais complexos podem selecionar elementos com base, por exemplo, em seu contexto, atributos e conteúdos.

Propriedades

Todas as linguagens de folhas de estilo têm algum conceito de propriedade que dá valores para alterar um aspecto de apresentação de um elemento. A propriedade font-size do CSS é usada no exemplo acima. As linguagens de folhas de estilo comuns costumam ter cerca de 50 propriedades para descrever a apresentação de documentos.

Valores e unidades

As propriedades mudar a apresentação de um elemento ao lhe atribuír um determinado valor. O valor pode ser uma seqüência, uma palavra-chave, um número, ou um número com um identificador da unidade. Além disso, os valores podem ser listas ou expressões envolvendo vários dos valores acima mencionados. Um valor típico de uma folha de estilo visual é um comprimento, por exemplo, 1.5em, que consiste de um número (1.5) e uma unidade (em). O valor em em CSS refere-se ao tamanho da fonte do texto circundado. As linguagens de folhas de estilo comuns têm cerca de dez unidades diferentes.

Mecanismo de propagação de valor

Para evitar ter que especificar explicitamente todos os valores para todas as propriedades de todos os elementos, as linguagens de folhas de estilo têm mecanismos para propagar os valores automaticamente. O principal benefício da propagação de valor é tornar as folhas de estilo menos extensa. No exemplo acima, apenas o tamanho da fonte foi especificada; outros valores podem ser encontrados por meio de mecanismos de propagação de valores. A herança de valores iniciais e a escrita em cascata são exemplos de mecanismos de propagação de valores.

Modelo de formatação

Todas as linguagens de folhas de estilo suportam algum tipo de modelo de formatação. A maioria dessas linguagens têm um modelo de formatação visual que descreve, com algum detalhe, como o texto e outros conteúdos serão mostrados. Por exemplo, o modelo de formatação CSS especifica que os elementos de bloco (onde h1 é um exemplo) estende-se para preencher a largura do elemento pai. Algumas linguagens de folhas de estilo também tem um modelo de formatação aural.