• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Recuerdo de las propiedades CSS

Log in or subscribe for free to enjoy all this course has to offer!

Esta página ofrece una lista no exhaustiva de las propiedades CSS disponibles en CSS3. Aunque en su mayor parte hemos visto estas propiedades durante el curso, hay algunas nuevas que no hemos abordado.

La lista no es exhaustiva, ya que mi objetivo no es elaborar una lista de todas las propiedades CSS que puedan existir; en realidad, hay demasiadas (¡más de doscientas!) y algunas se utilizan muy raramente.

Recuerdo

Propiedades para dar formato al texto

Voy a resumir aquí la mayor parte de las propiedades para dar formato al texto .

¿Qué es dar formato al texto? Es todo lo que se refiere a la presentación del texto en sí: negrita, cursiva, subrayado, tipo de letra, alineación, etc.

Propiedad

Valores (ejemplos)

Descripción

font-family

police1, police2, police3, serif, sans-serif, monospace

Nombre de la fuente

@font-face

Origen y nombre de la fuente

Fuentes personalizadas

font-size

1.3em, 16px, 120%...

Tamaño de la fuente

font-weight

bold, normal

Negrita

font-style

italic, oblique, normal

Cursiva

text-decoration

underline, overline, line-through, blink, none

subrayado, línea por encima, tachado, parpadeo

font-variant

small-caps, normal

Mayúsculas pequeñas

text-transform

capitalize, lowercase, uppercase

Mayúsculas

font

-

La súper propiedad fuente combina: font-weight, font-style, font-size, font-variant, font-family.

text-align

left, center, right, justify

Alineación horizontal

vertical-align

baseline, middle, sub, super, top, bottom

Alineación vertical (celdas de la tabla, o solo elementos inline-block)

line-height

18px, 120%, normal...

Altura de la línea

text-indent

25px

Subpárrafo

white-space

pre, nowrap, normal

Unión con guión

word-wrap

break-word, normal

Unión con guión forzada

text-shadow

5px 5px 2px azul
(horizontal, vertical, fade, color)

Sombreado del texto

Propiedades de color y fondo

Propiedad

Valores (ejemplos)

Descripción

color

nombre, rgb (red, green, blue), rgba (red, green, blue, transparency), #CF1A20, etc.

Color del texto

background-color

Igual que el color

Color de fondo

background-image

url('image.png')

Imagen de fondo

background-attachment

fixed, scroll

Fondo fijo

background-repeat

repeat-x, repeat-y, no-repeat, repeat

Repetición del fondo

background-position

(x y), top, center, bottom, left, right

Posición del fondo

background

-

Súper propiedad background. Combina: background-image, background-repeat, background-attachment, background-position

opacity

0.5

Transparencia

Propiedades box

Propiedad

Valores (ejemplos)

Descripción

width

150px, 80%...

Width

height

150px, 80%...

Altura

min-width

150px, 80%...

Ancho mínimo

max-width

150px, 80%...

Ancho máximo

min-height

150px, 80%...

Altura mínima

max-height

150px, 80%...

Altura máxima

margin-top

23px

Margen superior

margin-left

23px

Margen izquierdo

margin-right

23px

Margen derecho

margin-bottom

23px

Margen inferior

margin

23px 5px 23px 5px
(top, right, bottom, left)

Súper propiedad margin
Combina: margin-top, margin-right, margin-bottom, margin-left.

padding-left

23px

Margen interno a la izquierda

padding-right

23px

Margen interno a la derecha

padding-bottom

23px

Margen interno inferior

padding-top

23px

Margen interno superior

padding

23px 5px 23px 5px
(top, right, bottom, left)

Súper propiedad inner margin.
Combina: padding-top, padding-right, padding-bottom, padding-left.

border-width

3px

Ancho del borde

border-color

nombre, rgb (red, green, blue), rgba (red, green, blue, transparency), #CF1A20, etc.

Color del borde

border-style

solid, dotted, dashed, double, groove, ridge, inset, outset

Tipo de borde

border

3px solid black

Súper propiedad border. Combina border-width, border-color, border-style.
También disponible para estas versiones border-top, border-right, border-bottom, border-left.

border-radius

5px

Bordes redondeados

box-shadow

6px 6px 0px black
(horizontal, vertical, fade, color)

Box shadow

Propiedades del posicionamiento en pantalla

Propiedad

Valores (ejemplos)

Descripción

display

block, inline, inline-block, table, table-cell, none...

Tipo de elemento ( block, inline, inline-block, none…)

visibility

visible, hidden

Visibility

clip

rect (0px, 60px, 30px, 0px)
rect (top, right, bottom, left)

Mostrar una porción del elemento

overflow

auto, scroll, visible, hidden

Comportamiento en caso de exceder

float

left, right, none

Flotante

clear

left, right, both, none

Parar algo flotante

position

relative, absolute, static

Posicionamiento

top

20px

Posición relativa a la parte superior

bottom

20px

Posición relativa a la parte inferior

left

20px

Posición relativa a la parte izquierda

right

20px

Posición relativa a la parte derecha

z-index

10

Mostrar el orden en caso de solapamiento.
El valor más alto se muestra por encima de los demás.

Propiedades list

Propiedad

Valores (ejemplos)

Descripción

list-style-type

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none

Tipo de lista

list-style-position

inside, outside

Posición de la sangría

list-style-image

url('puce.png')

Viñeta personalizada

list-style

-

Súper propiedad list. Combina list-style-type, list-style-position, list-style-image.

Propiedades de tabla

Propiedad

Valores (ejemplos)

Descripción

border-collapse

collapse, separate

Fusionar bordes

empty-cells

hide, show

Mostrar las celdas en blanco

caption-side

bottom, top

Posición del título de tabla

Otras propiedades

Propiedad

Valores (ejemplos)

Descripción

cursor

crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto...

Cursor del ratón

Example of certificate of achievement
Example of certificate of achievement