Curso HTML 5 & jQuery - Leccion 7

Patron:
elementoHMTL {
propiedad: valor+Unidad_de_Medida; (sin
espacios)
}

 Las medidas relativas tienen que tener una
referencia como punto de partida para calcular el
tamaño final.
 Por eso en este caso la medida del tamaño de
fuente del body se establece a 12px.
 Después cualquier medida relativa se recalcula en
función a esa cantidad.
 Además hay que tener presente la herencia, en
estos casos antes de establecer la medida
relativa, lo primero que se hace es calcular la
cantidad final del tamaño que se tiene por
herencia, y a dicha cantidad se le aplica la
cantidad relativa.

 La medida em es en función de la anchura que
tenga la letra "M" (m mayúscula) según la fuente
que se esté usando.
 La medida ex es en función de la altura que
tenga la letra "x" (x minúscula) según la fuente
que se esté usando.
 La medida px también es relativa, ya que
depende de la resolución del dispositivo desde el
que se visualice. Por ello cuando se ve en un
dispositivo de alta resolución, la pixelación se
reescala y cada píxel original pasa a ser un
conjunto de pixeles en el dispositivo de alta
resolución.

Código HTML
<p>Parrafo Normal</p>
<p class="em">Parrafo EM</p>
<p class="ex">Parrafo EX</p>
<p class="px">Parrafo PX</p>
<div>
<p>Ejemplo em</p>
<p class="rem">Ejemplo rem</p>
</div>
Código CSS
body{ font-size: 12px }
.em{ font-size: 2em; }
.ex{ font-size: 2ex; }
.px{ font-size: 12px; }
div{ font-size: 2em; }
div p{ font-size: 1em; }
div p.rem{ font-size: 1rem; }

 in: (inches o pulgadas) 1in = 2.54cm
 cm: centímetros
 mm: milímetros
 pt: puntos 1pt = 0.35mm
 pc: picas 1pc = 12pt = 4.23mm

Código HTML
<p>Parrafo Normal</p>
<p class="em">Parrafo EM</p>
<p class="ex">Parrafo EX</p>
<p class="px">Parrafo PX</p>
<div>
<p>Ejemplo em</p>
<p class="rem">Ejemplo rem</p>
</div>
Código CSS
.in{ font-size: 0.5in; }
.cm{ font-size: 1cm; }
.mm{ font-size: 5mm; }
.pt{ font-size: 20pt; }
.pc{ font-size: 1pc; }

 Nos permite eliminar scroll en los
navegadores permitiendo un Responsive Web
Desing Completo.
 Recomendaciones:
 Contenedores -> tamaño en porcentajes
 Fuentes -> tamaño en em

Código HTML
<html>
<head></head>
<body>
<div>
</div>
</body>
</html>
Código CSS
Body{
Backgroun: khaki;
Margin-left: 30px;
Font-size: 12px;
}
Div{
Width: 60%;
/*Margin-left: 20%;*/
Height: 200px;
Background: darkred;
}

El formato rgb se basa en usar tres canales de luz de colores rojo, verde y azul (Red, Green, Blue -> rgb).
La cantidad mezclada de dichos canales luminosos provocan el color resultante. Los valores decimales
deben de ir comprendidos entre el 0 y el 255.
Código CSS
div{
/*rgb( rojo, verde, azul );*/
background: rgb( 140, 82, 13 );
}
Página recomendada para obtener los valores de los colores: http://html-color-codes.info/codigos-de-colores-hexadecimales/

 En rgb porcentual los valores de cada canal no se
expresan de forma decimal sino con porcentajes.
Dicho porcentaje se aplicará al valor 255 que es
el máximo posible. De forma que si un canal
tiene el valor 100% es como si decimalmente
hubiéramos puesto 255. El 50% equivaldría a
127.
Código CSS
div{
/*rgb( rojo, verde, azul );*/
background: rgb( 40%, 25%, 67% );
}

 En rgb hexadecimal el valor del color no se expresa dentro de los paréntesis de "rgb"
separando con comas cada canal de color, sino que todos los valores se escriben juntos
precedidos del símbolo "#". En caso de que los tres pares sea compuestos por el mismo
caracter, pueden simplicarse. Pero solo cuando LOS TRES pares cumplen dicha condición.
Código CSS
div{
/*MAL: rgb( rojo, verde, azul );*/
background: rgb( FF, A5, 51 );
/*CORRECTO: #FFA551 */
background: #FFA551;
}
Código CSS
background: #FFAA51;
/*No puede simplificarse a #FA51 porque el ultimo par 51 no es de los mismos caracteres*/
-
background: #FFAA55;
/*Puede simplificarse a #FA5*/
}

 En hsl (Hue, Saturation, Lightness) se establecen 3
parametros:
◦ Tono (cantidad 0-359): Indica el tono del color al que se le
asignará una saturación y brillo para obtener el color final
deseado. Dicha cantidad se aplicará en el cículo cromático de la
imagen indicando los grados de rotación en dicho círculo hacía
donde se obtendrá el color
◦ Saturación (Porcentaje): El tono se apreciará en su aspecto original
con una saturación del 100%, si se le baja a 0% se vuelve gris.
◦ Brillo (Porcentaje): El tono se apreciará en su aspecto original con
un brillo del 50%, si se sube al 100% se vuelve blanco y hacia el 0%
se vuelve negro.
Código CSS
background: hsl( tono, saturacion, brillo);
background: hsl ( 0, 100%, 50%);

 El cuarto posible canal alpha permite dar
transparencia a nuestro color con respecto a lo
que haya por detrás de él. Los valores van
comprendidos entre el 0 y 1. El 1 le da más
dureza a nuestro color por lo que no
transparentaría nada, mientras que el 0 le
quitaría toda la fuerza al color y lo volvería
totalmente transparente.
Código CSS
background: rgba ( 0, 255, 0, 0.2);
background: hsla ( 240, 100%, 50%, 0.8);

 Los pseudo-elementos se referencias con ":" y su
nombre. No son parte del html, sino del css y en el
caso de before y after no es obligado que vayan
exactamente antes o después del elemento.
 Su posicionamiento, así como el resto de
propiedades puede alterarse. Sí es obligado que
tengan un content.

Patron:
elementoHMTL:pseudo-elemento {
propiedad: valor;
}
Código HTML
<html>
<body>
<div> <p> esto es un ejemplo<p>
</div>
</body>
</html>
Código CSS
P:after{
Content: ‘-’;
Color: black;
Position: absolute;
}

Código HTML
<html>
<body>
<div> <p> esto es un ejemplo<p>
</div>
</body>
</html>
Código CSS
p{
Background: #088A4B
Text-align: left;
Position: relative;
}
P:first-letter{
Font-size: 5em;
}

Código CSS
p{
Background: #088A4B
Text-align: left;
Position: relative;
}
P:first-letter{
Font-size: 5em;
}
P:first-line{
Color: blue;
Font-size: 5em;
}

Código CSS
A:link{
Color: red;
}
A:visited{
Color: orange;
}

Código CSS
A:link{
Color: red;
}
A:visited{
Color: orange;
}
P:hover{
Transform: scale(1.2);
Color: red;
Text-decoration: unline;
}
Span:active{
Color: green;
}
Input:focus{
background: #B6BFE4;
Font-size: 2m;
}

 El orden correcto para combinar estas
pseudo-clases con las propias de los enlaces
es el siguiente: link, visited, hover y, por
útlimo, active.

 Las siguientes pseudo-clases nos sirven para hacer referencia a
elementos concretos del html sin necesidad de marcarlos con un
id, solo indicando la posición que ocupan dentro del sitio web:
◦ :nth-child(N)
◦ :nth-last-child(N)
◦ :nth-of-type(N)
◦ :nth-last-of-type(N)
◦ :first-of-type
◦ :last-of-type
◦ :only-of-type
◦ :empty
◦ :not(S)
◦ :last-child
◦ :only-child
◦ :root
◦ :enable
◦ :disable
◦ :checked

Emmanuel Ortiz
Consultor Sr.
emmanueltiz@gmail.com
email / gtalk
emmanueltiz
Skype

Curso HTML 5 & jQuery - Leccion 7

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Curso HTML 5 & jQuery - Leccion 7

Más de Emmanuel Ortiz Gutierrez

Curso HTML 5 & jQuery - Leccion 7