Introducción
En este articulo vamos a aprender a utilizar el lenguaje de estilos CSS.
¿Qué es CSS?
- Cascading Style Sheets.
- Hojas de estilo en cascada.
- Sirve para dar forma, estilo y colores a una página web.
¿Qué significa que una web es responsive?
El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos. Desde ordenadores de escritorio a tablets y móviles.
Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenador, tablet, smartphone… por lo que, cada vez más, nos surge la necesidad de que nuestra web se adapte a los diferentes tamaños de los mismos.
¿Qué son las media queries?
Media queries o consultas sobre el medio permiten colocar diferentes propiedades en función de:
- Si el medio es una pantalla o una impresora
- El tamaño de la pantalla
- La resolución de la pantalla
- La orientación de la pantalla
- Etc.
Puedes visitar https://www.w3schools.com/css/css3_mediaqueries.asp para saber más.
¿Qué significa indentar?
Se llama indentación de código al hecho de utilizar sangrado (mover ligeramente hacia la derecha) en las líneas de código para facilitar la lectura, e indicar visualmente si nos encontramos en el interior de una función, bucle, condicional, etc…
Si quieres saber más puedes leer el artículo Indentación de código.
¿Existe la propiedad transparency?
transparency?No. Existe la opacity.
¿Cuál es el efecto ellipsis de CSS de la propiedad text-overflow?
ellipsis de CSS de la propiedad text-overflow?Cuando el texto no cabe, se añaden puntos suspensivos.
Puedes ver el comportamiento de la propiedad text-overflow en este enlace.
¿Para qué sirve definir un @font-face en CSS?
@font-face en CSS?La regla @font-face permite descargar una fuente o tipografía de una página web, cargarla en el navegador y utilizarla en nuestras páginas aunque no esté instalada en el sistema. Todo ello de forma transparente al usuario, sin que deba realizar ninguna acción.
¿Qué son/hacen las funciones skewX() y skewY()?
skewX() y skewY()?Las funciones de deformación disponibles en CSS son las siguientes:
| Funciones | Significado |
|---|---|
| skewX(xdeg) | Establece un ángulo de ANGLE xdeg para una deformación 2D respecto al eje X. |
| skewY(ydeg) | Establece un ángulo de ANGLE ydeg para una deformación 2D respecto al eje Y. |
Puedes ver el comportamiento de esta propiedad en este enlace.
¿Qué ocurre si aplicamos el siguiente estilo transform: rotateX(90deg);?
transform: rotateX(90deg);?Puedes ver el comportamiento de esta propiedad en este enlace.
¿Qué ocurrirá aquí?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
<body>
<div>This is a div</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
<body>
<div>This is a div</div>
</body>
Que el ancho del div se modificará dependiendo de si el ratón está encima del mismo o no.
¿Qué hace el valor ease del animation-timing-function?
ease del animation-timing-function?Mira este ejemplo de W3Schools Elements with Different timing function Values