Post on 12-Feb-2017
HTML
CSS
Unidades de Medidas
Patron:
elementoHMTL {propiedad: valor+Unidad_de_Medida; (sin
espacios)}
Unidades de Medida
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.
Unidades Relativas: px, ex, em y rem
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.
Unidades Relativas: px, ex, em y rem
Unidades Relativas: px, ex, em y rem
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; }
Unidades Relativas: px, ex, em y rem
in: (inches o pulgadas) 1in = 2.54cm cm: centímetros mm: milímetros pt: puntos 1pt = 0.35mm pc: picas 1pc = 12pt = 4.23mm
Unidades Absolutas: in, cm, mm, pt y pc
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; }
Unidades Absolutas: in, cm, mm, pt y pc
Nos permite eliminar scroll en los navegadores permitiendo un Responsive Web Desing Completo.
Recomendaciones: Contenedores -> tamaño en porcentajes Fuentes -> tamaño en em
Unidades Porcentuales
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;}
Unidades Porcentuales
CSS
Colores
RGB Decimal
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% );}
RGB Porcentual
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 CSSdiv{/*MAL: rgb( rojo, verde, azul );*/background: rgb( FF, A5, 51 );/*CORRECTO: #FFA551 */background: #FFA551;}
Código CSSbackground: #FFAA51;/*No puede simplificarse a #FA51 porque el ultimo par 51 no es de los mismos caracteres*/-background: #FFAA55;/*Puede simplificarse a #FA5*/}
RGB Hexadecimal
HSL
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%);
HSL
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);
RGBA y HSLA
CSS
Pseudo-Elementos
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.
before y after
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;}
before y after
Código HTML
<html><body><div> <p> esto es un ejemplo<p></div></body></html>
Código CSS
p{Background: #088A4BText-align: left;Position: relative;}
P:first-letter{Font-size: 5em;}
First-letter
Código CSS
p{Background: #088A4BText-align: left;Position: relative;}
P:first-letter{Font-size: 5em;}
P:first-line{Color: blue;Font-size: 5em;}
First-line
CSS
Pseudo-Clases
Código CSS
A:link{Color: red;}
A:visited{Color: orange;}
De Enlaces ( link y visited )
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;}
Dinámicas
El orden correcto para combinar estas pseudo-clases con las propias de los enlaces es el siguiente: link, visited, hover y, por útlimo, active.
Dinámicas
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
Otras
¿Preguntas?
Emmanuel OrtizConsultor Sr.emmanueltiz@gmail.comemail / gtalkemmanueltizSkype