CSS3 (Cascading Style Sheets)

Tecnología que le da estilo a secciones declaradas en el html, al implementar los

valores con px en diferentes propiedades, nos podemos apoyar en el wireframing
del diseño de la página. Para encontrar tipografías y tipos de texto ir a google fonts
e implementarlos al html con la ruta embebida

Selectores:
(Va desde el nombre de la etiqueta, id de etiqueta, clase de la etiqueta, atributo de
la etiqueta). Dependiendo de qué tipo de selector sea, su sintaxis para invocar estos
bloques.
Etiquetas: El selector se escribe idéntico a la palabra reservada para la etiqueta y
se seleccionaran todas las etiquetas que tengan el mismo nombre para darle estilo
 Etiqueta
 body
Clase: Da estilo a solo determinados elementos marcados con el valor del atributo
class. El valor de class debe ser descriptivo de la clase o el objetivo que tiene. Ej
class=”Texto-que-va-al-centro”
 .class
 .Texto-sombreado
Id= Da estilo solo a un elemento en especifico (ya que sirve para ser mas preciso
en el elemento irrepetible)
 #Apellido
 #id
Selectores descendentes: Secciona elementos que son decendientes de otro (se
encuentran dentro de otros).Este tiene que estar separado por un ESPACIO
Selector1 selectorhijo{}
 Etiqueta subetiqueta
  div p
Selectores conjunto: Secciona todos los elementos de los x selectores a los que
se les quiera dar propiedades. Estos tienen que estar totalmente JUNTOS (si se
tiene un symbol para identificar el selector como #.:) o bien, separados por una
COMA si son selectores de etiqueta o descendientes
 Clase,Etiqueta
 .main,p
Selector universal:
 *
Atributo: Selector que da estilo a los todos los atributos escogidos
 [atributo]
 [atributo=”valor”]

PseudoClases: Son selectores que complementan a principal (cualquier tipo de

selector) que les dan propiedades de clase y se adjuntan con dos puntos
 Etiqueta subetiqueta: pseudoclase
 div p:hover
PseudoElementos: Ayudan a añadir estilo a una parte contreta del selector al que
se fue añadido este, como darle estilo solo a la primera línea, a la ultima, del selector
primario
 Etiqueta subetiqueta: pseudoclase
 div p:first-line

{} :
Dentro de las llaves van “x” propiedades (propiedad:valor) divididas por un ; estas
cuentan con propiedades las cuales van ligadas a ciertos grupos de estilo (tipos de
texto, colores, posicionamiento, tamaños, diseños, etc)
 Propiedades:

 Font-family:

Define la familia tipográfica. Es conveniente poner una lista de dos o tres tipografías
separadas por coma, porque si el usuario no tiene instalada la tipografía que
nosostros elegimos, el navegador opta por mostrar la siguiente que debería ser una
similar, si tampoco la tiene instalada, mostrará la tipografía por defecto.

Tenemos 3 opciones para definir la elección de la familia tipográfica:1) usar una de

las fuentes más comunes (web safe fonts) que muy probablemente tenga instalada
el usuario (Arial, Verdana, Trebuchet, Georgia, san serif, Times), 2) subir nuestra
propia fuente con una propiedad nueva que se llama @font-face, o 3) usar una
fuente de Google Font, que en este momento es lo más recomendable. El sitio
es: http://www.google.com/fonts/.

 Font-size:

Define el tamaño de la fuente y el valor se puede escribir en pixels o en ems. En

este momento se recomienda usar ems. Los dos son valores relativos, el pixel es
un valor relativo a la resolución de la pantalla, pero el em es relativo al tamaño de
la fuente definida por el usuario. Si el usuario no cambió la configuración, el valor
por defecto de los textos en todos los navegadores es de 16px. Entonces 1em =
16px.

 Color:

Define el color de la tipografía. Los colores se pueden escribir de 3 formas distinas:

con sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Con los nombres de los
colores (más limitado) por ejemplo: black, red, green. O usando RGB, esta paleta
permite agregar el canal alfa para hacer transparencias.

 Width:

Define el ancho de un elemento, el valor se puede escribir en pixels, ems o

porcentaje.

 Max-width o min-width:

Definen el ancho máximo o mínimo de un elemento. Muy importante en sitios

adaptables

 Height:
Define el alto de un elemento, el valor se puede escribir en pixels, ems o porcentaje.

 Max-height o min-height:

Definen el alto máximo o mínimo de un elemento. Muy importante en sitios

adaptables

 Padding:

Es la distancia desde el borde de un elemento hasta su contenido.

 Margin:

Es la distancia entre un elemento y otro (desde el borde de un elemento hacia

afuera)

 Border:

Define el borde de un elemento, su color, su estilo y grosor.

 Background:

Define los fondos de un objeto. El fondo puede ser una imagen o un color. El color
puede ser pleno o degradado. La imagen se puede repetir formando una trama (es
lo que ocurre por defecto) o se puede especificar que no repita y que se coloque en
determinada posición.

Tipos
Propiedad Descripción Valores
contador Contador counter(nombre, estilo)
familia-genérica Familia cursive | fantasy | monospace | serif |
genérica de sans-serif
fuente
forma Forma rect(top, right, bottom, left)
tamaño-absoluto Tamaño xx-small | x-small | medium | large |
absoluto de x-large | xx-large
fuente
tamaño-relativo Tamaño larger | smaller
relativo de
fuente
uri (para imagen Dirección url("ruta_y_nombre_de_archivo")
de fondo o absoluta o
fuentes web) relativa
Reglas arroba
Propiedad Descripción Descriptores / Características
@import Importar recurso url(...)
@font-face Fuente web font-family, src, font-style, font-
weight, font-stretch, unicode-range,
font-variant, font-feature-settings
@media Características del width | height | orientation | aspect-
dispositivo ratio | resolution | etc.
Tipo de letra (fuente)
Propiedad Descripción Valores
font propiedad [ [ font-style || font-variant || font-
compuesta weight ]? font-size [ / line-height ]?
font-family ] | caption | icon | menu |
message-box | small-caption | status-
bar
font-family tipo de letra [ nombre-fuente | familia-genérica ] [,
(fuente) nombre-fuente | familia-genérica ]*
font-size tamaño tamaño-absoluto | tamaño-relativo |
distancia | porcentaje
font-weight grosor del trazo normal | bold | bolder | lighter | 100 |
(negrita) 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900
font-style inclinación normal | italic | oblique
(cursiva)
font-variant(3) variantes normal | small-caps
tipográficas
font-variant- versalitas normal | small-caps
caps(3)
font-kerning(3) kerning auto | normal | none
font-variant- ligaduras normal | none | common-ligatures |
ligatures(3) no-common-ligatures | discretionary-
ligatures | no-discretionary-ligatures |
historical-ligatures | no-historical-
ligatures | contextual | no-contextual
font-variant- versalitas normal | lining-nums | oldstyle-nums |
numeric(3) proportional-nums | tabular-nums |
 diagonal-fractions | stacked-fractions
| ordinal | slashed-zeros
font-variant- posición normal | sub | super
position(3)
font-variant- lenguas asiáticas normal | jis78 | jis83 | jis90 | jis04 |
east-asian(3) simplified | traditional | full-width |
proportional-width | ruby
font-feature- características normal | características OpenType
settings(3) OpenType
font- síntesis none | weight | style
synthesis(3)
font-size- ajuste del tamaño número
adjust(3)
font-stretch(3) anchura ultra-condensed, extra-condensed,
condensed, semi-condensed, normal,
semi-expanded, expanded, extra-
expanded, ultra-expanded
Texto
Propiedad Descripción Valores
color color del texto color
direction dirección del texto ltr | rtl
letter-spacing espacio entre normal | distancia
caracteres
line-height espaciado entre normal | número | distancia |
líneas porcentaje
text-align alineación del texto center | justify | left | right
text- decoración del none | blink | line-through | overline |
decoration texto underline
text-indent sangrado de la distancia | porcentaje
primera línea
text-transform mayúsculas / none | capitalize | lowercase |
minúsculas uppercase
text-shadow(3) sombreado desplazamiento horizontal,
desplazamiento vertical, tamaño
desenfoque, color
unicode-bidi dirección del texto normal | embed | bidi-override
vertical-align alineación vertical baseline | bottom | middle | sub |
super | text-bottom | text-top | top |
distancia | porcentaje
white-space espacios en blanco, normal | nowrap | pre | pre-line(+) |
saltos de línea y pre-wrap(+)
wrap
word-spacing espacio entre normal | distancia
palabras
Bordes
Propiedad Descripción Valores
border cuatro bordes border-color || border-width || border-
simultáneamente style
border-top borde superior border-color || border-width || border-
style
border-right borde derecho border-color || border-width || border-
style
border-bottom borde inferior border-color || border-width || border-
style
border-left borde izquierdo border-color || border-width || border-
style
border- esquinas [ distancia | porcentaje ] {1, 4}
radius(3) redondeadas
border-top- esquina superior distancia | porcentaje
right-radius(3) derecha redondeada
border- esquina inferior distancia | porcentaje
bottom-right- derecha redondeada
radius(3)
border- esquina inferior distancia | porcentaje
bottom-left- izquierda
radius(3) redondeada
border-top- esquina superior distancia | porcentaje
left-radius(3) izquierda
redondeada
border-color color de los bordes [ color | transparent ] {1, 4}
border-width grosor de los [ medium | thick | thin | distancia ] {1,
bordes 4}
border-style estilos de los [ none | hidden | dashed | dotted |
bordes double | groove | inset | outset | ridge |
solid ] {1, 4}
border-top- color del borde [ color | transparent ] {1, 4}
color superior
border-top- grosor del borde [ medium | thick | thin | distancia ] {1,
width superior 4}
border-top- estilo del borde [ none | hidden | dashed | dotted |
style superior double | groove | inset | outset | ridge |
solid ] {1, 4}
border-right- color del borde [ color | transparent ] {1, 4}
color derecho
border-right- grosor del borde [ medium | thick | thin | distancia ] {1,
width derecho 4}
border-right- estilo del borde [ none | hidden | dashed | dotted |
style derecho double | groove | inset | outset | ridge |
solid ] {1, 4}
border- color del borde [ color | transparent ] {1, 4}
bottom-color inferior
border- grosor del borde [ medium | thick | thin | distancia ] {1,
bottom-width inferior 4}
border- estilo del borde [ none | hidden | dashed | dotted |
bottom-style inferior double | groove | inset | outset | ridge |
solid ] {1, 4}
border-left- color del borde [ color | transparent ] {1, 4}
color izquierdo
border-left- grosor del borde [ medium | thick | thin | distancia ] {1,
width izquierdo 4}
border-left- estilo del borde [ none | hidden | dashed | dotted |
style izquierdo double | groove | inset | outset | ridge |
solid ] {1, 4}
Margen exterior
Propiedad Descripción Valores
margin cuatro márgenes [ auto | distancia | porcentaje ] {1, 4}
exterior
simultáneamente
margin-top margen exterior auto | distancia | porcentaje
superior
margin-right margen exterior auto | distancia | porcentaje
derecho
margin-bottom margen exterior auto | distancia | porcentaje
inferior
margin-left margen exterior auto | distancia | porcentaje
izquierdo
Margen interior
Propiedad Descripción Valores
padding cuatro márgenes [ distancia | porcentaje ] {1, 4}
interiores
simultáneamente
padding-top margen interior distancia | porcentaje
superior
padding-right margen interior distancia | porcentaje
derecho
padding- margen interior distancia | porcentaje
bottom inferior
padding-left margen interior distancia | porcentaje
izquierdo
Fondos
Propiedad Descripción Valores
background propiedad background-attachment ||
compuesta background-color || background-
image || background-position ||
background-repeat
background(3) fondos múltiples separados por comas
background- ligadura de la fixed | scroll
attachment imagen
background- color de fondo transparent | color
color
background- imagen de fondo none | uri
image
background- posición de la [ [ left | center | right | distancia |
position imagen de fondo porcentaje] [ top | center | bottom |
distancia | porcentaje] ]? | [ [ left |
center | right ] || [ top | center | bottom
]]
background- repetición de la no-repeat | repeat | repeat-x | repeat-y
repeat imagen de fondo | space(3) | round(3)
background- límite de la imagen border-box | padding-box | content-
clip(3) de fondo box
background- tamaño de la auto | [ distancia | porcentaje ] {2} |
size(3) imagen de fondo contain | cover
background- origen de la imagen border-box | padding-box | content-
origin(3) de fondo box
Listas
Propiedad Descripción Valores
list-style propiedad list-style-image || list-style-position ||
compuesta list-style-type
list-style- imagen del none | uri
image marcador
list-style- posición del inside | outside
position marcador
list-style-type tipo de marcador none | circle | disc | square | decimal |
decimal-leading-zero | lower-alpha |
upper-alpha | lower-greek | lower-
latin | upper-latin | lower-roman |
upper-roman | armenian | georgian |
hebrew(-) | cjk-ideographic(-) |
hiragana(-) | katakana(-) | hiragana-
iroha(-) | katakana-iroha(-)
Tablas
Propiedad Descripción Valores
border- modo de bordes collapse | separate
collapse
border-spacing separación entre distancia distancia?
celdas
caption-side posición de la top | bottom | left(-) | right(-)
leyenda
empty-cells borde de casillas hide | show
vacías
table-layout algoritmo ancho de auto | fixed
tabla
Modelo de caja / Tamaño
Propiedad Descripción Valores
display tipo de caja none | block | compact(-) | inline |
inline-block(+) | inline-table | list-item
| marker(-) | run-in | table | table-
caption | table-cell | table-column |
table-column-group | table-footer-
group | table-header-group | table-row
| table-row-group | flex(3) | inline-
flex(3)
box-sizing(3) posición del borde border-box | content-box
y márgenes
width anchura auto | distancia | porcentaje
min-width anchura mínima distancia | porcentaje
max-width anchura máxima distancia | porcentaje
height altura auto | distancia | porcentaje
min-height altura mínima distancia | porcentaje
max-height anchura máxima distancia | porcentaje
overflow si el contenido auto | hidden | scroll | visible
desborda al
elemento
Posicionamiento
Propiedad Descripción Valores
float modo de none | left | right
posicionamiento
flotante
clear lado en el que no none | both | left | right
puede haber
elementos flotantes
position modo de absolute | fixed | relative | static
posicionamiento
top posición del borde auto | distancia | porcentaje
superior del
elemento
right posición del borde auto | distancia | porcentaje
derecho del
elemento
bottom posición del borde auto | distancia | porcentaje
inferior del
elemento
left posición del borde auto | distancia | porcentaje
izquierdo del
elemento
clip recorta el elemento auto | forma
visibility visibilidad hidden | collapse | visible
z-index apilamiento auto | número-entero
Cajas flexibles
Propiedad Descripción Valores
display tipo de caja flex(3) || inline-flex(3)
flex-flow(3) propiedad flex-direction || flex-wrap
compuesta
flex- dirección row || row-reverse || column ||
direction(3) column-reverse
flex-wrap(3) ajuste de línea wrap || no-wrap || wrap-reverse
order(3) número de orden número
flex(3) propiedad [ flex-grow || flex-shrink || flex-basis ]
compuesta || initial || auto || none || número
flex-grow(3) factor de expansión número
flex-shrink(3) factor de número
compresión
flex-basis(3) tamaño inicial distancia || auto || content || width
justify- alineación en la flex-start || flex-end || center || space-
content(3) dirección principal between || space-around
align-items(3) alineación en la flex-start || flex-end || center ||
dirección baseline || stretch
secundaria (una
línea)
align-self(3) alineación auto || flex-start || flex-end || center ||
individual en la baseline || stretch
dirección
secundaria
align- alineación en la flex-start || flex-end || center || space-
content(3) dirección between || space-around || stretch
secundaria (varias
líneas)
Impresora
Propiedad Descripción Valores
page-break- salto de página auto | always | avoid | left | right
after después de
page-break- salto de página auto | always | avoid | left | right
before antes de
page-break- salto de página auto | avoid
inside dentro de
orphans número de líneas al número-entero
final de página
widows número de líneas al número-entero
principio de la
página
Interface de usuario
Propiedad Descripción Valores
cursor tipo de cursor [uri,]* | auto | crosshair | default | help
| move | pointer | progress | n-resize |
ne-resize | e-resize | se-resize | s-
resize | sw-resize | w-resize | nw-
resize | text | wait
outline cuatro bordes outline-color || outline-width ||
simultáneamente outline-style
outline-color color de los bordes color
outline-width grosor de los border-width
bordes
outline-style estilos de los border-style
bordes