View
1.931
Download
2
Category
Tags:
Preview:
DESCRIPTION
Principales propiedades CSS agrupadas por leemnetos: textos, imágenes, enlaces, etc.
Citation preview
PROPIEDADES
TEMA 3
www.laramarcos.com
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
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
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
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
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
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
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
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
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
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
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
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
3.4 LISTAS
1. list-style (shorthand)1. list-style-type2. list-style-position3. list-style-image
www.laramarcos.com
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
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
LIST-STYLE-IMAGE
Utilizar una pequeña imagen como marcador de las listas
Valorurl (“images/marcador1.png”)
www.laramarcos.com
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
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
Recommended