CSS 5 - Unidades y Valores
-
Upload
harold-maduro -
Category
Technology
-
view
9.641 -
download
0
description
Transcript of CSS 5 - Unidades y Valores
CSSUnidades y Valores
Harold Maduro
Valores y Unidades
Este es un tema básico y elemental que va a ser la base para cualquier cosa que se quiera hacer con CSS.
Existen “units” que afectan los colores, distancias y tamaños de toda clase de propiedades.
Números
Números
Existen dos tipos de números en CSS: enteros (integers) y fracciones (reals).
Los números sirven como la base para otro tipo de valor o unidad de medida (por ejemplo: 15px), pero en algunas circunstancias, se puede utilizar el número sólo como valor de una propiedad.
Números
Tanto los enteros como fracciones pueden ser positivos o negativos.
Números
Números
h1 { margin: 100px; }
Números
h1 { margin: 100px; }
p { margin-top: -10px; }
Porcentajes
Los porcentajes se colocan con el símbolo de porcentaje (%) después de un número.
Porcentajes
Los valores de porcentaje son relativos a otro valor (el valor del elemento ancestro, o un valor heredado).
Porcentajes
Porcentajes
h1 { width: 100%; }
Porcentajes
h1 { width: 100%; }
p { width: 50%; }
Color
Color
Se pueden especificar los colores ya sea con:
• Nombres
• RGB
Color por nombreExiste un reducido número de colores que se pueden especificar por su nombre. Estos son llamados “named colors”.
Existen sólo 17 colores definidos en la especificación de CSS 2.1:
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
orange
purple
red
silver
teal
white
yellow
Color por nombre
Color por nombre
color: red;
Color por nombre
color: red;
color: blue;
Color por nombre
Además de estos, los browsers modernos reconocen unos 140 nombres de colores.
Estos 140 nombres están definidos en la especificación de CSS 3.0
Color por RGB
Los colores que vemos en pantalla son creados utilizando mezclas de luces rojas, verdes y azules.
Color por RGBExisten cuatro formas como podemos detallar el color especificando sus valores RGB:
Functional RGB colors
* Numeric: usando el valor en enteros
* Percentage: usando el valor en porcentaje
Hexadecimal RGB colors
* Hexadecimal: usando el valor formado por 6 unidades
* Short Hex: usando el valor resumido, por 3 unidades
Functional RGB colors
Functional RGB colors
Se especifican los porcentajes de cada color:
Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
O se especifica usando un valor numérico:
Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
O se especifica usando un valor numérico:
color: rgb(255,0,0);
Functional RGB colors
Se especifican los porcentajes de cada color:
color: rgb(100%,0%,0%);
O se especifica usando un valor numérico:
color: rgb(255,0,0);
Functional RGB colors
Para los valores porcentuales, se pueden utilizar valores fraccionarios para especificar el tono del color:
color: rgb(20.5%,10.5%,0);
Functional RGB colors
Ojo: Para los valores numéricos, sólo acepta números enteros.
Hexadecimal RGB colors
Aquí utilizamos los mismos valores hexadecimales que hemos utilizado en el pasado con HTML.
color: #ff0000;
Hexadecimal RGB colors
Funciona uniendo 3 números hexadecimales en el rango de 00 hasta el FF para identificar el color.
La sintaxis sería: #RRGGBB, sin ningún tipo de separación, espacio o coma entre ellos.
Hexadecimal RGB colors
Si el valor hexadecimal está compuesto por 3 pares de números iguales, se puede utilizar la sintaxis reducida o Short Hex:
color: #ffffff
color: #fff
color: #000000
color: #000
color: #333333
color: #333
color: #bb0000
color: #b00
Short Hex
Hexadecimal RGB colors
Si cada uno de los pares de dígitos no se repite, entonces no podemos utilizar la sintaxis reducida.
color: #248901
color: #343434
color: #ececec
color: #F07132
Longitud
Longitud
Muchas propiedades como width o margin dependen de un valor de longitud para determinar su tamaño.
Longitud
Todos los valores de longitud se pueden especificar tanto con un valor positivo o negativo seguido por un “label”.
Longitud
También se pueden utilizar valores fraccionarios como 7.7 o 1.5.
Longitud
Todos los valores de longitud están seguidos por una abreviación de dos letras que representa la unidad de medida que se está especificando; ya sea en pixeles (px), pulgadas (in) o puntos (pt).
La única excepción es el cero (0), que no necesita que le especifiquemos un valor; ya que cero pixeles es lo mismo que cero pulgadas o cero centímetros.
Longitud
Las unidades de medida de longitud están divididas en dos tipos:
longitudes absolutas
longitudes relativas
Longitudes absolutas
Pulgadas - in
Centímetros - cm
Milímetros - mm
Puntos - pt
Picas - pc
Longitudes absolutas
width: 40in;
height: 50mm;
Longitudes absolutas
Estas unidades de medida son más útiles cuando se está trabajando con impresos, ya que en pantalla, la imagen está afectada por el tamaño del monitor y la resolución de pantalla del mismo.
Longitudes absolutas
Longitudes absolutas
Utilizarlos para medidas de elementos en pantalla puede resultar en textos que son muy pequeños para leer correctamente en algunas combinaciones de sistema operativo / monitor / browser; mientras que en nuestra pantalla se ve perfectamente bien.
Longitudes relativas
Son llamadas de esta manera ya que son medidas en relación a otro elemento u objeto.
El tamaño real que midan estos elementos puede cambiar debido a factores que van más allá de su control; como por ejemplo, resolución de pantalla, ancho del browser o preferencias del usuario.
Longitudes relativas
Hay tres unidades de medida relativos:
em-height - em
x-height - ex
pixel - px
em
En CSS, un em es considerado el valor determinado del font-size de un elemento.
Si el font-size de un elemento es 14 pixeles, entonces, para ese elemento 1em es equivalente a 14 pixeles.
em
Por ejemplo: si un H1 tiene 20px como su font-size; entonces, 1em es equivalente a 20px para ese H1.
Al especificar margin: 1em para el H1, el margen sería igual a 20px.
em
Cuando se utiliza em para especificar el tamaño del font, entonces el valor de em es relativo al font size del padre.
Por ejemplo, si el BODY tiene un font-size de 10px, un DIV que sea descendiente de él y tenga 2em como su font-size, tendrá un tamaño de letra de 20px.
em
margin-bottom: 3em;
font-size: 2em;
font-size: 1.2em;
ex
ex, se refiere a la altura de una x en minúscula en el font utilizado.
Si se tienen dos párrafos de texto, ambos con el mismo tamaño de letra, pero con tipografías diferentes; el valor de ex sería diferente para cada párrafo.
Esto es, ya que cada font tiene un tamaño de x distinto.
ex
Garamond x
Centhury Gothic xTimes New Roman xArial x
ex
Ojo: Ahora, existen algunos browsers que determinan el valor de ex, obteniendo el valor de em y dividíendolo por la mitad.
Pixeles
Esta es la unidad de medida más sencilla y fácil de entender. 1px en CSS es equivalente a 1px en pantalla.
Pixeles
El valor de pixel se considera relativo ya que depende de la resolución de la pantalla del usuario.
Pixeles
width: 500px;
margin: 20px;
PixelesOjo: Al especificar el tamaño de letra en pixel, Internet Explorer 6.0 no le permite al usuario hacer resize del texto; a pesar de seleccionar un tamaño de texto más grande, el texto no se agranda.
Esto puede crear problemas de usabilidad y accesibilidad.
Esto no es un problema con los browsers modernos.
URL
URLs
Cuando utilizamos el @import directive o el background-image, utilizamos URLs para llamar al archivo indicado.
url(protocol://server/pathname/file)
URLs
Se puede utilizar las rutas absolutas (absolute paths):
url(http://www.bootstudio.com/images/logo.gif)
O se pueden utilizar rutas relativas (relative paths):
url(../images/logo.gif)
URLs
En CSS las rutas relativas son relativas al archivo CSS, no al archivo HTML que llama al CSS.
Ojo: Nestcape Navigator 4 interpretaba las rutas relativas en relación al archivo HTML, no al archivo CSS.
No se puede colocar un espacio entre url y el paréntesis
Keywords
Keywords
Existen algunos keywords que permiten describir o asignar un valor con una palabra.
Por ejemplo:
none
inherit
normal
underline
Keywords
font-weight: normal;
margin: auto;
text-decoration: none;
Keywords
Si una propiedad acepta keywords, los keywords que podrá usar serán limitados por la definición de la propiedad.
También tengan en cuenta que el comportamiento del elemento al aplicarle un valor de keyword va a ser diferente dependiendo de la propiedad.
Por ejemplo: none es diferente para text-decoration que para font-style.
Keywords
Inherit es un keyword que es compartido por todas las propiedades en CSS 2.1.
Este valor hace que la propiedad herede los mismos valores que su padre.
En la mayoría de los elementos no es necesario especificar inherit; ya que las propiedades se heredan de manera predeterminada; pero puede ser útil en el caso de los backgrounds, margin, padding y border.
inherit
Bibliografía
CSS: The Definitive Guide
Amazon: http://tinyurl.com/5hs7jf
Eric Meyer
Bibliografía
CSS 2.1 SpecificationWorld Wide Web Consortium
http://www.w3.org/TR/CSS21/syndata.html#values