As folhas de estilo e XHTML

Cascading Style Sheets (CSS) é uma ferramenta extremamente poderosa que tem sido lento travar sobre o mundo em desenvolvimento HTML. Se vai ou não usar (ou similar) CSS, a evolução contínua da CSS é profundamente entrelaçado com a obra a avançar em XHTML para aprender sobre CSS pode ajudar você a entender XHTML, assim como implementá-lo. Felizmente, a CSS não é muito difícil uma vez que você dominar algumas estruturas-chave e aprender a aplicar o seu vocabulário. Existem alguns problemas reais com implementações existentes CSS que eu cubro mais adiante neste artigo, mas trabalhar XHTML futuro provavelmente deve utilizar tanto do CSS quanto possível.

NotaFolhas de estilo em cascata é uma especificação enorme em si mesmo, no valor de um artigo ou três por conta própria. Este artigo faz com que você começou em CSS, mas você vai querer encontrar informações adicionais se mover em CSS em uma maneira grande. As últimas informações sobre as folhas de estilo em cascata a partir do W3C está disponível em http://www.w3.org/Style/CSS/. As discussões no presente artigo enfoca CSS nível 1 e CSS 2, ambas as quais são estáveis como especificações de papel se não for totalmente implementado. O desenvolvimento contínuo da CSS Level 3 é susceptível de introduzir algumas mudanças significativas na paisagem XHTML, e é definitivamente vale a pena seguir. Para obter uma lista atual de trabalho CSS, veja http://www.w3.org/Style/CSS/current-work.

Separando Formato de Conteúdo

CSS foi um dos primeiros esforços do W3C em separar as informações de formatação da estrutura do documento em HTML. Este tem sido tema recorrente no coração da maior atividade W3C HTML desde HTML 4.0 's começar, e CSS é um ingrediente fundamental na execução desse projeto. Ao fornecer um simples conjunto de ferramentas que controlam o exercício muito mais aprofundada sobre a apresentação do próprio HTML, CSS era para atrair desenvolvedores longe dos milhões de tags FONT usados em documentos HTML. CSS é a cenoura; HTML 4.0 's (e XHTML de depreciação) do elemento é a fonte a pau. CSS designers documento oferece uma série de características essenciais que são quase impossíveis de implementar de forma eficaz com HTML simples (mesmo se o elemento FONT é usado) . CSS também prevê a reutilização. As descrições formatação aplicada aos documentos pode ser aplicado a qualquer documento com o mesmo vocabulário. CSS ainda permite criar folhas de estilo que face a situações particulares dentro de um determinado vocabulário, especificando a formatação com base em estruturas de elemento aninhado ou valores de atributos. Você pode fazer dezenas de milhares de documentos HTML, utilizar a mesma formatação apenas ligando uma linha de código em cada documento para a mesma folha de estilo CSS. Isso também torna mais fácil para alterar a formatação através de todos esses documentos porque as alterações feitas na folha de estilo mestre são refletidas em todos os documentos que a utilizam. Gerenciamento de apresentação é muito mais simples quando tudo o que é necessário é uma mudança em uma folha de estilo ao invés de uma pesquisa e substituição em milhares de documentos.

Dica

O Modelo de Processamento CSSCascading Style Sheets leva o que é conhecido como um anotação abordagem para formatação de documentos. invés de converter um documento em outro (o transformadora abordagem do XSL), transformadores CSS adicionar as informações das folhas de estilo em browsers de estruturas "e outras ferramentas usadas para apresentar informações. Assim como o HTML, CSS pressupõe que o conteúdo das mesmas estruturas elemento serve para mostrar quando os atributos são destinadas a fornecer mais informações que não devem ser exibidos diretamente como parte do fluxo de texto. Efetivamente, as informações de folha de estilo é tratada como marcação adicional, bem como atributos, e principalmente modifica a apresentação das informações já estão no documento, não seu conteúdo.

DicaCSS2 e CSS3 fornecer algumas ferramentas simples para modificar o conteúdo, mas nada complexo ou especialmente poderosas, pelo menos em relação às capacidades de transformação XSLT. CSS3 também fornece ferramentas para conectar a scripts elementos através de folhas de estilo. Apesar dessas ferramentas extras, a descrição anterior, prende muito bem para a maioria das atividades CSS atual. Folhas de estilo em cascata que lidar com HTML ou XHTML pode construir sobre os navegadores já tem entendimentos sobre a semântica de apresentação para o vocabulário HTML. Elementos H1 normalmente são processados em tipo maior do que os elementos H2, elementos LI são processados como recuado marcadores (ou numerada, dependendo do contexto) os itens da lista, e assim por diante. Para HTML, XHTML, CSS permite desenhadores de aperfeiçoar os já compreendeu regras. Em alguns casos, o CSS também permite que os designers para quebrar as regras completamente, usando truques como o posicionamento CSS para colocar conteúdo em locais específicos na tela ou em uma janela do documento.

DicaPara obter uma imagem clara da "entendida semântica" apresentação do vocabulário HTML, consulte o não-normativo (efetivamente não oficial) folha de estilo no Apêndice A da especificação CSS2 (http://www.w3.org/TR/REC-CSS2 / sample.html). Você também pode usar esta folha de estilos para mostrar documentos XHTML XML em browsers que não possuem uma compreensão clara do vocabulário HTML. Ela inclui ainda regras para apresentação fonética! Como os navegadores já tem regras de como HTML que apresentam construído em seu código, os designers podem especificar tanto ou tão pouco informações de formatação como eles gostam. Além disso, é possível criar documentos e folhas de estilo que degradam graciosamente. Browsers que não entendem o CSS, ou que só entendem uma parte do CSS vocabulário usado em uma folha de estilo, são capazes de apresentar uma visão básica do documento para os usuários. Isto é muito útil ao criar documentos HTML que deve ser visualizado em browsers mais antigos (a geração 3.x) ou em navegadores de texto como o Lynx. Folhas de estilo CSS são construídas a partir de listas de regras. Embora existam algumas hierarquias para estas listas (mais sobre isso mais tarde no artigo), as listas de regras geralmente são construídas a partir de duas partes. A primeira parte é oselector, Que identifica quais elementos de uma dada regra se aplica. A segunda parte, composta de propriedades, descreve a formatação que um determinado conjunto de elementos deve receber. A sintaxe geral é assim:

 selector (propertyname1: propertyValue1; propertyname2: propertyValue2; etc ..)

Usando seletoresFolhas de estilo em cascata, muitas vezes são separados os elementos ou documentos que, mesmo formato, para folhas de estilo precisa ter uma forma de identificar quais os elementos que necessitam de formatação. Selectores de fornecer uma camada flexível de abstração que torna mais fácil para aplicar as propriedades de tipos de elementos individuais, bem como grupos e subgrupos de tipos de elementos. Seletores descrever as partes de um documento que deverá receber a formatação especial e fazem mais fácil para criar folhas de estilo que o trabalho em um conjunto de documentos, pois eles não descrevem estruturas de documentos em geral. Existem muitos estilos diferentes de codificação para seletores, todos construídos em a mesma sintaxe. Seletores repetidas declarações dentro de uma folha de estilo com o mesmo seletor são perfeitamente aceitáveis, e múltiplas podem direcionar o mesmo elemento. Ao contrário de definições de tipo de documento XML, não há exigência de que um determinado documento em conformidade com a estrutura descrita por uma folha de estilo. Se um seletor é usado que não tenha uma correspondência em um determinado documento, a regra é ignorada. Estas regras bastante descontraído tornam possível criar folhas de estilo sofisticado que se encaixam bem em documentos com estruturas extremamente variada. Selector O mais simples é apenas um nome de um elemento, o que indica que todos os elementos com que o nome deve receber as propriedades de estilo especificado no aparelho:

h1 (font-family: serif)

Neste caso, todos os elementos h1 são processados no navegador serifa padrão - Times ou Times New Roman, tipicamente. Se você quiser aplicar as mesmas propriedades para H1, H2, H3 e elementos, você pode escrever:

h1 (font-family: serif) h2 (font-family: serif) h3 (font-family: serif)

Ou, para reduzir o tamanho do presente, você pode tirar vantagem de uma outra característica de seletores CSS: vírgulas. Essa declaração só tem o mesmo significado que as três declarações anteriores:

H1, H2, H3 (font-family: serif)

Se você quiser especificar a formatação especial para os elementos que estão contidos por outros elementos, seletores CSS permitem que você especifique as relações de contenção. Se, por exemplo, você quer o conteúdo dos elementos em que aparecem em um sans-serif, quando utilizado em listas não ordenadas e em uma serif, quando utilizado em listas ordenadas, você pode usar essas duas declarações:

em ul (font-family: sans-serif) em ol (font-family: serif)

Porque não há uma vírgula, esses seletores expressar contenção. Em CSS Nível 2, você pode apertar um pouco o foco, especificando que as regras só se aplicam aos filhos diretos ao invés de apenas descendentes. Por exemplo, se você quer criar regras para formatar itens da lista em uma forma especial para listas ordenadas e desordenadas, você pode usar:

ul li ( propriedades ) Ol> li ( propriedades )

Se necessário, você pode usar o asterisco (*) como curinga no lugar de um nome de elemento em qualquer das declarações anteriores. Usa Outra abordagem comum atribuir valores para selecionar elementos de estilo. XHTML elemento de classe foi projetado especificamente para o estilo, permitindo que autores de documentos para especificar tipos específicos dentro do vocabulário HTML genérico. Há duas maneiras de usar a informação de classe. Primeiro, você pode utilizar a informação de classe, em combinação com informações do nome do elemento.

CuidadoNo único navegador atualmente suporta toda a gama de seletores CSS1 e CSS2, mas o apoio está a melhorar. A maioria Nível 1 seletores são implementados, embora as ferramentas mais velhas não podem segurar mesmo todos do Nível 1. Verifique on-line para as últimas informações sobre a implementação. Web Review mantém um gráfico em http://webreview.com/pub/guides/style/css2select.html. O W3C é desenvolver ainda mais para seletores CSS3. Veja http://www.w3.org/TR/CSS3- seletores para os desenvolvimentos mais recentes, no entanto, será um longo tempo antes de ver estas novas funcionalidades em navegadores de produção ..

um artigo submetido por Albert Lichtblau

Isenção de responsabilidade:O nosso site não se responsabiliza pelo conteúdo deste artigo. Webarticles é uma fonte de informação livre.
Importante: Este artigo "Style Sheets e XHTML" foi traduzida por um software automático. Nós sentimos muito por quaisquer erros de ortografia que pode ter ocorrido. Obrigado pela sua compreensão.