CURSO de CSS 2021 Rapido y Facil # 14 | 💻 ENLACES II
Summary
TLDREste vídeo tutorial de CSS aborda el tema de las listas, esencial para crear menús en páginas web. Se explica cómo utilizar listas ordenadas y desordenadas, personalizar sus estilos con CSS, incluir iconos y enlaces. Se muestra cómo construir un menú vertical con estilos visuales atractivos, utilizando propiedades como 'list-style', 'border' y 'display'. Además, se ofrece una guía para descargar iconos gratuitos y aplicarlos en los elementos de la lista.
Takeaways
- 😀 El curso de CSS aborda el tema de las listas, un elemento importante para crear menús en HTML.
- 🎨 Se eliminan los elementos previamente creados, manteniendo solo el body, propiedades y estilos CSS.
- 📝 Se comienza con listas desordenadas utilizando la etiqueta `ul` y elementos `li` para representar segmentos de un menú.
- 🖌️ Se personalizan los estilos de las listas utilizando CSS, incluyendo el tamaño de fuente y márgenes.
- 🔄 Se muestra cómo cambiar el estilo de los marcadores de listas desordenadas utilizando `list-style-type` y `list-style-image`.
- 🌐 Se sugiere descargar iconos gratuitos de la web para personalizar los marcadores de listas.
- 📑 Se trabaja con listas ordenadas utilizando la etiqueta `ol` y se muestra cómo cambiar el estilo de los números.
- 🔢 Se exploran las opciones de estilo para listas ordenadas, incluyendo números romanos y letras en mayúsculas o minúsculas.
- 🛠️ Se crea un menú vertical utilizando listas desordenadas y se personalizan los elementos `li` con bordes y espaciado.
- 🌈 Se finaliza el menú con un efecto de color al pasar el mouse y se muestra cómo enlazar los elementos del menú a diferentes secciones.
Q & A
¿Qué tipo de elementos se discuten en el vídeo para crear menús?
-Se discuten dos tipos de elementos: listas ordenadas y listas desordenadas.
¿Cómo se inicia el proceso de creación de un menú en el vídeo?
-Se inicia en el archivo index.html, donde se usan elementos desordenados para crear el menú.
¿Qué elemento HTML se usa para crear listas desordenadas?
-Se usa la etiqueta `<ul>` para crear listas desordenadas.
¿Cuál es la función de la etiqueta `<li>` en el contexto del vídeo?
-La etiqueta `<li>` se usa para representar los elementos individuales dentro de una lista desordenada.
¿Cómo se pueden personalizar los estilos de las listas desordenadas en CSS?
-Se pueden personalizar los estilos de las listas desordenadas usando propiedades como `font-size`, `list-style`, `margin` y `padding`.
¿Qué propiedad CSS se usa para eliminar los marcadores predeterminados de las listas?
-Se usa la propiedad `list-style: none;` para eliminar los marcadores predeterminados de las listas.
¿Cómo se pueden cambiar los iconos predeterminados de las listas desordenadas?
-Se puede usar la propiedad `list-style-image` y asignarle una URL de la imagen deseada.
¿Qué recursos externos se mencionan en el vídeo para descargar iconos?
-Se menciona una página web donde se pueden descargar iconos gratuitos.
¿Cómo se pueden aplicar estilos a las listas ordenadas en CSS?
-Se pueden aplicar estilos a las listas ordenadas usando la propiedad `list-style-type` y asignándole valores como `none`, `decimal`, `upper-roman`, `lower-roman`, `upper-alpha` o `lower-alpha`.
¿Qué es un menú vertical y cómo se construye según el vídeo?
-Un menú vertical es una lista desordenada donde los elementos se presentan en una secuencia vertical. Se construye usando `<ul>` y `<li>` con enlaces dentro de cada elemento `<li>`.
¿Cómo se puede hacer un menú horizontal en CSS?
-Para hacer un menú horizontal, se usa CSS para establecer el ancho y el alineado de los elementos `<li>`, y se pueden usar propiedades como `display: inline-block;` para que los elementos se muestren en línea.
Outlines
📝 Introducción a las Listas en HTML y CSS
El primer párrafo aborda el tema de las listas en el contexto de un curso de CSS. Se menciona la importancia de las listas para la creación de menús en la web. Se inicia con la modificación de un archivo HTML, eliminando todo excepto el body y se enfoca en el uso de listas desordenadas y ordenadas. Se explica el proceso de crear elementos de lista desordenada y se muestra cómo aplicar estilos CSS para modificar la presentación de estos elementos, incluyendo la alteración de la fuente y el tamaño, y la eliminación de los estilos por defecto utilizando 'list-style: none;'.
🖼️ Personalización de Listas con Iconos
El segundo párrafo se centra en la personalización de listas utilizando iconos. Se discute cómo descargar iconos gratuitos de la web y cómo aplicarlos a los elementos de lista desordenada utilizando la propiedad 'list-style-image'. Se ofrece una sugerencia de página web para descargar iconos y se explica el proceso de selección y aplicación de estos iconos en el proyecto. Además, se exploran las opciones para cambiar la forma de los marcadores de lista y se presentan ejemplos de cómo modificar los estilos de las listas ordenadas utilizando números romanos o letras.
🔲 Creación de un Menú Vertical con Listas
El tercer párrafo describe el proceso de construir un menú vertical utilizando listas. Se detalla cómo trabajar con elementos de lista desordenada y cómo incorporar enlaces para que el menú sea interactuable. Se aborda la adición de estilos CSS para mejorar la apariencia del menú, incluyendo la modificación del color de fondo, el ancho y el margen, y la eliminación del espacio interno con 'padding'. Se enfatiza la importancia de la centrado y la visualización de los elementos de lista como secciones independientes, utilizando 'border' para separarlos visualmente.
🌐 Finalización del Menú y Enlaces en HTML
El cuarto y último párrafo concluye la creación del menú y explica cómo hacer que los elementos del menú sean interactivos, permitiendo la navegación a diferentes secciones del sitio web. Se trabaja en la personalización del aspecto de los elementos de enlace y se ofrecen detalles sobre cómo cambiar la fuente y el tamaño del texto. Se muestra cómo aplicar estilos para mejorar la apariencia de los elementos al pasar el mouse sobre ellos, cambiando el color de fondo y el color del texto. Finalmente, se menciona la posibilidad de vincular los elementos del menú a diferentes páginas HTML y se cierra el vídeo con una expectativa hacia el siguiente episodio del curso de CSS.
Mindmap
Keywords
💡Listas
💡Etiquetas
💡CSS
💡Menú
💡List Style
💡Iconos
💡Personalización
💡Enlaces
💡Efectos Visuales
💡Diseño Web
Highlights
Inicio del curso de CSS sobre listas y cómo son importantes para crear menús.
Eliminación de contenido del episodio anterior, manteniendo solo el body, propiedades y estilos CSS.
Introducción a las listas desordenadas y su estructura básica en HTML.
Uso de atajos de teclado para crear elementos HTML y aplicar estilos CSS.
Personalización de listas desordenadas con font-size y otros estilos CSS.
Cambio de estilos de listas desordenadas utilizando la propiedad 'list-style-type'.
Eliminación de los marcadores predeterminados en listas con 'list-style: none;'.
Adición de imágenes como marcadores en listas utilizando 'list-style-image'.
Descarga y uso de iconos gratuitos de la web para personalizar listas.
Selección y uso de iconos específicos para elementos de listas desordenadas.
Introducción a las listas ordenadas y su configuración básica en HTML.
Cambio de estilo numérico en listas ordenadas con 'list-style-type'.
Uso de números romanos y letras en listas ordenadas.
Creación de un menú vertical utilizando listas desordenadas y enlaces.
Estilización de un menú con fondo, ancho, márgenes y alineación de texto.
Adición de bordes a los elementos de listas para区分各个部分.
Personalización de los enlaces del menú con color, fuente y padding.
Creación de un efecto de hover en los elementos del menú para mejorar la interacción.
Conclusión del curso y expectativas para el próximo episodio.
Transcripts
[Música]
qué tal amigos ya estamos de regreso con
nuestro curso de ss ss 8 clayon y hoy
vamos a ver el tema de las listas
bien como de costumbre vamos a eliminar
todo lo que hicimos en nuestro anterior
episodio
ok simplemente nos quedamos con el body
con la propiedad key controles en html
control s en listas en estilos perdón
punto css y bien hoy vamos a ver el tema
de las listas un tema sumamente
importante porque gracias a este tipo de
elementos vamos a poder crear un menú
tal como se tiene que hacer ok y bien
para hacer un ejemplo práctico y
recordad eso de las listas vamos a
comenzar primeramente en index.html
ok acá yo voy a traer los elementos
porque tenemos dos tipos de listas uno
de tipo ordenada y otro desordenada
vamos a comenzar con los elementos
desordenados y para hacerlo yo necesito
comenzar con un elemento o perdón con
una etiqueta de nombre web y dentro de
esta etiqueta huelén debo depositar los
segmentos o los bloques que van a
representar como segmentos dentro de un
menú o en este caso dentro de una lista
y para hacer eso necesito la etiqueta de
ley acá simplemente voy a darle del
nombre uno para poder identificarlo yo
me vengo a este punto y vamos a usar
este atajo de comando para no hacerlo
muy largo este vídeo aunque ya que
simplemente voy a cambiarlo por dos y
abajo puede hacerlo de la misma manera
voy a cambiarlo por tres presiono
controles y algo si podemos verlo pero
para verlo mejor me voy a venir a
estilos css lo que yo voy a hacer es
llamar a los elementos desordenados
weller
donde yo voy a trabajar un poco con el
font sites que sean de 40 píxeles o kate
punto y coma controles en más que todo
para poder visualizarlo mejor
ok entonces ya podemos ver los elementos
de tipo desordenado son de tipo
desordenado ya que no tienen un orden
específico ok
estos elementos que ves acá no lo
podemos andar un orden ok entonces para
verlo ordenadamente me vengo acá y lo
que necesito trabajar es
y prácticamente va a ser lo mismo voy a
copiar todo esto y lo voy a pegar acá
presión o controles en acá precisamente
ya lo podemos visualizar ok pero acá no
estamos aplicando también ningún efecto
porque simplemente lo estamos aplicando
o el ok yo podría hacer esto
simplemente cambiaría esto por un ajo y
si presiona controles si aplicamos ok
pero también tú podrías hacer lo
siguiente acá como van a tener la misma
propiedad
simplemente coma y escribimos la
etiqueta ojo es conveniente que siempre
sean del mismo estilo en este caso
listas que de este tipo de elementos o
tipo de etiquetas controles y ahí está
se aplicó a ambos para verlo mejor acá
yo voy a poner un margen de 40 píxeles
punto y coma controles
ahí está ya lo podemos ver mejor de
hecho podría aumentarlo a 60 controles
en perfecto bien hoy lo que vamos a
hacer es trabajar con algunos estilos
específicos de listas que es el caso del
que vamos a introducir en este instante
que sería el list style ok si yo escribo
la palabra no debes tener ya una idea de
lo que va a pasar controles y todos los
elementos o básicamente los elementos
que diferenciaban de un elemento
ordenado o también desordenado han
desaparecido
ok entonces con liz style non podemos
aplicar precisamente ese tipo de efecto
bien para no complicarnos mucho y ver
este tema en profundidad qué te parece
si simplemente nos enfocamos en la parte
del juguete en los elementos de una
lista desordenada ok entonces esto yo lo
voy a comentar para que no influye en
nuestro código y esto también lo voy a
quitar para enfocarnos los elementos
desordenados si presionó control s ahí
lo podemos ver
acá también en html control s para
desaparecer la opción de elementos
ordenados acá lo que voy a quitar es
esto el nombre y vamos a presionar un
control s para tener los elementos por
defecto que sería el círculo de color
negro ok también se puede hacer lo
siguiente si seleccionó esta opción
circo control s ahora los círculos no
tienen un color de fondo ok y si quieres
cambiar de forma podrías escribir la
palabra square controles ya y mis
elementos ahora tienen una forma
cuadrada ok entonces de esa manera
puedes personalizar los iconos con un
elemento desordenado pero también puedes
traer iconos como de facebook como de
twitter como de youtube descargándolo de
la internet porque como se hace lo vamos
a ver en este instante bien acá como
sugerencia te dejo esta página en el
cual podemos descargar iconos totalmente
gratis como vas a poder apreciar acá
tengo una variedad muy
muy interesante pero la parte que más me
interese es en la parte de categoría ok
puedes seleccionar cualquiera de estos
yo voy a seleccionar este interfaz de
usuario y gesto ok recuerda que en la
descripción de este vídeo vamos a tener
precisamente el enlace para dirigirnos a
esta página para no demorar mucho yo voy
a seleccionar este objeto ok que está
dentro de este grupo y acá vamos a tener
varias variantes ok y lo que yo necesito
en este caso que sea precisamente el
icono de casa o inicio como lo conocemos
en este caso acá voy a tener la
dimensión
yo voy a seleccionar el más pequeño
ok de esta casa en este caso 32
ok una vez hecho eso yo te sugiero
también que puedas verificar qué tipo de
elemento quieres descargar en este caso
yo voy a seleccionar png bien nos dirige
a otra página y automáticamente va a
comenzar la descarga o te diriges a esta
opción y puedes forzar la descarga
seamos presidentes y en la parte
inferior ya tenemos la descarga y
simplemente vamos a llevarlo a nuestra
carpeta
bien una vez descargado los elementos en
este caso la casa tú te debes dirigir a
esta opción el explorador y revisar que
tengamos el archivo ok yo lo tengo acá
es png es éste no lo podemos ver mejor
entonces qué te parece si me dirijo a la
parte de la carpeta acá ya lo tienes ok
yo lo he cambiado de nombre para mí
simplemente ese canal se llama host
punto png para no tener ninguna
confusión al momento de escribirlo ok
house p en ejemplo ok bien una vez que
ya lo tengas en tu carpeta simplemente
vamos a llamarlo cómo se hace eso para
eso voy a deshacer esta línea de código
vamos a volver a traer pero esta vez voy
a seleccionar esta opción list style
image ok y acá voy a seleccionar la
opción que dice url
acá es precisamente donde debo depositar
el nombre del icono en este caso la casa
para hacerlo mejor recuerda siempre
poner comillas simples y escribir el
nombre del archivo en mi caso howse
punto png
perfecto al finalizar punto y coma y si
presionó controles acá ya podemos
visualizar ok entonces tú puedes
descargarte el icono que tuve es
conveniente y puedes personalizar las
listas como sea de tu agrado ok
bien esto es muy importante vamos a
dejar de largo los elementos huele y
ahora vamos a trabajar precisamente con
los elementos ordenados o listas
ordenadas con la etiqueta o el perfecto
controles en acá vamos a cambiarlo por l
y precisamente se presiona un controles
ya acá se sigue aplicando vamos a borrar
esto porque para diferenciar este
elemento recuerda que como lista
ordenada tiene que seguir una secuencia
de hora 1 2 3 4 así sucesivamente ok
para este tema hay varias opciones
solamente todos son las más usadas que
sería esta lista es time qué te parece
si trabajamos primeramente con el
elemento
pero román que programan si hago un
control es ya ok entonces mis números se
vuelven como números romanos que acá voy
a cambiarlo a siempre
controles es simplemente como ejemplo
ojo simplemente como ejemplo se ponían
un margen de siempre ok para que puedas
verlo mejor porque no es el único
también podría cambiarlo a la loua
román controles en acá los podemos ver
en minúscula
ok vamos a probar el otro
creo que es
latín contra el s y ya tenemos esta
opción miren en letras mayúsculas y si
selecciona la otra opción que sería la
uar o latín controles ya lo tenemos en
minúscula simplemente eso en los
elementos de listas ordenadas ya la vez
vamos a poder visualizar otro tipo de
iconos los hay pero los más usados
pueden ser números romanos o también
letras ok ya sea en mayúscula o
minúscula y bien qué te parece si ahora
vemos un ejemplo totalmente sencillo y
práctico para construir un menú en este
caso como una lista ok de manera
vertical bien para eso voy a pasar todo
lo que hice acá también esto acá vamos a
comentarlo simplemente con la palabra
menú
bien que necesito para construir mi menú
vamos a recusar esto lo primero que
necesito acá es trabajar con un elemento
de una lista en este caso obviamente a
una lista desordenada huela bien una vez
hecho eso acá voy a traer los elementos
de ley y dentro de este ley necesito una
etiqueta de enlace para que el puntero
pueda cambiar el icono y dirigirme en
algún lado
yo voy a seleccionar la opción link ok
voy a borrar esta parte porque
simplemente necesito como adorno porque
no necesito dirigirme a ningún punto ok
simplemente como ejemplo una vez hecho
eso te vienes a este punto en lo que
vamos a hacer es dar una referencia a lo
que voy a ingresar en mi caso inició
como un nombre para poder visualizarlo
ok y de la misma manera voy a presionar
el atajo las veces que sea necesario
perfecto entonces nos venimos a este
punto yo lo voy a cambiar por mapa
ok yo lo voy a cambiar también por
imagen
en este punto vamos a cambiarlo por
libro de lo que se te venga en la mente
perfecto una vez que ya tengan los
nombres de lo que quiere es visualizar
vamos a presionar un control ese y acá
ya lo tenemos como elementos
desordenados y obviamente con la línea
que viene por defecto cuando yo ingreso
una etiqueta tipo a de enlace ok
entonces ahora vamos a pasarnos a css
que vamos a hacer en css vamos a
trasladar esto por acá para poder
visualizarlo mucho mejor bien que vamos
a hacer en css acá también lo voy a
comentar
- bien lo primero que vamos a hacer es
trabajar con huele pero yo te recomiendo
personalizarlo a qué me refiero con eso
que éste huele vamos a darle una clase
qué clase le vamos a dar simplemente el
nombre de menú
ok entonces acá en csc vamos a llamar a
menú
muy bien dentro del menú vamos a traer
la etiqueta que estamos viendo list
style en este caso yo voy a poner la
versión no controles e iu sino notas
ningún cambio entonces recuerda que en
html también tenemos que presionar
control s ya que esto lo hemos hecho
recientemente no hemos guardado ok
entonces recuerda que con list style
none lo que estamos haciendo es
desaparecer el icono que viene por
defecto dentro de los elementos de una
lista desordenada ok y bien qué más
podemos hacer por el momento qué te
parece si damos un fondo vamos a
seleccionar background color en este
caso de color café brawn punto y coma
controles y aquí ya podemos visualizarla
perfecto pero para verlo mejor voy a
incrementar el tamaño del texto con un
fondo sites que te parece de 600 píxeles
ok para que puedas verlo
perfecto
vamos a controlar el ancho with en este
caso vamos a poner la opción de 350
píxeles control s que ya lo tenemos
limitado
ok para verlo mejor voy a otorgar un
margin en este caso de 50 pixeles punto
y coma
controles ya ok ahora ya podemos verlo
de una manera centrada y también para
quitar este espacio yo voy a poner el
padding en este caso en cero
contra lesión ok para poder manipularlo
y también pueden aplicar de una mejor
manera el text align center
perfecto que entonces lo que hemos
manipulado es todo en general ok ahora
necesito pasar a los elementos de ley ok
estábamos en este punto ahora voy a
trabajar de una manera personal los
elementos el eje que entonces nos
venimos acá un poquito más abajo vamos a
ingresar al menú y seguidamente al
elemento l ok
abrimos llaves y dentro de acá
simplemente lo que yo voy a hacer es que
cada uno de estos elementos puedan
distinguirse ahora simplemente al tener
este fondo parecen que fuese simplemente
un solo elemento que tiene inicio mapa
imagen etcétera ok yo necesito que sea
inicio independiente mapa independiente
imagen independiente con una especie de
secciones o como una lista ok entonces
para hacer eso yo me vengo a este punto
y yo simplemente voy a escribir border
button que yeste border button en este
caso de la misma identidad que
manejábamos siempre a un borde tres
píxeles en mi caso
yo lo voy a hacer de color blanco ok
white
y obviamente tiene que ser de fondo
sólida ok o de borde sólido perdón
vamos a ponerlo acá para ver lo mejor es
impresión los controles en aquella
podemos ver una especie de división ok
gracias a border botones de 3 píxeles
que hay para poder verla mejor bien
simplemente eso en la parte de la ley
que es el contenedor de inicio de mapa
imagen libro y así sucesivamente bien
ahora necesito trabajar con estos
elementos inicio mapa imagen con la
etiqueta entonces lo que tengo que hacer
es entrar a menú
seguidamente a él y posteriormente
bien lo primero que voy a hacer es
quitar esta línea y recuerda que sólo
hacíamos contextos de colección en este
caso con punto y coma
controla ese ahí está ya no lo vemos
vamos a cambiarlo de color a esta opción
controles él se ve mucho mejor
de hecho también podría ser los
siguientes font family
selecciona la opción que tú veas
conveniente en mi caso yo voy a
seleccionarse ok si presionó punto y
coma control s no notamos ningún cambio
puede seleccionar otro no está el bética
voy a quitar el área el sheriff también
simplemente helvética control s
se ve mucho mejor ok y bien para poder
manipular los elementos dentro de un
elemento de ley yo te recomiendo siempre
cambiar básicamente al display ok a el
elemento bloque
gay block punto y coma y presión los
controles obviamente no puedes notar el
cambio porque ahora lo vas a poder ver
cuando aplique un padding qué te parece
de 14 píxeles punto y coma controles ok
y se ve mucho mucho mejor ya estamos por
terminar esta parte del menú y para que
parezca un menú vamos a darle el efecto
joven que entonces vamos a hacer lo
mismo punto menos vamos a echar hay ley
jajaja y dentro de a vamos a darle el
efecto cover
que abrimos llaves simplemente voy a
cambiar el color de fondo el background
que sea de color
tomate game punto y coma y también el
color de texto en este caso que sea de
color negro black punto y coma controles
ya nos dirigimos con el puntero del
mouse y ahí la tienes
ok hemos hecho un ejemplo sumamente
práctico y sencillo del uso de las
listas y más adelante vamos a crear un
menú de manera horizontal donde vamos a
poder ver la aplicación precisamente de
este elemento si tú quieres dirigir a
una opción recuerda que acá yo tengo
java punto html de nuestro anterior
episodio entonces acá vienen en inicio o
curso en esta pestaña yo podría cambiar
por este enlace ya va a punto html
miren aquí yo voy a poner java
en html que se están controles y si doy
un clic en el curso me lleva al curso de
java ok muy bien y bien eso ha sido todo
por hoy espero que este episodio haya
sido de tu agrado y nos vemos en el
siguiente episodio dentro de tu curso de
css
Voir Plus de Vidéos Connexes
5.0 / 5 (0 votes)