Download - 3.Propiedades (diseño con CSS)

Transcript
Page 1: 3.Propiedades (diseño con CSS)

PROPIEDADES

TEMA 3

www.laramarcos.com

Page 2: 3.Propiedades (diseño con CSS)

3.1 TEXTO

1. color 2. font (shorthand)

1. font-size2. font-family3. font-style4. font-variant5. font-weight

3. text-align4. line-height5. text-decoration

www.laramarcos.com

Page 3: 3.Propiedades (diseño con CSS)

COLOR

Hay múltiples formas de establecer el valor del colorPalabras clave, en inglés = 17 coloresRGB = 16 millones de colores

Propiedad que se hereda, a excepción de los enlaces

Ejemplos:color: red;

color: rgb (51, 204, 102);

color: rgb (20%, 12%, 75%);

color: #33CC66; EL MÁS UTILIZADOwww.laramarcos.com

Page 4: 3.Propiedades (diseño con CSS)

FONT-SIZE

El valor del tamaño de letra también se puede establecer de varias manerasMedidas relativas: LA MEJOR OPCIÓN

(accesibildad y flexibilidad de medios) em (M mayúscula) ex (x minúscula) px (depende de la resolución de pantalla) % (depende del tamaño de un elemento

superior)

Medidas absolutas cm (centímetros) mm (milímetros) pt (puntos)

www.laramarcos.com

Page 5: 3.Propiedades (diseño con CSS)

FONT- FAMILY

Al establecer el tipo de letra se recomienda indicar, al menos, tres alternativas 2 nombres de tipos de letra, por ejemplo: Times

New Roman o Courier New. Y el nombre de la familia tipográfica: serif, cursive,

sans-serif, fantasy y monospace.

Ejemplos más 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.com

Page 6: 3.Propiedades (diseño con CSS)

FONT-VARIANT

El formato del texto puede tomar los siguientes valoresnormal (valor por defecto) italic (cursiva)oblique (casi en desuso)

FONT-STYLE

Estilo alternativo de la letranormal (valor por defecto)small-caps (mayúsculas pequeñas)

www.laramarcos.com

Page 7: 3.Propiedades (diseño con CSS)

FONT-WEIGHT

Para cambiar la anchura de la letra

Puede tomar múltiples valores pero los más útiles son:normal (valor por defecto)bold (negrita)

Otros valores:400 = normal700 = bold lighter, bolder

www.laramarcos.com

Page 8: 3.Propiedades (diseño con CSS)

FONT

Regla shorthand que engloba las 5 anteriores

En ESTE CASO, sigue un orden estricto1. Opcionalmente: font-style, font-variant y/o

font-weight (uno, dos o los tres valores)2. Obligatoriamente: font-size3. Obligatoriamente: font-family

www.laramarcos.com

Page 9: 3.Propiedades (diseño con CSS)

TEXT-ALIGN

Alineación del CONTENIDO de un elemento

No es únicamente para alinear texto

Posibles valores left (valor por defecto) right center justify

www.laramarcos.com

Page 10: 3.Propiedades (diseño con CSS)

LINE-HEIGHT

Interlineado: altura de línea de los ELEMENTOS

No funciona únicamente con el texto

Posibles valoresCualquier tipo de medidaUn número: funciona como múltiplo del

tamaño de la propia letra

www.laramarcos.com

Page 11: 3.Propiedades (diseño con CSS)

TEXT-DECORATION

Adorno del texto

Valoresnone (valor por defecto, excepto en los

enlaces)underline (subrayado: puede parecer un

enlace)overline line-through (tachado: habitual en los blogs)blink (parpadeante: poco recomendado)

www.laramarcos.com

Page 12: 3.Propiedades (diseño con CSS)

3.2 ENLACES

1. color 2. font3. text-decoration

Jugar con ellas para establecer diferencias según el estado del enlace

link (aún sin visitar) visited (visitados anteriormente) hover (puntero encima) active (momento en el que se pincha)

www.laramarcos.com

Page 13: 3.Propiedades (diseño con CSS)

3.3 IMÁGENES

1. width 2. height

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

No es recomendable deformar las proporciones de la imagen

www.laramarcos.com

Page 14: 3.Propiedades (diseño con CSS)

3.4 LISTAS

1. list-style (shorthand)1. list-style-type2. list-style-position3. list-style-image

www.laramarcos.com

Page 15: 3.Propiedades (diseño con CSS)

LIST-STYLE-TYPE

Marcado de la lista

Valoresdisc (círculo relleno)circle (círculo vacío)square (cuadradito)decimal, decimal-leading-zero lower-roman, upper-roman (números

romanos) lower-latin, upper-latin, lower-alpha,

upper-alpha (alfabeto)Otros: armenian, georgian, lower-greek

www.laramarcos.com

Page 16: 3.Propiedades (diseño con CSS)

LIST-STYLE-POSITION

Posición del marcador respecto al texto (sólo se aprecia cuando ocupan más de una línea)

Valores inside (la 2ª línea se coloca debajo del marcador)outside (la 2ª línea permanece alejado del

marcador)

www.laramarcos.com

Page 17: 3.Propiedades (diseño con CSS)

LIST-STYLE-IMAGE

Utilizar una pequeña imagen como marcador de las listas

Valorurl (“images/marcador1.png”)

www.laramarcos.com

Page 18: 3.Propiedades (diseño con CSS)

3.5 TABLAS1. border-spacing (separación entre celdas)

Una medida (horizontal y vertical) Opcionalmente, una 2ª medida (la 1ª indica

la horizontal y la 2ª la vertical)

2. caption-side (posición vertical del caption)

top (valor por defecto) bottom

3. border-collapse (cómo se muestra el borde de las celdas)

separate (valor por defecto) collapse www.laramarcos.com

Page 19: 3.Propiedades (diseño con CSS)

3.6 FORMULARIOS Jugar con:

padding (para los input type=“text”) margin display (block) float etc.

Y con la pseudo-clase :focus

www.laramarcos.com