curso html 5 & jquery - leccion 7
TRANSCRIPT
![Page 1: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/1.jpg)
HTML
![Page 2: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/2.jpg)
CSS
Unidades de Medidas
![Page 3: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/3.jpg)
Patron:
elementoHMTL {propiedad: valor+Unidad_de_Medida; (sin
espacios)}
Unidades de Medida
![Page 4: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/4.jpg)
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
![Page 5: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/5.jpg)
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
![Page 6: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/6.jpg)
Unidades Relativas: px, ex, em y rem
![Page 7: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/7.jpg)
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
![Page 8: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/8.jpg)
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
![Page 9: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/9.jpg)
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
![Page 10: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/10.jpg)
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
![Page 11: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/11.jpg)
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
![Page 12: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/12.jpg)
CSS
Colores
![Page 13: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/13.jpg)
![Page 14: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/14.jpg)
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/
![Page 15: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/15.jpg)
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
![Page 16: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/16.jpg)
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
![Page 17: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/17.jpg)
HSL
![Page 18: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/18.jpg)
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
![Page 19: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/19.jpg)
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
![Page 20: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/20.jpg)
CSS
Pseudo-Elementos
![Page 21: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/21.jpg)
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
![Page 22: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/22.jpg)
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
![Page 23: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/23.jpg)
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
![Page 24: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/24.jpg)
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
![Page 25: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/25.jpg)
CSS
Pseudo-Clases
![Page 26: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/26.jpg)
Código CSS
A:link{Color: red;}
A:visited{Color: orange;}
De Enlaces ( link y visited )
![Page 27: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/27.jpg)
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
![Page 28: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/28.jpg)
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
![Page 29: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/29.jpg)
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
![Page 30: Curso HTML 5 & jQuery - Leccion 7](https://reader038.vdocumento.com/reader038/viewer/2022102916/58a082891a28ab19098b720d/html5/thumbnails/30.jpg)
¿Preguntas?