Especificar o tamanho e posição com CSS

Em uma definição de estilo CSS (ou regra

), Você pode descrever posições e tamanhos de muitas maneiras, usando unidades diferentes podem de medição. Muitas vezes você pode escolher qualquer unidade desejada, embora certos tipos específicos de medidas funcionam melhor em determinadas situações.

Por exemplo, muitos designers que trabalham com papel e tinta são usadas para especificar fontes no pontos. Um ponto é um comprimento absoluto: 1/72 de polegada. Usando especificações de tamanho tipo absolutos para uma revista ou um livro funciona muito bem - afinal, o usuário não pode encolher, esticar, ou alterar a relação de uma página de aspecto em um livro. (Proporção da tela é a relação entre altura e largura.) Navegadores, no entanto, podem ser redimensionadas à vontade. Se você arrastar um lado de um navegador, você está mudando, tornando-o mais fino ou mais gordo. Em outras palavras, o seu mudando sua forma, a sua relação de aspecto, de, digamos, um quadrado a um retângulo.

Para fontes indicadas em um navegador, uma unidade relativa de medição é superior aos pontos tradicionais. Ao contrário das medidas absolutas, tais como pontos ou polegadas, uma unidade relativa escalas com tamanhos de fonte. Como resultado, você obtém resultados mais previsíveis em páginas da Web com unidades relativas de medições especificando o tamanho do tipo. Uma unidade relativa útil de medições para um web designer é o em. Embora o em é útil, na prática, a maioria dos designers ainda usam pontos ou pixels ao especificar o tamanho do tipo. Talvez seja apenas a força do hábito, mas em qualquer caso, os resultados costumam olhar bem na maioria dos navegadores.

comprimento de medição

Aqui estão eles em poucas palavras. . . todas as unidades que medem o comprimento:

• px (pixels): Pixels são a unidade mais pequena em uma tela - os pontos às vezes você pode ver se você chegar perto o suficiente para uma TV. Por exemplo, definir a resolução do monitor para 800x600 significa que é 800 pixels de largura por 600 pixels de altura.
Pixels pode ser uma maneira útil para especificar o tamanho da fonte, mas a desvantagem é que se você especificar pixels, que substitui a opção de tamanho de fonte personalizado no Internet Explorer - para que os usuários não podem ajustar a partir de "grande" para "maior" e assim por diante. No entanto, você deve sempre usar px para descrever imagem tamanhos. Imagens já mensuráveis ​​em pixels (você pode ver as medições por carregar a imagem em qualquer aplicação gráfica).
• pt (pontos): Um ponto é igual a 1/72 de polegada. Pontos (e picas) são medições carácter tipo clássico. A maioria dos navegadores padrão para um tipo de letra serif de 12 pontos.
• pc (paicas): Um pica é igual a 12 pontos.
• mm (milimetros): Um milímetro é .0394 polegadas, assim uma polegada contém cerca de 26 milímetros. Um centímetro contém 10 milímetros. Grande parte do mundo usa essa métrico sistema.
• cm (centímetros): Um centímetro é .3937 polegadas, assim uma polegada contém aproximadamente 2 1/2 centímetros.
• em polegadas): Polegadas são uma unidade na Inglês ou imperial sistema - utilizada nos Estados Unidos. Inglaterra e alguns remanescentes do período colonial também ficou com o sistema imperial por um longo tempo, mas cedeu recentemente. O governo britânico cumpriu em 2000 com o sistema métrico Europeia e é agora uma ofensa criminal para vender pela libra em qualquer lugar no reino de Sua Majestade. Um homem em Cornwall, por exemplo, teria tido de pagar custas judiciais depois de ser pego vendendo cavala em # 163-1,50 por libra.
Uma polegada baseia-se na distância entre a primeira articulação e a extremidade de polegar de um rei-se agora esquecido. Por 50 anos, os esforços persistentes para educar e legislar afastado do sistema imperial em favor da métrica falharam na U.S ..
• em: Em é uma unidade de medição derivada da largura aproximada da carta m de uma fonte. Este é considerado geralmente a melhor maneira de especificar o tamanho da fonte em CSS, embora alguns designers de seguir este conselho.
• ex (o x-height): Ex é o x-altura, ou a altura da letra minúscula x, da fonte do elemento atual.) Navegadores costumam dividir em metade para obter o ex-altura. Esta unidade de medida não está neste momento tão útil quanto o em porque não é tão previsível uma média para todos os tipos de letra.
• % (Por cento): As percentagens são excelentes para especificar o tamanho relativo (que pode ser em relação a um antepassado, o pai, e assim por diante).

Unidades de medida não são maiúsculas de minúsculas. Você pode aproveitar-los ou não, como você deseja. Da mesma forma, no IE, você pode incluir um espaço entre o número e sua unidade, ou não: Por exemplo, 2 em equivale a 2in. Outros navegadores não gosta do espaço. Para simplificar, usando letras minúsculas e evitando espaços desnecessários é geralmente uma boa idéia quando se trabalha com CSS. Basta adquirir o hábito do formato 2in ou 24px e você vai ficar bem, a menos que as comissões CSS decidir inverter-se no futuro.

pouco em entendimento

Porque os especialistas recomendam que você usa em ao projetar uma página da Web que você quer olhar apenas para que, vale a pena dar uma olhada no que esta unidade realmente significa. Tradicionalmente, o in era a largura da carta m.

Talvez você já tenha ouvido o termo m-dash ou em-traço, que é o traço normalmente empregada na publicação. É uma linha horizontal - como estas - o equivalente à largura da letra do tipo de letra m (Isto não é estritamente um equivalente preciso em muitos tipos de letras). Há também um en-dash. Adivinhar o que ele é baseado em.

EM e ex unidades são relativo para cada tipo. Isso é útil porque significa que o tamanho especificado por EM muda de forma precisa com base na resolução do usuário do monitor, as configurações de preferências, e outros fatores. Em outras palavras, usando em permite que você especifique o que acontece relativo para o tipo de letra. O resultado é proporcional às outras qualidades do tipo de letra e texto ao redor. Além disso, as especificações relativos como em permitir que as pessoas com desvantagens para ampliar o tipo de letra em seu navegador, se necessário. Especificações fixos, como px ou pt não oferecem o usuário esta opção.

Em e ex são a unidade de tipógrafo tradicional de medida, mas seus significados em CSS são ligeiramente modificados. Por um lado, os computadores calcular ex simplesmente dividindo em ao meio. Isto é mais fácil de calcular, mas apenas uma aproximação para a maioria das fontes. Em em CSS é o tamanho da fonte em pixels. Isso é útil porque você pode especificar em unidades e contar com eles sendo relativo ao pai (ou outro) da fonte do elemento.

Aqui está um experimento para ficar com a ideia de como é em relativo a um outro elemento. Neste código, o texto no elemento é definido como 26px, mas o texto dentro do elemento de parágrafo é definido como 1.5em, ou, dito de outra forma, uma vez e meia o tamanho do pai. Mais tarde no código HTML, o elemento de parágrafo é fechado (parent) pelo elemento de corpo. Portanto, o texto do parágrafo é processado em pixels 1.5x26 (ou 39 pixels).

algum texto

algum texto (1,5 em do corpo pai).

algum texto (39 pixels).

O texto na versão classe abs de

é processado o mesmo tamanho que o normal

. o elemento é um elemento do pai

, e

é definido como 1.5em de seu pai. O corpo pai usa 26 pixels como seu tamanho do texto, resultados tão 26x1.5 em 39 pixels.