💻 Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Pruebas estilos varios - Ejercicios</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/prueba_estilos.css">
</head>
<body>
<header>
<h1 id="top">Ejemplos para aplicar estilos</h1>
<nav>
<ul>
<li><a href="#sHTML"><abbr title="HyperText Markup Language">HTML</abbr></a></</li>
<li>
<ul>
<li><a href="#sHTML4"><abbr title="HyperText Markup Language">HTML</abbr> 4.01</a></li>
<li><a href="#sHTML5"><abbr title="HyperText Markup Language">HTML</abbr> 5</a></li>
</ul>
</li>
<li><a href="#Javascript">Javascript</a></li>
<li><a href="sXML"><abbr title="eXtensible Markup Language">XML</abbr></a></li>
</ul>
</nav>
</header>
<hr>
<section id="sHTML">
<h1><abbr title="HyperText Markup Language">HTML</abbr></h1>
<p>Ejemplos de hipervínculos</p>
<div class="tecnico">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>
<ul id="listaInterior">
<li>Curabitur laoreet mi et volutpat hendrerit.</li>
<li>Sed vitae nulla mollis, ultricies eros sed, efficitur odio.</li>
<li>Maecenas ut eros et arcu tristique posuere.</li>
<li>Suspendisse nec neque malesuada felis consectetur tristique et vitae neque.</li>
<li>Quisque consectetur erat ac nunc vehicula, eu ornare erat cursus.</li>
</ul>
</li>
<li>Pellentesque porttitor tortor eu sapien efficitur, sed sodales lacus imperdiet.</li>
<li>Ut sodales velit quis ante congue, ac elementum urna dictum.</li>
<li>In placerat risus ut tincidunt elementum.</li>
<li class="diferente">Donec ultrices mauris et maximus fermentum.</li>
<li>Proin porta purus eu quam facilisis, eget consectetur quam pulvinar.</li>
<li>Aenean iaculis libero vel augue facilisis, a fermentum ex ullamcorper.</li>
<li class="diferente">Etiam at purus nec dolor elementum placerat.</li>
<li>Ut et sapien at purus ornare facilisis quis at odio.</li>
<li>Vivamus ornare arcu non volutpat tincidunt.</li>
<li>Morbi dapibus tellus non vestibulum facilisis.</li>
</ul>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p class="iyc">
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
<p class="tecnico">
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
<section id="sHTML4">
<h2><abbr title="HyperText Markup Language">HTML</abbr> 4.01</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
<p>
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
</section>
<section id="sHTML5">
<h2><abbr title="HyperText Markup Language">HTML</abbr> 5</h2>
<p class="tecnico iyc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
<p>
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
</section>
</section>
<section id="sJavascript">
<h1>Javascript</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
<p>
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
</p>
<p>
Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
</section>
<section id="sXML">
<h1><abbr title="eXtensible Markup Language">XML</abbr></h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
</p>
<p>
Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero.
</p>
<p>
Proin <a href="otroejercicio.html">otro ejercicio</a>, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus.
</p>
<footer>
<a href="#top">Ir arriba</a>
</footer>
</section>
<footer>
<ol>
<li>Enlace a <a href="http://www.google.es">Google (http)</a></li>
<li>Enlace a <a href="HTTPS://www.google.es">Google (https)</a></li>
<li>Enlace a <a href="http://bing.es">Bing (http)</a></li>
<li>Enlace a <a href="http://www.elpais.es" target="_blank">El País (_blank)</a></li>
<li>Enlace a <a href="http://www.elmundo.es" target="_blank">El Mundo (_blank)</a></li>
<li>Enlace a <a href="http://www.hoy.es">Hoy (_self)</a></li>
</ol>
<p><a href="terminoslegales.pdf" target="_blank">Términos y Condiciones</a></p>
</footer>
</body>
</html>
🎨 Código CSS
@media screen {
/*
A)
Los hipervinculos internos no visitados utilizaran el color hsla(158, 100%, 50%, 1) y rgb(77, 183, 101)
los que hayan sido visitados.
*/
a[href^="#"]:link {
color: hsla(158, 100%, 50%, 1);
}
a[href^="#"]:visited {
color: rgb(77, 183, 101);
}
/*
Los hipervinuclos no visitados que se abren en una ventana nueva (_blanck) ser mostraran de color #db7f55 y
hsl(136, 53%, 20%) cuando hayan sido visitados.
*/
a[target="_blank"]:link {
color: #db7f55;
}
a[target="_blank"]:visited {
color: hsl(136, 53%, 20%);
}
/*
C)
Los hipervinculos a ficheros pdf aparecerann con fondo hsl(356%, 53%, 55%)
*/
a[href$=".pdf"] {
background-color: hsl(356, 53%, 55%);
}
/*
D)
Al pasar por encima con el raton sobre cualquier hipervinculo aparecera
como color de fondo #bbafed
*/
a:hover {
background-color: #bbafed;
}
/*
E)
La primera letra de los párrafos pares aparecerá en color rojo (red).
*/
p:nth-child(2n+0)::first-letter{
color: red;
}
/*
F)
Los elementos impares de las listas ordenadas aparecerán con color de fondo #eae8e8 y los pares con color de fondo #c7c5c5
*/
ol li:nth-child(2n+1){
background-color: #eae8e8;
}
/*
G)
El primer elemento de las listas no ordenadas aparecerán con fondo verde, el penúltimo con fondo rosa
y el último con fondo marrón
*/
ul li:first-child{
background-color: green;
}
ul li:nth-last-child(2){
background-color: pink;
}
ul li:last-child{
background-color: brown;
}
/*
H)
La primera línea del párrafo que vaya precedido de un título h1, h2 o h3 aparecerá en color rgb(52, 155, 136).
Utiliza :is o :where. Nota: :where siempre tiene especificidad de 0, :is tiene especificidad del mayor de los
selectores contenidos, compruébalo en VSCode, poniendo el ratón sobre el selector en la regla.
*/
:where(h1, h2, h3) + p::first-line {
color: rgb(52, 155, 136);
}
/*
I)
Las listas contenidas en otras listas aparecerán con fondo rgb(149, 244, 208) y un nivel de transparencia del 50%.
Utiliza :is o :where.
*/
:is(ul, ol, dl) :is(ul, ol, dl) {
background-color: rgba(149, 244, 208, 0.5);
}
/*
J)
Los párrafos pertenecientes a la clase tecnico tendrán el color de fondo #99a49c, los de la clase iyc el color #cdebd5
y los que pertenezcan a ambas clases el color de fondo #3cd367.
*/
p.tecnico {
background-color: #99a49c;
}
p.iyc {
background-color: #cdebd5;
}
p.tecnico.iyc {
background-color: #3cd367;
}
/*
K)
Los hipervínculos que utilicen rutas que empiezan con HTTPS, escrito en mayúsculas o minúsculas, saldrán con fondo sandybrown.
*/
a[href^="https" i]{
background-color: sandybrown;
}
/*
L)
Todos los elementos de la listas no ordenadas que sean “hijas” de un div, a excepción de los que pertenezcan a la clase diferente
y el cuarto y el sexto tendrán como color de texto verde y fondo azul. Utiliza :not()
*/
div > ul > li:not(.diferente):not(:nth-child(4)):not(:nth-child(6)) {
color: green;
background-color: blue;
}
/*
M)
Al pasar el ratón por cualquier parte de una sección (section) se mostrará con color de fondo hsl(203, 65%, 59%) los elementos
descendientes que pertenezcan a la clase iyc. Marca esta regla como !important ¿es necesario?
*/
section:hover .iyc {
background-color: hsl(203, 65%, 59%) !important;
}
/*
N)
El primer hijo h1 o h2 de un destino activo a un section de un hipervínculo interno (es el que ha sido pulsado y aparece en la URL que ha cargado el navegador)
aparecerá con un color de fondo rosa. Utiliza la pseudoclase :target Ayuda en: CSS :target Selector
*/
section:target > :is(h1, h2):nth-child(1) {
background-color: pink;
}
/*
O)
El texto seleccionado por un usuario y que esté en un párrafo saldrá con fondo hsl(100, 44%, 52%). Nota: utiliza ::selection, puedes ver más información
https://developer.mozilla.org/es/docs/Web/CSS/::selection ¿a qué especificación pertenece?
*/
p::selection {
background-color: hsl(100, 44%, 52%);
}
}
@media print {
a{
color: black;
}
a:not([href^="#"])::after {
content: " (" attr(href) ") ";
}
}yellow;
