3.Propiedades (diseño con CSS)

download 3.Propiedades (diseño con CSS)

of 19

  • date post

    19-Oct-2014
  • Category

    Design

  • view

    1.923
  • download

    2

Embed Size (px)

description

Principales propiedades CSS agrupadas por leemnetos: textos, imágenes, enlaces, etc.

Transcript of 3.Propiedades (diseño con CSS)

INTRODUCCIN Y CONTEXTO

PROPIEDADESTEMA 3www.laramarcos.comYa hemos visto como se construye una regla CSS, pero sin cualidades a transformar, no vamos a ningn sitio, por lo que vamos a pasar ya a las propiedades en s. En los ejemplos hemos visto algunas, como el color o la alineacin del texto, que eran fciles de deducir. Pero ahora nos vamos a poner en grupos y vamos a ver que nos viene a la cabeza cuando leemos esta lista de propiedades CSS.

Actividad en grupo 2: Esta prctica del bingo (despus de un rato para que debatan entre ellos, yo corrijo en alto las definiciones y el grupo que consiga lnea y/o bingo recibe un pequeo premio) es para tantear sus conocimientos y para que se relajen un poco despus del ltimo ejercicio que era muy completo y largo.13.1 textocolor font (shorthand)font-sizefont-familyfont-stylefont-variantfont-weighttext-alignline-heighttext-decoration

www.laramarcos.comRecalcarles que stas son ALGUNAS de las propiedades referentes al texto (las ms usadas), pero que hay MS, como text-transform, vertical-align o letter-spacing y word-spacing. (nombrarles rpidamente en qu consisten stas y si quieren saber ms, remitirles a libroweb).2colorHay mltiples formas de establecer el valor del colorPalabras clave, en ingls = 17 coloresRGB = 16 millones de colores

Propiedad que se hereda, a excepcin de los enlaces

Ejemplos:color: red;color: rgb (51, 204, 102);color: rgb (20%, 12%, 75%);color: #33CC66; EL MS UTILIZADOwww.laramarcos.comInherit: aunque no lo pongo, tambin es un valor.

Todo lo que aparece en la web tiene que estar en el modo de color RGB (red, green, blue). Y al decir todo, es todo: tanto los colores de las letras, de los fondos como las imgenes que traigis de otros sitios. Por lo tanto no valen imgenes en CYMK (imprenta), Lab, etc. A la hora de guardarlas en photoshop, ir a modo, tarari-tarara. para cercioraros de que est en el modo adecuado. (y no entrar en ms explicaciones, solamente el consejo)

Mediante los ejemplos explicar que el RGB se puede expresar de tres formas: porcentual, hexadecimal y decimal.

Tener preparada la explicacin de los colores seguros para la web por si alguien pregunta, que es bastante posible, pero si no, no dar ms detalles. La clave es que son seguros los mltiplos de 51, que a hexadecimal se traducen: 51 = 33, 102 = 66, 153 = 99, 204 = CC, 255 = FF.3FONT-SIZEEl valor del tamao de letra tambin se puede establecer de varias manerasMedidas relativas: LA MEJOR OPCIN (accesibildad y flexibilidad de medios)em (M mayscula)ex (x minscula)px (depende de la resolucin de pantalla)% (depende del tamao de un elemento superior)

Medidas absolutascm (centmetros)mm (milmetros)pt (puntos)

www.laramarcos.comInherit: aunque no lo pongo, tambin es un valor.

Hincapi en los problemas que se evitarn al usar medidas relativas aunque el concepto les sea ms abstracto.Y en que la medida va PEGADA al nmero.

Entregarles la hoja del YUI, para que vean las equivalencias de pxeles a % (carpeta apoyo y materiales).

Comentarles que los puntos se suelen usar para las CSS de impresora, que ya veremos ms adelante.

4Font- familyAl establecer el tipo de letra se recomienda indicar, al menos, tres alternativas2 nombres de tipos de letra, por ejemplo: Times New Roman o Courier New.Y el nombre de la familia tipogrfica: serif, cursive, sans-serif, fantasy y monospace.

Ejemplos ms habituales:font-family: Arial, Helvetica, sans-serif; font-family: "Times New Roman", Times, serif; font-family: "Courier New", Courier, monospace; font-family: Georgia, "Times New Roman", Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif;www.laramarcos.comInherit: aunque no lo pongo, tambin es un valor.

Esto es as porque la pgina web slo va a poder visualizarse con aquellos tipos de letra que le usuario tenga instalados en SU ordenador. As pues, si no encuentra el primero, buscar el segundo y si no, coger cualquiera de la familia indicada. Esto nos limita mucho el diseo pero existen tcnicas avanzadas que intentar suplir esta circunstancia, por ejemplo, la tcnica sIFR que consiste en sustituir el texto por una pelcula flash, pero requiere conocimientos de javascript, de flash, etc.

5Font-variantEl formato del texto puede tomar los siguientes valoresnormal (valor por defecto)italic (cursiva)oblique (casi en desuso)

Font-styleEstilo alternativo de la letranormal (valor por defecto)small-caps (maysculas pequeas)

www.laramarcos.comInherit: aunque no lo pongo, tambin es un valor.6Font-weightPara cambiar la anchura de la letra

Puede tomar mltiples valores pero los ms tiles son:normal (valor por defecto)bold (negrita)

Otros valores:400 = normal700 = boldlighter, bolder

www.laramarcos.comInherit: aunque no lo pongo, tambin es un valor.

Solo se usan estos dos porque las fuentes estndar, que como ya hemos visto son las que vamos a utilizar normalmente para evitar problemas, no soportan diferentes grados de negrita, o est en negrita o no. Pero saber que se pueden encontrar con otro tipo de valores (que les suene que existen ms).7fontRegla shorthand que engloba las 5 anteriores

En ESTE CASO, sigue un orden estrictoOpcionalmente: font-style, font-variant y/o font-weight (uno, dos o los tres valores)Obligatoriamente: font-sizeObligatoriamente: font-familywww.laramarcos.comExplicar que lo que hablemos ahora de las shorthand les sirve para las dems que veamos: background, margin, border, padding, etc.Se utilizan para optimizar el tiempo y el espacio dentro de nuestras hojas de estilos y para que sean ms fciles de leer.8Text-alignAlineacin del CONTENIDO de un elemento

No es nicamente para alinear texto

Posibles valoresleft (valor por defecto)right centerjustifywww.laramarcos.comMostrarles un ejemplo rpido con un contenedor que contenga prrafos e imgenes para que vean que tambin funciona con stas.9Line-heightInterlineado: altura de lnea de los ELEMENTOS

No funciona nicamente con el texto

Posibles valoresCualquier tipo de medidaUn nmero: funciona como mltiplo del tamao de la propia letra

www.laramarcos.comMostrarles un ejemplo rpido con un contenedor que contenga prrafos e imgenes para que vean que tambin funciona con stas.

Indicarles que es un pequeo detalle, que no lleva apenas tiempo y que reporta buenos resultados a la vista (mejor legibilidad, etc.)

Comentarles que esta propiedad se puede incluir en la shorthand font, entre font-size y font-family, pero que era por no liarles ms (como las dems propiedades llevan el apellido font, les ser ms fcil derecordar). Si la quieren emplear ah, tiene que ir acompaada de /10Text-decorationAdorno del texto

Valoresnone (valor por defecto, excepto en los enlaces)underline (subrayado: puede parecer un enlace)overlineline-through (tachado: habitual en los blogs)blink (parpadeante: poco recomendado)

www.laramarcos.comCuando no queris que los enlaces estn subrayados, por ejemplo, cuando hay una lista de enlaces no se recomienda que estn subrayados porque se ve todo apelotonado y es poco legible, el truco es poner text-decoration: none;113.2 enlacescolor fonttext-decoration

Jugar con ellas para establecer diferencias segn el estado del enlacelink (an sin visitar)visited (visitados anteriormente)hover (puntero encima)active (momento en el que se pincha)

www.laramarcos.comRegla nemotcnica a la hora de escribir los estilos de las pseudoclases: LoVe HaTe.

Como mnimo tenis que establecer diferentes estilos para el hover y el visited, para ayudar a la persona usuaria.123.3 imgeneswidth height

Los valores se expresan mediante cualquier tipo de medida (relativa, absoluta y %)

No es recomendable deformar las proporciones de la imagen

www.laramarcos.comPreparar la explicacin de la sombra: a primeras no es posible establecerla (lo que s es posible en todos los programas de diseo grfico), lo que se hace son truquillos (poner una imagen de fondo que sea la sombra).

PERO en CSS.3 s existe una propiedad CSS que se encarga de ello (box-shadow), la cuestin es si la soportarn los navegadores.

De momento, Firefox y Safari ya la soportan pero con un hack (no valida):

.elemento { -webkit-box-shadow: 2px 2px 5px #999; -moz-box-shadow: 2px 2px 5px #999; }

Y explorer tiene su propio mtodo (tampoco valida):filter: shadow(color=#999999, direction=135, strength=2);

Por lo que de momento, la recomendacin es usar la background-image.

Ejercicio 5 que engloba tratamiento de texto, enlaces e imgenes.

133.4 listaslist-style (shorthand)list-style-typelist-style-positionlist-style-image

www.laramarcos.comSe puede poner uno, dos y/o tres valores de stos, ninguno es obligatorio y no siguen un orden establecido (como si ocurra con font)14List-style-typeMarcado de la lista

Valoresdisc (crculo relleno)circle (crculo vaco)square (cuadradito)decimal, decimal-leading-zerolower-roman, upper-roman (nmeros romanos)lower-latin, upper-latin, lower-alpha, upper-alpha (alfabeto)Otros: armenian, georgian, lower-greek

www.laramarcos.comDecimal-leading-zero: en vez de 1, 2, 3 es 01, 02, 03.Lower-roman son nmeros romanos en minsculas, upper en maysculas.No hay diferencia entre latin y alpha.Recalcar que el color de las decoraciones es el mismo que el del color de la fuente del texto, para cambiarlo se recurre a list-style-image.15List-style-positionPosicin del marcador respecto al texto (slo se aprecia cuando ocupan ms de una lnea)

Valoresinside (la 2 lnea se coloca debajo del marcador)outside (la 2 lnea permanece alejado del marcador)

www.laramarcos.comRespecto a la posicin vertical, siempre se coloca en el centro de lnea.El valor por defecto es outside.16List-style-imageUtilizar una pequea imagen como marcador de las listas

Valorurl (imag