spabloramirez
9/28/2014 - 5:24 PM
css
/*Inline Styles*/
<p style="color: red; background: yellow;">Look out!
This text is alarmingly presented!</p>
/*Embedded Style Sheets*/
<head>
<style type="text/css">
h1 {color: purple;}
p {font-size: smaller; color: gray;}
</style>
</head>
/*@import directive*/
<style type="text/css">
@import url(site.css);
</style>
/*link element*/
<head>
<title>A Document</title>
<link rel="stylesheet" type="text/css" href="basic.css" media="all">
<link rel="stylesheet" type="text/css" href="web.css" media="screen">
<link rel="stylesheet" type="text/css" href="paper.css" media="print">
</head>
/*Selector universal*/
* {
margin: 0;
padding: 0;
}
/*Selector de tipo o etiqueta*/
h1 {
color: red;
}
/*encadenar selectores*/
h1, h2, h3 {
color: #8A8E27;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
/*Selector descendente*/
p span { color: red; }/*span ->dentro de un parrafo*/
p * a { color: red; }/*enlace ->dentro de cualquier elemento ->dentro de un parra*/
/*Selector de clase*/
<p class="destacado">
.destacado { color: red; }
p.destacado { color: red }
<p class="especial destacado error">Párrafo de texto...</p>
.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold;
/*Selectores de ID*/
<p id="destacado">Segundo párrafo</p>
#destacado { color: red; }
/*Combinación de selectores básicos*/
.aviso .especial { ... }
div.aviso span.especial { ... }
/*Selector de hijos directo*/
p > span { color: blue; }
/*Selector adyacente: hermanos que aparecen uno seguido de otro*/
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
h1 + h2 { color: red }
/*Selector de atributos*/
a[class] { color: blue; }/*todos los enlaces que tengan clase*/
a[class="externo"] { color: blue; }
a[href="http://www.ejemplo.com"] { color: blue; }/*todos los enlaces que apunten a una pagina*/
a[class~="externo"] { color: blue; }/*enlaces que no contengan clase="externo"*/
[class|="es"] { color : red }/*clase empieza por es*/
/*///////////////////////IMPORTANTE Colisiones de estilos///////////////*/
Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !important).
Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.
Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.
/*Unidades absolutas*/
in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.
cm, centímetros.
mm, milímetros.
pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.
/*Unidades relativas*/
em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra del elemento.
1em equivale al tamaño de la letra en ese momento 16px por defecto.
(si la letra tiene 10px 2em=20px)
ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de letra del elemento.
px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se visualiza la página HTML.
/*COLORES*/
/*valores entre 0 y 255*/
p { color: rgb(0, 0, 0); }/*negro*/
p { color: rgb(255, 255, 255); }/*blanco*/
/*porcentajes*/
p { color: rgb(27%, 38%, 69%); }
/*rgb hexadecimal*/
p { color: #4762B0; }
/*MODELOS DE CAJAS*/
Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
Borde (border): línea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
/*MARGIN*/
Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los que se han fusionado.
De la misma forma, si un elemento está contenido dentro de otro elemento, sus márgenes verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado:
/*PROPIEDADES*/
inherit: hereda valores del padre
/*PROPIEDADES SHORTHAND*/
margin:todos;
margin:top botton,left right;
margin:top,left right,botton;
margin:top,right,botton,left;
/*BORDER*/
border: nome;
border:width style color;
div {
border-top: 1px solid #369;
}
border-width
border-color
border-style
/*POSICIONEAMIENTO*/
elementos de bloque: siempre empiezan en una nueva linea
address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr,
isindex, menu, noframes, noscript, ol, p, pre, table, ul.
dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.
Elementos en linea: solo ocupan el espacio necesario para mostrar sus contenidos.
a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font,
i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
Los elementos de bloque no pueden insertarse dentro de elementos en línea y tan sólo pueden aparecer dentro de otros elementos de bloque.
/*ESTATICO*/
por defecto
div{
border: 1px solid black;
margin:0.5em;
text-align:center;
}
div#padre{
width:100px;
}
/*RELATIVO*/
posicionamiento normal y despues desplazarla respecto de su posicion original, manteniendo su espacio original
ocupado
div#bloque2{
position:relative;
top:5px;
}
/*ABSOLUTO*/
el resto de elementos ignoran la nueva posicion del elemento, dejando disponible esta posicion
algun elemento padre debe ser estatic|relative|float, sino se toma como referencia la pagina.
div#bloque1{
position:absolute;
top:15px;
}
/*FIJO*/
independiente del resto de elementos,fijo aunque se haga scroll
/*FLOTANTEN*/
flotan a la izquierda o derecha
float: left|right
(cuando lo elementos flotan no ocupan lugar por eso hay que añadir un div debajo con la propiedad clear:both)
div#paginacion {
border: 1px solid #CCC;
background-color: #E0E0E0;
padding: .5em;
}
.derecha {
float: right;
}
.izquierda {
float: left;
}
div.clear {
clear: both;
}
<div id="paginacion">
<span class="izquierda">«Anterior</span>
<span class="derecha">Siguiente »</span>
<div class="clear"><div>
</div>
/*VISIVILIDAD*/
display:none (oculta elemento pero sigue ocupando lugar)
visibility:hidden(elimina elemento de la pagina)
position:static|relative|absolute|fixed|inherit
float