CURSO de CSS 2021 Rapido y Facil # 11 | 💻 ENLACES
Summary
TLDREn este episodio del curso de CSS, Jack Layton aborda el tema de los enlaces. Comienza por limpiar el contenido anterior y crea un nuevo documento HTML llamado 'java.html'. Explica cómo establecer un enlace desde 'index.html' a 'java.html' y cómo aplicar estilos CSS para modificar el tamaño, color y fondo del texto del enlace. Además, discute la utilización de pseudoclases como 'link', 'visited' y 'hover' para dar diferentes estilos a los enlaces según su estado. Finalmente, muestra cómo abrir enlaces en nuevas pestañas utilizando el atributo 'target' y resalta la importancia de limpiar el historial del navegador para ver los cambios en los estilos de los enlaces.
Takeaways
- 😀 El video es una lección sobre cómo trabajar con enlaces en CSS.
- 👨🏫 El presentador, Jack Layton, enseña a crear un enlace en una página web utilizando HTML y CSS.
- 📄 Se crea un nuevo documento HTML llamado 'java.html' para ejemplificar cómo se conectan los enlaces.
- 🔗 Se explica cómo usar la etiqueta `<a>` para crear enlaces y se le asigna un texto descriptivo.
- 🖌️ Se muestra cómo aplicar estilos CSS a los enlaces, incluyendo el tamaño de la fuente y los colores de fondo y texto.
- 🔄 Se discute la importancia de limpiar el historial del navegador para ver los cambios en los estilos de los enlaces.
- 🔗 Se menciona el uso de la pseudoclase `:link` para estilizar enlaces antes de que sean visitados.
- 📚 Se aprende sobre la pseudoclase `:visited`, que permite cambiar el estilo de los enlaces después de que se han visitado.
- 🖱️ Se explora la pseudoclase `:hover`, que permite dar estilos a los enlaces cuando el mouse se sitúa sobre ellos.
- ✂️ Se da un consejo final sobre cómo abrir enlaces en nuevas pestañas utilizando el atributo `target="_blank"`.
Q & A
¿Qué tema se aborda en este episodio del curso de CSS de Jack Layton?
-En este episodio, se aborda el tema de los enlaces en HTML utilizando CSS.
¿Cómo se inicia el curso de CSS en el video?
-El curso de CSS comienza borrando todo lo anteriormente realizado y comenzando con un body vacío en los archivos de estilos y index.html.
¿Cuál es el propósito de crear un nuevo documento llamado 'java.html' en el curso?
-El propósito es proporcionar un ejemplo práctico de cómo crear un enlace en HTML que conecta un punto a otro, en este caso, desde el documento 'index.html' al nuevo documento 'java.html'.
¿Qué etiqueta HTML se utiliza para crear enlaces y cómo se implementa en el ejemplo del video?
-Se utiliza la etiqueta 'a' para crear enlaces. En el ejemplo, se implementa con el atributo 'href' que apunta al documento 'java.html' y el texto 'ir al curso de java' como contenido del enlace.
¿Cómo se pueden aplicar estilos a un enlace utilizando CSS?
-Se pueden aplicar estilos a un enlace utilizando CSS seleccionando la etiqueta 'a' y luego aplicando las propiedades deseadas, como 'font-size', 'color', 'background-color', etc.
¿Qué atributo se debe agregar a la etiqueta 'a' para abrir un enlace en una nueva pestaña del navegador?
-Se debe agregar el atributo 'target' con el valor '_blank' para abrir el enlace en una nueva pestaña.
¿Qué son las pseudoclases en CSS y cómo se relacionan con los enlaces?
-Las pseudoclases en CSS son palabras clave especiales que se pueden agregar a un selector para agregar un efecto especial. En el contexto de los enlaces, se utilizan para cambiar el estilo del enlace en diferentes estados, como 'link' (antes de visitar), 'visited' (después de visitar), 'hover' (al pasar el mouse por encima) y 'active' (al ser presionado).
¿Cómo se implementa la pseudoclase 'link' en CSS y cuál es su propósito?
-La pseudoclase 'link' se implementa escribiendo 'a:link' en un selector CSS y se utiliza para establecer el estilo del enlace antes de que se visite. Su propósito es darle un aspecto específico al enlace antes de que el usuario haga clic en él.
¿Qué propiedad CSS se utiliza para quitar la línea de subrayado de un enlace y cómo se aplica?
-Se utiliza la propiedad 'text-decoration' con el valor 'none' para quitar la línea de subrayado de un enlace. Se aplica seleccionando el enlace con la etiqueta 'a' y luego agregando 'text-decoration: none;'.
¿Cómo se implementa la pseudoclase 'visited' en CSS y qué hace?
-La pseudoclase 'visited' se implementa con 'a:visited' y se utiliza para aplicar un estilo diferente a los enlaces que el usuario ha visitado anteriormente, como cambiar el color del texto o el fondo.
¿Qué es la pseudoclase 'hover' y cómo se utiliza en el ejemplo del video?
-La pseudoclase 'hover' se utiliza para aplicar un estilo temporal cuando el usuario pasa el mouse sobre un enlace. En el ejemplo, se utiliza para cambiar el color de fondo y el color del texto al pasar el mouse por encima del enlace.
Outlines
🌐 Introducción al Curso de CSS y Enlaces
El vídeo comienza con Jack Layton presentando un nuevo episodio del curso de CSS, enfocado en la creación y estilo de enlaces. Se menciona que se eliminarán los contenidos previos y se trabajará con un archivo HTML limpio. Se crea un nuevo documento HTML llamado 'java.html' y se agrega contenido básico con un título 'Bienvenido al curso de Java'. Se discute cómo visualizar el contenido en el navegador y se corrige un error en el título del documento. Además, se explica cómo trabajar con enlaces y se agrega un enlace al documento 'java.html'. Finalmente, se agregan estilos CSS para modificar el tamaño y color del texto del enlace.
🔗 Trabajando con Estilos y Enlaces en CSS
En este segmento, se aborda cómo agregar estilos CSS directamente en el documento HTML para cambiar el color de fondo y el tamaño del texto. Se menciona la necesidad de actualizar el navegador para ver los cambios reflejados, y se utiliza la etiqueta 'style' para incluir CSS en el documento. Se discuten los atributos 'target' y se explica cómo hacer que los enlaces se abran en una nueva pestaña. Además, se introducen las pseudoclases 'link' y 'visited' para dar estilo a los enlaces antes y después de ser visitados, respectivamente. Se da un ejemplo de cómo cambiar el color de un enlace antes de ingresar a la página y cómo cambiarlo después de la visita.
🎨 Estilizando Enlaces con Pseudoclases en CSS
Este párrafo se centra en el uso de pseudoclases para dar estilo a enlaces en CSS. Se explica cómo limpiar el historial del navegador para ver los cambios en los estilos de los enlaces. Se muestra cómo aplicar estilos a los enlaces utilizando las pseudoclases 'link' y 'visited', cambiando el color del texto y el fondo. Se da un ejemplo de cómo cambiar el color del texto a violeta y el fondo a azul para los enlaces visitados. Además, se trabaja con la pseudoclase 'hover' para cambiar el color del texto y el fondo cuando el mouse se sitúa sobre el enlace, y se ajusta el padding para mejorar la apariencia del enlace.
📚 Conclusión del Episodio de CSS y Enlaces
El vídeo concluye con una revisión de los conceptos aprendidos sobre enlaces y pseudoclases en CSS. Se menciona que los enlaces vistos en este episodio serán útiles en el proyecto final del curso. Se resalta la importancia de entender cómo funcionan las pseudoclases 'link', 'visited' y 'hover' para el diseño de interfaces de usuario. Se invita a los espectadores a seguir el curso para aprender más sobre CSS y se cierra el episodio con una promesa de más contenido en futuras sesiones.
Mindmap
Keywords
💡CSS
💡Enlaces
💡Pseudoclases
💡Etiqueta 'a'
💡Atributo 'target'
💡Text decoration
💡Color
💡Background color
💡Padding
💡Historial del navegador
Highlights
Bienvenida a un nuevo episodio del curso de CSS, donde se aborda el tema de los enlaces.
Se inicia eliminando todo lo previamente creado en el body y en los estilos para comenzar con un espacio en blanco.
Se crea un nuevo documento HTML llamado 'java.html' para ilustrar el ejemplo práctico de enlaces.
Se añade un título 'h1' en el documento 'java.html' con la frase 'Bienvenido al curso de Java'.
Se corrige un error en el título y se guarda el documento.
Se explica cómo hacer referencia al título del documento en el 'title' del navegador.
Se trabaja con la etiqueta 'a' para crear un enlace en el documento 'index.html'.
Se le da estilo al enlace para que sea más visible, cambiando su tamaño y color.
Se agrega el atributo 'href' al enlace para dirigir al documento 'java.html'.
Se describe cómo abrir el enlace en una nueva pestaña utilizando el atributo 'target' con el valor '_blank'.
Se toca el tema de las pseudoclases y se explica cómo aplicar estilos a enlaces utilizando 'text-decoration'.
Se muestra cómo cambiar el color de los enlaces antes y después de ser visitados utilizando las pseudoclases 'link' y 'visited'.
Se aconseja limpiar el historial del navegador para ver los cambios en los estilos de los enlaces.
Se trabaja con la pseudoclase 'hover' para aplicar estilos cuando el mouse se sitúa sobre el enlace.
Se finaliza el episodio con una revisión de los conceptos aprendidos y se anuncia el próximo tema del curso de CSS.
Transcripts
[Música]
hola que tal soy jack layton y
bienvenidos a un nuevo episodio dentro
de tu curso de css hoy vamos a tocar el
tema de los enlaces aquí está el single
ayón y vamos a continuar hoy con nuestro
curso de css con el tema de los enlaces
ok bien como de costumbre vamos a borrar
todo lo que hicimos anteriormente
simplemente nos vamos a quedar con el
body vacío en estilos y acá en index
e.html van ser lo mismo vamos a quitarlo
todo lo que pusimos anteriormente en la
etiqueta o de expresión amos control s y
no está de más también acá en estilo css
también presionar controles ya bien hoy
vamos a ver el tema de enlaces y para
ser un ejemplo sumamente práctico vamos
a conectar un punto a otro ok para hacer
eso acá nos vamos a dirigir en visual se
corta al explorador y recuerda que
nuestros archivos lo estamos creando en
una carpeta de nombre web donde está
depositado la hoja de estilos y el
documento index en mi caso en esta
carpeta vamos a crear un nuevo documento
el cual simplemente yo lo voy a llamar
java
poner el nombre que tuve es conveniente
salvo que al final siempre puedas
adicionar punto html ok para tener la
extensión muy bien acá en visual y 5 lo
abre de manera automática en mi caso yo
lo voy a trasladar por acá para poder
verlo mejor
ok como de costumbre está totalmente
vacío pero en mi caso yo voy a depositar
la documentación html5 ok
bien para poder ver algo en pantalla lo
que yo voy a hacer es dirigir en la
parte del body
acá precisamente vamos a poner un título
h1 y simplemente voy a depositar la
frase bienvenido al curso de lleva
bienvenido al curso de java
acá hay un error vamos a corregirlo así
simplemente muy bien esto lo vamos a
recordar y básicamente si presiona un
control ese no podemos ver nada porque
nuestro navegador únicamente está
abierto a nuestro documento index que
tiene como título cursos css miren index
y acá lo tenemos en la parte del title
esa referencia
bien para poder identificar este
documento ya va también acá por defecto
tengo documento lo vamos a borrar y
simplemente yo lo voy a cambiar por allá
va para identificarlo control s
obviamente no vemos nada porque aún no
lo tengo abierto qué te parece si lo
abrimos bien para eso me voy a venir a
index e.html y acá en la parte del body
vamos a trabajar con un enlace para
trabajar con enlaces recuerden que
necesitamos la etiqueta a ok vamos a
seleccionar esta opción bueno en el
momento simplemente está ok a charaf
como por defecto si acá simplemente dejó
numeral y acá lo que necesito es poner
un anuncio o una palabra que me
identifique que este punto es un enlace
en este caso yo simplemente voy a
escribir ir al curso de chabán
ok miren ahora si controles en y podemos
ver algo en pantalla en este caso voy a
venir más estilos css llamamos en la
etiqueta simplemente para otorgarle
algunos estilos en este caso yo quiero
que se vea más grande quiero que sea de
45 píxeles punto y coma control s
se ve mejor voy a aumentarlo a 55
controles es perfecto de hecho también
acá lo que yo puedo hacer es trabajar un
poquito con el color de texto y también
el fondo en mi caso yo simplemente voy a
dejarlo así simplemente para ver este
ejemplo pero miren si acá yo hago varios
clics no pasa nada porque realmente esta
referencia lo que nos indique
simplemente que puedo poner este código
o también podría dejarlo vacío pero en
realidad simplemente se va a quedar en
ese punto es simplemente como si
estuviera dando vueltas en este caso lo
que yo necesito hacer es direccionar me
al documento ya va para eso miren aquí
yo necesito conectar este documento esto
entonces en este punto yo debo poner el
nombre del documento en este caso ya
apuntó html ok entonces escribimos java
punto etcétera
sí obviamente este documento estuviese
dentro de una carpeta dentro de web
entonces lo que yo necesito es
direccionar los puntos mediante la ayuda
del diagonal ok en este caso yo lo tengo
libre por tanto simplemente de manera
directa puedo conectarme a este
documento
ok simplemente eso lo vamos a dejar así
ojo estamos en index.html ahora sí
miren voy a presionar controles y ahora
sí si doy un clic acá nuestro navegador
nos lleva a la página de java que
precisamente es este ok ya dentro de
nuestro documento dentro de la pestaña
java vemos que está muy pobre dentro de
este curso de css para no complicarnos
no vamos a crear otros estilos para esta
este documento java lo que yo voy a
hacer es adicionar código css dentro del
documento html ok para eso me vengo por
debajo de taito y voy a escribir la
palabra style
y dentro de esta vamos a adicionar todo
lo que necesitamos para llamar un
documento s s s como lo vimos en esta
parte vienen acá yo voy a escribir
simplemente body
vamos a cambiar el color de fondo por
café brown ok
punto y coma y si presionó controles en
ojo ya a punto html ahí podemos notar el
cambio okey creo que el texto no se ve
muy bien vamos a cambiarlo de color
blanco
esta opción me parece bien punto y coma
control s
de hecho vamos a incrementar un poco el
tamaño del texto con font sites
en este caso que te parecen de 45
píxeles punto y coma controles en se ve
perfecta bien simplemente eso es lo
único que vamos a hacer dentro del
documento ya va a punto html algo que
podamos verlo de una manera muy bien
hecha ok bien en este caso si regreso a
index html y si presionó controles acá
acá precisamente una falta la verdad de
sus cambios pero acá miren no puedo
visualizarlo el documento index e.html o
curso css acá en la pestaña y eso se
debe porque simplemente con este enlace
estoy abriendo otra página pero en la
misma pestaña para volver atrás yo
debería dirigirme esta opción y sesión
vuelvo y regreso
parece algo incómodo verdad entonces lo
que yo voy a hacer es abrirlo en una
nueva pestaña para hacerlo debo estar
dentro de la pestaña cursos css que es
index.html y acá precisamente en la
etiqueta yo necesito poner el atributo
de target
una vez dentro de la etiqueta target o
ese atributo lo único que necesitamos
poner es la palabra blank así de esta
manera con vara baja ok
bien vamos a presionar control s
y obviamente no podemos visualizar algo
porque la función que cumple es esta
miren voy a dar un clic acá y
automáticamente nos abre una nueva
pestaña dirigiéndonos al documento y ya
va a punto html bien en este caso esto
si no se hace muy útil para poder abrir
estos documentos en diferentes pestañas
y olvidarnos de esta opción en mi caso
yo lo voy a césar vamos a volver acá y
ahora sí vamos a tocar el tema que nos
importa referente a los enlaces de hecho
en el anterior episodio te mencioné que
vamos a ver sigue algunos pseudo clases
y uno de ellos que viene en un instante
bien quiero que sepas una vez que ya
tengamos esta referencia ahora sí vamos
a trabajar más que todo en la parte de
css vamos a trabajar con algunas seudo
clases para darle estilo precisamente a
estos enlaces de hecho está en línea
muchas veces puede ser incómoda ok
entonces yo me voy a venir acá
ok donde yo voy a decir o voy a escribir
más que todo text decoration ok text
decoration es lo que su mismo nombre
indica va a decorar el texto pero en
este caso yo quiero quitarle esta línea
entonces yo voy a escribir simplemente
la palabra no punto y coma y si presiona
controles se funciona aún sigue siendo
un enlace lo sé porque miren el puntero
del mouse cambia y me indica que es una
opción para ingresar ok
bueno ya le quitamos la línea y se ve
mucho mejor ahora vamos a tocar el tema
de las pseudo clases en este caso con
los clics o los enlaces en los cuales
nos puede dirigir para eso vamos a ver
la primera recuerda que lo primero que
hacemos es ingresar la etiqueta que yo
quiero aplicar y presionar dos puntos y
el nombre de la pseudo clase en este
caso vamos a ver el tema de link
ok link lo que hace es pintar o hacer
cualquier tipo de efecto antes de
ingresar a esta página ok o sea antes de
que yo ingresé al curso dejaba el link
tiene que tener una forma un estilo un
color un tamaño lo que yo quiera cambiar
en este caso yo simplemente voy a
cambiarlo de color lo voy a cambiar a
verde y punto y coma y si presionó
control s a muchos no va a pasar nada
ok control ese y no pasa nada y eso se
debe porque el historial que maneja
nuestro navegador ya tiene como
referencia ese documento miren acá en
firefox
si entro a la parte del catálogo en el
historial miren ya tengo como entrada se
sientes estos documentos lo que yo puedo
hacer es eliminarlos
ok eliminarlos para no tener ningún
inconveniente
de hecho aún si actualizamos y es el
cambio en caso de que no funcione lo que
tienes que hacer es sellar el navegador
y volverlo a abrir miren en este caso yo
voy a abrir también chrome
lo mismo te vienes acá más herramientas
y bolsas los datos de navegación que hay
para no tener ningún problema una vez
que lo hagas te recomiendo sellarlo y
volverlo a abrir en este caso funcionó
concretamente miren ya lo tengo de color
verde ojo esto es muy importante porque
si no no vas a notar los cambios y vas a
tener muchos muchos problemas recuadro
bolsa siempre el historial del navegador
y nuevamente vuelve es abrirla bien en
este caso si funciona y como te mencioné
en un principio en la pseudo clase de
link lo que hace es que tenga en este
caso un cambio de color gracias a esta
propiedad antes de ingresar a la página
de hecho lo voy a probar ahí está voy a
regresar al anterior y cambio de fondo
porque esa página ya lo ha visitado
ok esto simplemente nos funciona cuando
no lo visito si ya lo visite vuelve a
este estilo por defecto entonces
recuerda bien si acá hay bolsas en el
historial del navegador ok muy
importante este punto bien vamos a
volver a nuestro documento acá de hecho
esto lo voy a cerrar ahora vamos a
probar otra seudo clase con la etiqueta
de nombre visite esta etiqueta o mejor
dicho esta pseudo clase lo que hace es
lo contrario va a pintarnos de un color
cuando ya la página ha sido visitado ok
en este caso yo voy a cambiar de color a
qué te parece violeta
punto y coma
controles y ahí está ok anteriormente ya
visite dicho voy a hacerlo de nuevo
vengo acá voy a irme al catálogo
historial ya vamos a eliminar un mejor
dicho vamos a borrar o aliviar la página
para no tener ningún inconveniente o las
ciegas ahí lo tienes en mi caso
miren acá yo tengo el documento yo lo
voy a cerrar para no tener ningún
problema
aquí te tengo en la carpeta voy a volver
a ingresar a index
ahí lo tiene en un inicio te recomiendo
siempre este paso volver a abrirlo y
volver a cerrarlo yo miren en un inicio
comienza con esta propiedad o esta
pseudo clase link de color verde cuando
yo ingreso me lleva esta página quiero
volver a curso css que lo tengo con este
color como página visita muy importante
se detalla bien vamos a terminar con el
joven que es creo lo más interesante de
esta opción que lo vamos a usar mucho
para crear menús lo que voy a hacer es
acá precisamente vamos a volver a la
original am y en este caso vamos a
cambiar algunas propiedades vamos a
actualizar el contenido nos volvemos a
dirigir a la etiqueta vamos a cambiar
algunos estilos como es el caso del
fondo background color yo lo voy a
pintar de color azul blue
punto y coma control s yo aún no lo
puedo ver lo que te recomiendo recuerda
vuelves a cerrarlo
acá lo tengo vuelvo a abrirlo y ahí lo
ves con los cambios como la página fue
visitada y el historial aún no lo ha
limpiado pues se mantiene ok
bien en este caso para que la página se
vea mucho mejor lo que no combina muy
bien voy a cambiar el color de violeta
que no voy a cambiar por white blanco
controles vamos a volver a cerrarlo
volvemos a abrirlo ahí se ve muy bien de
hecho vamos a vamos a incrementar un
poco el padding todos lados de 20
píxeles punto y coma control s
actualizamos el contenido ya aquí sí ya
se puede ver
y bien lo que vamos a hacer para
terminar este episodio es trabajar con
la última opción que sería el joven ok a
dos puntos llamamos a la propiedad
hobert y acá yo le voy a decir que
cuando me acerca el texto se o el fondo
se ponga de color amarillo ok para eso
voy a cambiar el color con un background
en este caso color de color hielo como
se mencionado punto y coma y también
dicho acá lo vamos a poder verlo mejor
así
but crowd color color hielo y también el
color de texto en este caso sea de color
negro blanco
punto y coma controles se actualiza los
datos y ahí puedes ver la transición ok
generalmente esto siempre lo vemos en
opciones de menú
bien vamos a dejar hasta este punto este
episodio que se nos hizo un poquito muy
largo para comprender más que todo la
pseudo clase link visit hijo ver que lo
vimos anteriormente y también más
adelante en el proyecto final vamos a
ver la utilidad de todos estos enlaces
ok viernes ha sido todo por hoy nos
vemos en el siguiente episodio con más
de tu curso de css
[Música]
Browse More Related Video
CURSO de CSS 2021 Rapido y Facil # 9 | 💻 TIPOS DE ELEMENTOS
CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS
CURSO de CSS 2021 Rapido y Facil # 10 | 💻 PSEUDO-CLASES
CURSO de CSS 2021 Rapido y Facil # 7 | 💻 EL CONTENEDOR
CURSO de CSS 2021 Rapido y Facil # 14 | 💻 ENLACES II
CURSO de CSS 2021 Rapido y Facil # 6 | 💻 ID & CLASES
5.0 / 5 (0 votes)