CSS

VALIDADOR DE CDIGO CSS http://jigsaw.w3.org/css-validator/

INSERCCIN
En lnea: <p style=color:red;>Texto</p>
Interno: <style type=text/css> p {color: red;}</style>
Externo: <link rel=stylesheet type:=text/css href=css/estilos.css/>

MEDIOS
Identifica a qu tipo de dispositivo se aplican los estilos.
@media screen, print { body { line-height: 1.2 }}
all | screen | print. | tty. | tv | projection | handhell | speech. | braille | embossed
@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
<link rel="stylesheet" type="text/css" media="print, handheld" href="especial.css" />

PRIORIDAD
1. Estilos en Lnea 2. ID 3. Clase 4. Elemento

TEXTO
color: red;
font-family: arial, AvantGarde Bk; | fantasy
font-Size: 5px; smalller | larger
font-strech: ancho de la fuente, expanded, condensed
font-weight: bold; normal, 100, bolder, lighter
font-variant: small-caps; normal,
font-style: normal, italic, oblique
text-align: center; left, right, justify
line-height: 30px; normal Misma altura contenedor
text-decoration: none; overline, line-through, underline, blink
text-transform: uppercase; lowercase, capitalize , none
text-indent: 1px; Sangria primera lnea prrafo
letter-spacing: normal; 10%
word-spacing: 20px; normal
word-wrap: initial | normal | break-word
word-break: normal | break-all | keep-all | initial | inherit
white-space: normal, pre, nowrap, pre-wrap-pre-line
text-shadow: inset 5px 5px 5px #0000; inset dentro | innerfuera
 Formato (X Y desenfoque)
Vertical-align: baseline, sub, super, top, text-top, middle, bottom, text-bottom,
100%
Direction: left to right | right to left
Text-overflow: clip | ellipsis |

FONT FACE
@font-face {
font-family: Fontinsans;
src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype");
src: local(?),
url(fonts/FiraMono.eot) format("embedded-opentype");

FORMATO DE FUENTES
woff | truetype(ttf) | opentype(otf) | embedded-opentype(eot) | svg

FONDO
background-image: url(imagen.jpg), url(otraimagen.png); As mismo repeat
backgroud-size: contain | cover
background-repeat: repeat | no-repet | repeat-x | repeat-y
background-position: pH pV
posicionHorizontal. Left | right | middle | px | %
posicionVertical. Top | bottom | center | px | %
background-attachement: scroll; fixed
bckground-color: blue;
background-origin: border-box: padding-box: content-box:
background-clip: border-box | padding-box | content-box

SELECTORES
* { } Todo el documento
body { } Etiqueta
h1, h2, h3 { } Varias etiquetas
body a { } Etiqueta dentro
.class { } Clase: Varios elementos
#id { } ID: Un solo elemento
div+p Selector Adyacente: Tiene ser Hermano, inmediato seleccionado
div>p Selector de hijo
h2 ~ h2 Selector Hermano
p { color:red !important}
Input [type=submit]
elemento[atributo^="valor"], comienza exactamente por la cadena indicada.
elemento[atributo$="valor"], termina exactamente por la cadena indicada.
elemento[atributo*="valor"], contiene la cadena de texto indicada.
:nth-last-child(n) - igual que :nth-child(n) pero empezando a contar desde el
final.

:nth-of-type(n) - Ejemplo la segunda lista no ordenada sera ul:nth-of-type(2).

:nth-last-of-type(n) - igual que :nth-of-type(n) pero empezando a contar desde
el final.
:first-child - Fija el aspecto del primer elemento de un tipo de selector solo si es
el primer nodo hijo de su elemento padre, por ejemplo la primera etiqueta <li> de
una
lista <ol>.
:first-line Primera lnea
:first-letter Primera letra
:last-child - Ultimo elemento de una lista de elementos de un tipo dado.
:first-of-type - Selecciona el primer elemento de un tipo concreto dentro de la
lista de hijos.
:last-of-type - Selecciona el ltimo elemento de un tipo.
 :only-child - Selecciona el elemento si es el nico elemento hijo.
:only-of-type - Selecciona el elemento si es el nico elemento hijo de ese tipo.
:empty Elementos que no tienen hijos (incluyendo nodos de texto).
:enabled - Selecciona los elementos de la interfaz que tengan el estado
enable.
:disabled - Selecciona los elementos de la interfaz que tengan un estado
disabled.
:not() div:not(.contenedor).
:lang(language) - nos permite especificar estilos que dependen del idioma
especificado por la propiedad language (en, sp, etc.)

PSEUDOELEMENTOS
:focus | :before | :first-line | :first-letter | :after | :enabled | :disabled | :checked

p:before {
content: ;
propiedad:10px
}

:hover | :focus

Formularios
:valid - campo vlido (depender del tipo de campo).
:invalid - campo invlido (depender del tipo de campo).
:required - campo requerido (marcado con el atributo required).
:optional - campo opcional (campo no marcado con el atributo required).
:checked - elemento marcado (o checked, vlido para radio button o checkbox).
:in-range - valor dentro del rango indicado (para campos numricos o de rango).

:out-of-range - valor fuera de rango (para campos numricos o de rango).

:read-only - campo de solo lectura.
:read-write - campo de lectura / escritura.

ENLACES
a:hoverMouse | a:link no visitado | a:visitedvisitados | a:activeClick

CAJAS
. Height: 2px; auto
Width: 3px;
Min-width:
Max-width:
Padding: 2px 3px 4px 4px; superior derecha inferior izquierda
Margin: 1px 2px 3px 4px;
Border-width: 10px; thin, mdium, thick
 Border-style: solid, dashed, dotted, double, groove, ridge, inset, outset
Border-color: red;
Border-top:
Border-radius: 1px 1px 1px 1px;
border-top-left-radius: horizontal vertical;
Border-image: ruta tamaoEsquinas modoEstirar;
tamaoEsquinas. Es lo que mide cada esquina empezando por la superior
izquierda y luego yendo hacia la derecha y hacia abajo. Si miden lo mismo, slo se
indica un nmero (normalmente no se indica la unidad porque siempre se entiende
en pxeles)
modoEstirar. Puede ser round (repetir hasta llenar) o stretch (estirar). Podemos
indicar dos valores, el primer se referir a la forma de rellenar en horizontal y el
segundo ser en vertical.
Box-shadow: Xpx Ypx desenfoquepx color;

CURSOR: URL, auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-
resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help |
progress

TABLAS
Border-collapse: collapse; separate
Border-spacing: 1px 2px;
Empty-cells: show; hide celdad vacias
Caption-side: top, bottom, para etiqueta caption
table-layout: auto | fixed
speak-header

FORMULARIOS
Label display:block;
Textarea {
Resize:horizontal; vertical. Both
Max-height:900px;
Min-heught.100px;

MEDIDAS
Absolutas
px | in | pt | cm | mm | pc
Relativas
Em cuerpo tipogrfico Padre ms cercano
Ex Altura de X
Remcuerpo tipogrfico del root
%Para cajas
Vw viewport width
vh viewport height
vmin y vmax.

COLOR
rgba: Valores entre 0 y 255(49,56,76,0.8).ultimo opacidad
hsla: Valores entre 0 y 360 (tono,contraste%, brillo5, opacidad)

IMGENES
Display:inline; block
Border-radius:10px
Box-shadow: 5px 5px 5px #def5;

LISTAS
list-style-type: circle; disc, square, upper-latin, lower-latin
list-style-position: inside; outside
list-style-image: url(imagen.jpg), none
display: list-style oitem

PREFIJOS
-moz- para Firefox.
-webkit- para Safari y Chrome.
-o- para Opera.
-khtml- para Konqueror.
-ms- para Internet Explorer.
-chrome- especfico para Google Chrome.

POSITION: Static | Relative | Absolute | Fixed

Left | top | right | bottom
VISIBILITY: hidden, | visible | collapse Respeta el espacio
OVERFLOW: auto | visible | hidden | scroll,
OVERFLOW-X:
OVERFLOW-Y:
OVERFLOW-STYLE: scrollbar | marquee | move
Z-INDEX: auto | numero Slo tiene efecto elementos posicionados, obligatorio
acompaada position.
FLOAT: Left | right
RESIZE: Both, horizontal,
CLIP: rect(20px,20px,20px,20px);
OPACITY:1;
CLEAR: both; None; left; right; coth

DISPLAY: inline block list-item run-in inline-block table inline-table table-

row-group table-header-group table-footer-group table-row table-column-
group table-column table-cell table-caption none

FLEX BOX
Contenedor
display: flex;
display: inline-flex;

flex-flow: row wrap; Alinear en fila

flex-direction: Es la direccin del contenedor
row: se alinean en filas.
row-reverse: en filas, pero con el orden inverso.
column: se alinean en columnas.
column-reverse: en columnas, pero con el orden inverso.
flex-wrap: controla si tiene una sola lnea o mltiples lneas
nowrap: El contenedor consta de una sola lnea.
wrap: El contenedor tiene mltiples lneas.
wrap-reverse: El contenedor tiene mltiples lneas en orden inverso.

Elementos
Order: 1; Encima de todo, por defecto son order:0;
Flex: 1; Ancho que ocupa
Esta propiedad se puede volver ms compleja, porque puede tener tres parmetros:
flex-grow, flex-shrink y flex-basis.

flex-grow: Especifica el factor de crecimiento, es decir, cuanto crecer el

elemento en relacin a los dems cuando hay espacio disponible del contenedor a
ocupar. Por defecto es 0, que es el valor que dimos en el ejemplo anterior a los
tres elementos.

flex-shrink: Determina el factor de reduccin, es decir, cuanto decrecer el

elemento en relacin a los dems cuando hay espacio negativo en el contenedor
(el contenedor es ms pequeo de los anchos combinados de los elementos que
hay en su interior). Por defecto es 1.

flex-basis: Toma el mismo valor que la propiedad width y establece el tamao

inicial del elemento antes de distribuir el espacio libre de acuerdo con los ratios de
flex-grow o flex-shrink. Cuando se omite, su valor es main-size (anteriormente,
auto).

Flex: 3 1 20%;

Alineacin
Podemos alinear los elementos flexibles en el Eje principal con:
justify-content: flex-start; | flex-end | center | space-between | space-around
y en el Eje transversal con :
align-items : flex-start; | flex-end | center | baseline; | stretch
y align-self: auto | flex-start | flex-end | center | baseline | stretch

COUNTER-RESET:
COUNTER-INCREMENT:

BOX-SIZING: border-box; Incluye el padding y border dentro del width

content-box; el padding y border tamao especificado

DISPLAY:TABLE;
display: table-row
Acta como un elemento fila, etiqueta TR.

display: table-cell
Este valor se lo colocaras a las etiquetas que deben trabajar como una celda de
tabla,
table-caption: se comportan como la etiqueta CAPTION
table-column: se comportan como la etiqueta COL
table-column-group: se comportan como la etiqueta COLGROUP
 table-footer-group: se comportan como la etiqueta TFOOT
table-header-group: comportamiento como la etiqueta THEAD
table-row-group: comportamiento como la etiqueta TBODY

GRADIENTE LINEAL
linear-gradient(posicin inicio, color inicial, color final)
El punto de comienzo puede ser reemplazado por un ngulo para declarar una
direccin especfica del gradiente:
background: linear-gradient(30deg, #FFFFFF, #006699);
Tambin podemos declarar los puntos de terminacin para cada color:
background: linear-gradient(top 30 deg, #FFFFFF 50%, #006699 90%);

GRADIENTE RADIAL
background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
center, top, bottom, left y right
(circle y ellipse)

OUTLINE
La propiedad outline es una vieja propiedad CSS que ha sido expandida en CSS3
para incluir un valor de desplazamiento
outline: 2px dashed #000099;
outline-offset: 15px;

BORDER IMAGE
border-image: url("diamonds.png") 29 stretch;

stretch: alarga al borde para ajustarla

repeat: repite la imagen cubrir el tamao del borde
round: repite la imagen ajustando tamao
space: repite la imagen dejando espacios para no cortarla

TRANSFORM (transformX,Y)
transform-origin: center bottomla parte fija, de donde gira
-moz-transform: scale(x, y);
-moz-transform: rotate(30deg); direccin de las agujas de un reloj
-moz-transform: skew(20deg, 20deg);
-moz-transform: translate(100px.100px);
transform-origin: center bottom

Aplicar varias, se ponen en lnea sin coma

TRANSITION
-moz-transition: -moz-transform 1s ease-in-out 0.5s;
1. Propiedad transition-proprty:all
2. Tiempo transition-duration:
3. ease, linear, ease-in, ease-out o ease-in-out. transition-timing-function:
4. Retardo transition-delay:
Transicin para todas las propiedades, se pone la palabra clave all debe ser
especificada. Declarar varias propiedades a la vez listndolas separadas por coma.

CONTENT
Genera contenido de forma dinmica
Se aplica solamente a los pseudo-elementos :before y :after
Uno o ms de los siguientes valores: cadena de texto | URL | Contador | valor
de un atributo | open-quote | close-quote | no-open-quote | o-close-quote
Normal | none | inherit

ANIMATION
animation-name: Nombre de @keyframes.
animation-duration: Tiempo que la animacin consume en completar su ciclo.
animation-iteration-count: Nmero de veces que se repite. Infinite, 1.
animation-direction: Indica si la animacin debe retroceder hasta el fotograma de
inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
Normal | alternate.
animation-timing-function: Indica el ritmo de la animacin, es decir, como se
muestran los fotogramas de la animacin, estableciendo curvas de aceleracin.
ease: comienzo rpido, luego velocidad constante y final lento.
ease-in: al revs que ease.
ease-out: similar a ease con final a velocidad constante.
ease-in-out: comienzo lento y progresin a velocidad constante.
linear: progresin a velocidad constante.
step-start: salto de la situacin inicial a la final al comienzo.
step-end: salto de la situacin inicial a la final al final.
steps: (numeroDePasos, end)
cubic-bezier: (valor0a1, valor0a1, valor0a1, valor0a1)
inherit: (se heredan las caractersticas del elemento padre).
animation-fill-mode: Especifica qu valores tendrn las propiedades despus de
finalizar la animacin
none: el elemento comenzar y quedar en el estado previo a la animacin.
forwards: el elemento quedar en el estado final de la animacin.
backwards: El elemento se pondr en el estado indicado para el comienzo de la
animacin inmediatamente y esperar en ese estado hasta que se cumpla el
tiempo indicado en animation-delay. Una vez se cumpla ese tiempo la animacin
continuar la ejecucin desde ese estado inicial.
both: Combinacin de las dos opciones anteriores.
animation-delay: Tiempo de retardo entre el momento en que el elemento se
carga y el comienzo de la secuencia de la animacin. segundos o milisegundos.
animation-play-state: Permite pausar y reanudar la secuencia de la animacin
running: la animacin est en ejecucin
paused: la animacin est en pausa

DEFINIR KEYFRAME
@-webkit-keyframes nombre-de-la-animacion {
0% { opacity: 0; }
20% { opacity: 1; -webkit-transform:translateX(150px) }
63% { opacity: 0; -webkit-transform:translateY(150px) }
...Tantos como queramos...
100% { opacity: 1; }

@-webkit-keyframes nombre-de-la-animacion {
from { -webkit-transform:translateX(150px); }
to { -webkit-transform:translateY(150px); }
}

EFECTOS FOTOGRFICOS
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Apply multiple filters */

filter: contrast(175%) brightness(3%);

---------------------------//-------------------

outline-color: color | :invert

outline-style: none | hidden | dotted | dashed | solid | doubl | groove | ridge |
inset | outset
outline-width
cue:cue-after | cue-before
direction
Unicode-bidi
font-size-adjust: 0.58;
Se han aadido nuevas propiedades que nos permiten crear columnas
directamente a
partir de un texto, estas son:
column-count: Define el nmero de columnas en el que se va a dividir el texto. El
texto ser dividido de la mejor forma posible para que ocupe todo el espacio.
column-width: Define el ancho de la columna (en unidades CSS).
column-gap: Define el espacio entre las columnas (en unidades CSS).
column-rule: Mediante esta propiedad podemos aadir una lnea separadora
entre las
columnas, si no especificamos esta propiedad no se aadir ninguna lnea.
Debemos
de indicarle tres valores: ancho de la lnea (en unidades CSS), estilo de la lnea
(solid,
dotted, double, etc.) y color de la lnea.
Para dar un mayor soporte antepondremos los prefijos