<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mi primera página web</title>
</head>
<body>
<h2>Párrafos <p></h2>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
<p id="segundo-parrafo">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
<h2><ol> con atributo <code>id="primera-lista"</code></h2>
<ol id="primera-lista" class="contorno">
<li>Patito</li>
<li>Gatito</li>
<li>Ratoncito</li>
<li>Perrito</li>
<li>Tlacuachito</li>
</ol>
<h2><ol> con atributos <code>start="20"</code> y <code>class="green"</code></h2>
<ol start="20" class="green contorno">
<li>Patito</li>
<li>Gatito</li>
<li>Ratoncito</li>
<li>Perrito</li>
<li>Tlacuachito</li>
</ol>
<h2><ol> con atributos <code>reversed</code> y <code>class="green"</code></h2>
<ol reversed class="green contorno">
<li>Patito</li>
<li>Gatito</li>
<li>Ratoncito</li>
<li>Perrito</li>
<li>Tlacuachito</li>
</ol>
<h2><ol> con atributos <code>reversed</code>, <code>start="20"</code> y <code>class="green"</code></h2>
<ol reversed start="20" class="green contorno">
<li>Patito</li>
<li>Gatito</li>
<li>Ratoncito</li>
<li>Perrito</li>
<li>Tlacuachito</li>
</ol>
<h2><details> SIN atributo <code>open</code></h2>
<details class="contorno">
<summary>Texto desplegable</summary>
<p>Contenido de texto desplegable</p>
<p>Más contenido de texto desplegable</p>
</details>
<h2><details> con atributo <code>open</code></h2>
<details open class="contorno">
<summary>Texto desplegable</summary>
<p>Contenido de texto desplegable</p>
<p>Más contenido de texto desplegable</p>
</details>
</body>
</html>
html {
font-size: 14px;
}
body {
/*
* ESTO ES UN COMENTARIO:
* Fuentes estandar disponibles en el navegador:
* serif, sans-serif, monospace, cursive, fantasy
* Estas no llevan comillas
*/
font-family: "Helvetica", "Verdana", "Arial", sans-serif;
}
p {
font-size: 14px;
line-height: 1;
}
#segundo-parrafo {
text-align: right;
line-height: 2;
margin-top: 2rem;
}
ol {
font-size: 1.1rem;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
li {
list-style-position: inside;
}
#primera-lista {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
.contorno {
border: 1px solid green;
}
details {
margin-top: 20px;
font-size: 1.5rem;
background-color: lightgray;
border: 1px solid #ccc;
padding: 10px;
}
details[open] {
background-color: lightblue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.