1. ¿Cuales son las 3 formas de aplicar estilos al HTML con CSS?
-Con el atributo style : Dentro de la etiqueta de HTML, agregando el atributo style
, para luego asignar a ese atributo las propiedades (estilos) que desees. Esta
forma de agregar estilos no es considerada una buena práctica. También se le conoce
como inclusión en línea.
<p style="color: red;">Este es un párrafo rojo</p>
-Dentro del <head> : Creando dentro del <head> del documento de HTML una etiqueta
<style> para luego agregar dentro de la etiqueta las reglas de código CSS. A esta
forma de aplicar estilos se le conoce como inclusión interna.
<style>
p {
color: red;
}
</style>
-Referenciando un archivo externo de CSS: Separando los estilos de CSS y HTML,
creando un archivo [Link] independiente del archivo [Link], para luego
referenciar el archivo CSS en el archivo HTML dentro del <head>.
<link rel="stylesheet" type="text/css" href="[Link]">
2. ¿Cómo se define la dirección en la que se muestran los elementos en un flexbox?
Flexbox es una de las formas en las que se puede configurar el cómo se van a
mostrar los elementos que están dentro de un contenedor de CSS.
Se define atribuyendo el valor flex a la propiedad display de CSS
Un contenedor flexbox siempre tiene una dirección en la que se muestran los
elementos que contiene. Esta dirección por defecto es horizontal (de izquierda a
derecha). La propiedad flex-direction permite configurar la dirección vertical y
horizontal en la que se quieren mostrar los elmentos del contenedor
3. ¿Cómo se selecciona un elemento por su clase para apliarle estilos CSS?
Para seleccionar un elemento de HTML por su clase, se debe agregar en el archivo
de HTML un atributo class al elemento de HTML que se desea seleccionar.
Se deben aplicar estilos al elemento HTML, utilizando como selector CSS la clase
que se le haya asignado al elemento. Para utilizar la clase como un selector, se le
agrega como prefijo al valor de la clase, un punto ( . ) .tu-calse
.tu-calse { color: red; }
4. Para seleccionar un elemento de HTML por su id, se debe agregar en el archivo de
HTML un atributo id al elemento de HTML que se desea seleccionar. Este valor no
debe repetirse para ningún otro id en el mismo documento.
Se deben aplicar estilos al elemento HTML, utilizando como selector CSS el id que
se le haya asignado al elemento. Para utilizar el id como un selector, se le agrega
como prefijo al valor de la clase, un hash ( # ) #tu-id.
#tu-id{ text-align= center; }
5. ¿Qué etiqueta de HTML se usa para crear una tabla?
<table></table>
6. ¿Qué propiedad de CSS permite definir los borde de una tabla?
propiedad border
7. ¿Para qué se utilizan los formularios HTML?
Normalmente para capturar información de los usuarios que interactúan con una
página o aplicación web, y enviar esta información a un servidor. En algunas
ocaciones, se pueden utilizar para solicitar información a un servidor.
8. ¿Cuále sos las etiquetas HTML principales para crear campos de un formulario?
Existen diversas etiquetas para crear campos de un formulario HTML
Dependiendo del tipo de campo que se quiera crear, se pueden usar etiquetas como:
<input>, <textarea>, o <select>
9. ¿Qué atributo es requerido para todos los elementos input de un formulario?
type
<boddy>
<form action="/submit" method="POST">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username" required>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Enviar</button>
</form>
</boddy>
10. ¿Qué etiqueta de HTML crea una lista de selección única?
select
11. ¿Qué etiqueta de HTML crea un campo multilínea de texto?
textarea
12. Explica con tus propias palabras qué es y para qué sirve el modelo de caja
El modelo de caja CSS es un conjunto de reglas que definen como se muestran los
elementos HTML en una página.
Cada elemento HTML representa una caja que tiene un margen, borde, área de relleno
(padding), y contenido.
13. ¿Cuáles son los 4 elementos del modelo de caja
- Contenido de la caja: es el área donde se muestra el contenido. Esta área puede
cambiarse modificando las propiuedades CSS width y height.
- Área de relleno padding: es un área en blanco que existe entre el contenido y el
borde de la caja. Se puede modificar su tamaño cambiando el conjunto de propiedades
de padding del elemento HTML.
- Borde de la caja: Es el área que encierra las dos áreas anteriores, el contenido
y el padding. Se puede modificar su tamaño alterando el conjunto de propiedades
border del elemento HTML.
- Margen de la caja: Este es límite exterior que agrupa el área del contenido,
padding, y borde, y los separa de otros elementos HTML que se encuentren en el
documento. Se puede modificar su tamaño utilizando el conjunto de propiedades
margin del elemento.
14. ¿Cuáles son las propiedades CSS que se utilizan para definir el fondo de un
elemento HTML?
* background-color: define el color de fondo.
* background-image: define la imagen de fondo.
* background-position: define la ubicación de la imagen de fondo.
* background-repeat: define si se repite la imagen de fondo horizontal y
verticalmente.
* background-attachment: define si la imagen se mantiene fija o se desplaza con la
página.
15. ¿Qué propiedad de CSS sirve para definir en una sola línea varias propiedades
del fondo de un elemento HTML?
Puedes especificar varias propiedades de fondo en una línea con la propiedad CSS
background. Por ejemplo: background: #00ff00 url("[Link]") no-repeat fixed
center;
16. Explica con tus propias palabras para qué sirve la propiedad CSS position
sirve para definir el posicionamiento de un elemento HTML en el documento.
Position: relative; en .contenedor: Esto establece un contexto de referencia para
cualquier elemento dentro de él que tenga una posición absoluta.
Position: absolute; en .caja: La caja se posiciona en relación con su contenedor
más cercano con position: relative. Aquí, la caja está posicionada 50 píxeles desde
la parte superior (top: 50px) y 50 píxeles desde la izquierda (left: 50px).
17. ¿Cuáles son los posibles valores que puede recibir la propiedad CSS position y
que posicion define cada uno?
static: el valor por defecto. La utilización de las propiedades adicionales no
tendrán efectos sobre este elemento.
relative: relativo a su ubicación original.
fixed: fijo en la ventana del navegador.
absolute: relativa el ancestro más cercano con posición relative o a la ventana del
navegador.
18. ¿Para qué se utiliza la propiedad CSS box-shadow?
box-shadow se utiliza para agregarle sombra a la caja de un elemento HTML.
19. ¿Para qué se utiliza la propiedad CSS text-shadow?
text-shadow se utiliza para agregarle sombra al texto (contenido) de un elemento
HTML
20. ¿Explica cómo se aplica una transición de colores a un elemento HTML utilizando
CSS?
Se aplica atribuyendo la función linear-gradient o la función radial-gradient como
valor de la propiedad CSS background o [Link]:
.gradiente { background: linear-gradient(to right, blue, red, yellow, green); }
.gradiente { background: radial-gradient(circle at 20px 20px, red, yellow); }
21. Explica qué son y para qué sirven los media queries
Los media queries son la herramienta que nos brinda CSS para adaptar los estilos de
una página web según el dispositivo en el que se esté mostrando.
Para aplicar media queries a una página web debes usar la regla de CSS @media. Ésta
es una declaración de CSS en la que se define cómo debe reaccionar el CSS de la
página según el dispositivo.
22. ¿Qué significa que una página es adaptatva o "responsive", y para que sirve el
diseño adaptativo?
Que la págia ha sido diseñada para que los elementos y estilos que se muestran en
la interfaz de usuario se adapten según el dispositivo en el que se están
mostrando.
El diseño adaptativo sirve principalmente para brindar una mejor experiencia a los
usuarios.
23. ¿Qué significa un diseño ques es "mobile first"?
Que los valores por defecto en tu archivo CSS son los adecuados para los
dispositivos móviles, en otras palabras, los valores que no tienen la regla de CSS
@media están definidos para dispositivos móviles, mientras que los que si tienen
esta regla, están definidos para otros dispositivos con pantallas más grandes