Especificar el tamaño y la posición con css

En una definición de estilo CSS (o regla

), Se puede describir posiciones y tamaños de muchas maneras, utilizando puede unidades diferentes de medición. A menudo se puede elegir cualquier unidad que desea, aunque ciertos tipos específicos de medidas funcionan mejor en ciertas situaciones.

Por ejemplo, muchos diseñadores que trabajan con papel y tinta se utilizan para especificar los tipos de letra en puntos. Un punto es una longitud absoluta: 1/72 de pulgada. El uso de especificaciones absolutos tamaño tipo para una revista o un libro funciona bien - después de todo, el usuario no puede encoger, estirar, o cambiar la relación de aspecto de una página en un libro. (Relación de aspecto es la relación entre la altura y la anchura.) Los navegadores, sin embargo, se puede cambiar de tamaño a voluntad. Si arrastra un lado de un navegador, que está cambiando, haciéndolo más fino o más grueso. En otras palabras, el cambio de su forma, su relación de aspecto, de, por ejemplo, un cuadrado a un rectángulo.

Para fuentes que se muestran en un navegador, una unidad relativa de la medición es superior a los puntos tradicionales. A diferencia de las mediciones absolutas como puntos o pulgadas, una unidad en relación con las escalas de tamaños de fuente. Como resultado, se obtiene resultados más predecibles en páginas Web con unidades relativas de las mediciones especificando tamaño de letra. Una unidad de relativa utilidad de las mediciones para un diseñador web es la em. Aunque la em es útil, en la práctica, la mayoría de los diseñadores siguen utilizando puntos o píxeles al especificar tamaño de letra. Quizás es simplemente la fuerza de la costumbre, pero en cualquier caso los resultados por lo general se vea bien en la mayoría de los navegadores.

Curso de medición

Aquí están en una cáscara de nuez. . . todas las unidades que miden la longitud:

• px (píxeles): Los píxeles son la unidad más pequeña en una pantalla - los puntos a veces se puede ver si te acercas lo suficiente a un televisor. Por ejemplo, establecer la resolución del monitor a 800x600 significa que es 800 píxeles de ancho por 600 píxeles de alto.

Los píxeles pueden ser una forma útil para especificar el tamaño de fuente, pero el inconveniente es que si especifica pixels, que anula la opción de tamaño de fuente personalizado en Internet Explorer - para que los usuarios no pueden ajustar de "grande" a "más grande" y así sucesivamente. Sin embargo, siempre se debe utilizar para describir px imagen tamaños. Imágenes ya medibles en píxeles (puedes ver las medidas mediante la carga de la imagen en cualquier aplicación de gráficos).

• pt (puntos): Un punto es igual a 1/72 de pulgada. Puntos (y picas) son mediciones de tipo de letra clásicos. La mayoría de los navegadores por defecto a una de 12 puntos serif.

• pc (picas): Una pica equivale a 12 puntos.

• mm (milímetros): Un milímetro es .0394 pulgadas, por lo que una pulgada contiene aproximadamente 26 milímetros. Un centímetro contiene 10 milímetros. Gran parte del mundo utiliza este métrico sistema.

• cm (centímetros): Un centímetro es .3937 pulgadas, por lo que una pulgada contiene aproximadamente 2 1/2 centímetros.

• en pulgadas): Pulgadas son una unidad en el Inglés o imperial sistema - utilizado en los Estados Unidos. Inglaterra y algunos restos de la época colonial también se quedaron con el sistema imperial por un largo tiempo, pero cedieron recientemente. El gobierno británico cumplió en 2000 con sistema métrico Europea y ahora es un delito vender por la libra en cualquier lugar en el reino de Su Majestad. Un hombre en Cornwall, por ejemplo, según los informes, tuvo que pagar las costas judiciales tras ser sorprendido vendiendo caballa en # 163 a 1,50 la libra.

Una pulgada se basa en la distancia entre el primer nudillo y el extremo del pulgar de un rey ya olvidada. Durante 50 años, los esfuerzos persistentes para educar y legislar de distancia del sistema imperial a favor de la métrica han fracasado en los EE.UU..

• em: Em es una unidad de medida derivada de la anchura aproximada de la letra m de una fuente. Esto se considera generalmente la mejor manera de especificar el tamaño de fuente en CSS, aunque pocos diseñadores siguen este consejo.

• ex (la x altura): Ex es la altura de la x, o la altura de la letra minúscula X, de la fuente del elemento actual.) Los navegadores suelen dividir em a la mitad para conseguir el ex altura. Esta unidad de medida no está en tan útil como la em porque no es tan predecible un promedio para todos los tipos de letra.

• % (Por ciento): Los porcentajes son excelentes para especificar el tamaño relativo (que puede ser relativa a un antepasado, el padre, y así sucesivamente).

Las unidades de medida no distinguen entre mayúsculas y minúsculas. Usted puede sacar provecho de ellos o no, como usted desea. Del mismo modo, en el IE, puede incluir un espacio entre el número y su unidad, o no: Por ejemplo, 2 en es equivalente a 2 pulgadas. Otros navegadores no les gusta el espacio. Para simplificar, usando minúsculas y evitar espacios innecesarios es generalmente una buena idea cuando se trabaja con CSS. Sólo entra en el hábito del formato de 2 pulgadas o 24px y se le multa, a menos que los comités CSS deciden invertir ellos mismos en el futuro.

Poco em Entendimiento

Debido a que los expertos recomiendan que utilice em la hora de diseñar una página Web que desea buscar simplemente así, vale la pena echar un vistazo a lo que esta unidad que realmente significa. Tradicionalmente, el em era el ancho de la letra m.

Tal vez usted ha oído el término m-dash o em-dash, que es el tablero generalmente empleado en la publicación. Es una línea horizontal - como estos - equivalente a la anchura de la carta de la tipografía m (esto no es estrictamente un equivalente preciso en muchos tipos de letra). También hay un en el tablero. Supongo que lo que está basado en.

Unidades em y ex son pariente para cada tipo de letra. Esto es útil porque significa que el tamaño especificado por em cambia de una manera precisa sobre la base de la resolución del usuario del monitor, ajustes de preferencias, y otros factores. En otras palabras, el uso em le permite especificar qué sucede pariente con el tipo de letra. El resultado es proporcional a las otras cualidades de tipo de letra del texto y de los alrededores. Además, las especificaciones relativas, como em permiten a las personas con dificultades para ampliar el tipo de letra en su navegador si es necesario. Especificaciones fijas como píxeles o pt no ofrecen al usuario esta opción.

Em y ex son unidad de cajista tradicional de medida, pero sus significados en CSS están ligeramente modificadas. Por un lado, las computadoras calculan ex simplemente dividiendo em la mitad. Esto es más fácil de calcular, pero sólo una aproximación para la mayoría de las fuentes. Em en CSS es el tamaño de la fuente en píxeles. Esto es útil porque puede especificar em unidades y confiar en ellos estar en relación con el padre (u otro) de la fuente del elemento.

He aquí un experimento para conseguir la idea de cómo em es pariente a otro elemento. En este código, el texto dentro del elemento se define como 26px, pero el texto dentro del elemento de párrafo se define como 1.5em, o, dicho de otra manera, una y media veces el tamaño de la matriz. Más adelante en el código HTML, el elemento de párrafo se adjunta (emparentado) por el elemento del cuerpo. Por lo tanto, el texto del párrafo se hace en píxeles 1.5x26 (o 39 píxeles).

un poco de texto

un poco de texto (1,5 em del cuerpo principal).

un poco de texto (39 píxeles).

El texto de la versión de la clase de los abdominales

se rindió el mismo tamaño que lo normal

. los elemento es un elemento de matriz de la

, y

se define como 1.5em de su padre. El cuerpo de los padres utiliza 26 píxeles como su tamaño de texto, resultados tan 26x1.5 en 39 píxeles.