• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS 5 - Unidades y Valores
 

CSS 5 - Unidades y Valores

on

  • 11,916 views

Curso de Estándares Web - Día #6 ...

Curso de Estándares Web - Día #6

Distintas formas y unidades de medida para especificar valores en las sentencias de CSS.

Tema básico, pero referencia futura para cualquier tarea que se requiera hacer en CSS.

Statistics

Views

Total Views
11,916
Views on SlideShare
11,881
Embed Views
35

Actions

Likes
1
Downloads
39
Comments
0

5 Embeds 35

http://www.slideshare.net 22
http://blog.morinoko.com 8
https://twitter.com 3
https://aulaglobal2.uc3m.es 1
http://webcache.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS 5 - Unidades y Valores CSS 5 - Unidades y Valores Presentation Transcript

    • CSS Unidades 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 nombre Existe 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 lime red black maroon silver blue navy teal fuchsia olive white gray orange yellow green purple
    • 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 RGB Existen 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 Short Hex Si el valor hexadecimal está compuesto por 3 pares de números iguales, se puede utilizar la sintaxis reducida o Short Hex: color: #333333 color: #ffffff color: #333 color: #fff color: #bb0000 color: #000000 color: #b00 color: #000
    • 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: #ececec color: #343434 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 x Times New Roman x Arial 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;
    • Pixeles Ojo: 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 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.
    • Bibliografía CSS: The Definitive Guide Eric Meyer Amazon: http://tinyurl.com/5hs7jf
    • Bibliografía CSS 2.1 Specification World Wide Web Consortium http://www.w3.org/TR/CSS21/syndata.html#values