Expansão eficiência com Cascading Style Sheets

Definindo um estilo em um local como CSS faz tem várias vantagens. Em primeiro lugar, elimina a redundância: Você não tem que manter especificando o tamanho da fonte e cor de cada vez que utilizar o

tag no documento, por exemplo. Isso faz com que a página de código Web mais fácil de ler e modificar mais tarde. Se você estiver familiarizado com programação de computadores, pensar em uma regra de estilo CSS simples como algo como uma linguagem de programação constante: Você pode especificar, por exemplo, a taxa de imposto local, tornando-se um nome como LocalTax, em seguida, atribuir um valor a ela assim: LocalTax constante = 0,07. A partir daí, todo o seu programa, você não precisa especificar repetidamente a 0,07. Você simplesmente usar o nome LocalTax do constante.

Da mesma forma, depois de ter definido um estilo manchete CSS, daí você pode simplesmente usar o nome de classe para esse estilo, não importa quão longa e complexa que o estilo pode ser. Neste exemplo, você usar nenhum nome de classe, de modo que cada headline H1 é processado com este estilo:

Uma segunda vantagem de reunir todas as definições de estilo em um único local é que você pode mais facilmente fazer alterações globais. E se você decidiu mudar todas as manchetes H1 para vermelho em vez de azul? Se você não usar uma folha de estilo, você teria que procurar todos os elementos H1 todo arquivos HTML da Web inteira do site e modificar cada um desses elementos, por sua vez.

Mas se você teve a clarividência de utilizar uma folha de estilo, você só precisa mudar o solteiro definição de estilo para H1 na própria folha de estilo. As especificações são aplicadas automaticamente em todo o HTML. Em outras palavras, basta fazer esta mudança de azul para vermelho na folha de estilo:

H1 {font-size: 16pt cor: vermelho-}

Todas as manchetes entre o

e

Tag ao longo de todo o Web site são agora apresentados como texto vermelho.

Alterando Web design para melhor

HTML foi originalmente projetado para trabalhar algo como um esboço, especificando o estrutura de um documento, sem muita atenção para o real estilo visual, ou design, do documento. Um esboço meramente organiza ideias hierarquicamente: A, B, C, e assim por diante são as principais ideias. Dentro dessas categorias, tem subdivisões, tais como 1, 2, 3, 4 e divisões ainda mais baixos, tais como a, b, c, d, e assim por diante. A estrutura de contorno equivalente em HTML é descrito com vários níveis de título como H1, H2, H3, e assim por diante.

HTML deveria simplesmente definir o conteúdo: Este é o corpo do texto, este é um título, esta é uma mesa, e assim por diante. Mas Web designers, naturalmente, queria oferecer cada vez mais convincentes, páginas da Web visuallyattractive. Afinal, a Internet mais frequentemente compete com anúncios de televisão animada do que com, altamente estruturada, revistas acadêmicas secos. HTML começou a crescer à toa, adicionando muitos elementos de formatação especiais e atributos como itálico e cor. Esta inflação de etiquetas feitas criar, ler e modificar HTML cada vez mais complicado. Separar o conteúdo (estrutura) de design e layout da página tornou-se necessária. Digite CSS. Quando você usa CSS, o HTML é deixada para lidar principalmente a estrutura eo arquivo CSS contém os estilos que definem a forma como os elementos HTML olhar.

Além disso, CSS também oferece o designer da página Web apresenta indisponíveis em HTML simples. CSS dá um designer de controle muito maior sobre a aparência de uma página da Web.

Estar pronto para qualquer coisa

Claro, você nunca terá que absoluto controle sobre páginas da Web se você criar sites para a Internet. Nunca haverá uma exibição verdadeiramente estável, único e previsível para páginas da Web. Por quê? Porque, como algumas celebridades, uma página da Web nunca se sabe onde vai acabar de minuto a minuto. Ele tem que estar preparado para estar em exibição em todos os tipos de situações.

Uma página da Web pode ser exibida em uma tela Pocket PC PDA - com muito poucos pixels e em preto e branco. Ou pode ser mostrado no grande exibição Diamond Vision em Hong Kong, que é mais de um Boeing 747, ou até mesmo a tela Jumbotron no Skydome de Toronto, que mede 110 pés de largura por 33 pés de altura.

Não só você tem que considerar enormes diferenças no tamanho, mas também em proporção da tela (forma). Muitos monitores de computador ainda são a forma tradicional quadrado, mas os usuários cada vez mais da Internet estão migrando para widescreen monitores - mais amplos do que eles são altos, como uma tela de cinema - para melhor HDTV visor e DVDs. Para os utilizadores da Internet, widescreen significa apenas que você veja informações mais horizontal por página. páginas web, destinado com posicionamento absoluto (imutável) deixam várias polegadas de espaço em branco vazio no lado direito de um monitor widescreen. O que Vincent fazer?

Como é que Van Gogh têm lidado com o problema de projetar uma imagem de um vaso de girassóis que pode ser mostrado em um widescreen Jumbotron, mas também em um pequeno monitor quadrado?

A solução de base para este problema é o de especificar o tamanho ea posição em relativo em vez de termos absolutos. Por exemplo, em vez de dizer, "O girassol é de 2 polegadas de altura e está localizado a 12 polegadas a partir do lado esquerdo," (uma absoluto especificação), você diz: "O girassol é de 6 por cento grande e 35 por cento do lado esquerdo" (uma especificação relativa). Outras maneiras de tamanhos especificando relativamente incluem píxeis (Que são as menores unidades de informação que um determinado monitor pode exibir, para que eles variam de monitor para monitor) ou tais termos gerais como x-large ou grande.

leitores de alerta deve estar se perguntando neste momento, "Seis por cento do quê?" A percentagem é calculada com base na contendo bloco. Pode ser janela de navegador (), Mas também podem ser tais como blocos

dentro do
. Neste exemplo, o bloco contendo é o tamanho total do navegador, mas você também pode especificar percentual para outros, menores, recipientes dentro da janela do browser.

especificações relativas traduzir bem em vários tamanhos de telas. Um girassol 6 por cento grande seria exibido com cerca de 48 pixels em um monitor de 800x600 computador, mas exibidos 18 pés de largura em um Jumbotron que é 300 pés de largura.

Em outras palavras - quando você especificar relativo medições ou posições - seus gráficos ou de texto são automaticamente dimensionada como necessário para caber tudo o visor tamanho está sendo usada no momento.

Claro, se você está construindo páginas para um intranet site, você pode muito bem saber que todos em sua rede do escritório é necessário para usar o mesmo tamanho de tela, o mesmo navegador, o mesmo sistema operacional, e permitiu não há fotos da família em seu cubículo. Nas situações em que a uniformidade é imposta em toda a empresa, você posso fornecer especificações absolutas, mas tais situações são relativamente raros.

menu