Ademas de enumerar con las listas ordenas UL tambien lo podemos hacer de otra manera utilizando solamente CSS pero dejenme decirle que hacerlo con las listas UL es una mala practica porque las listas unicamente se utilizan con texto cortos.
Este tutorial surge por un trabajo que estaba haciendo en la U me pregunte como se podia enumerar dichos titulo o subtitulos de un documento pero utilizando html y css.
index
Como siempre agregamos la estructura de nuestro index.html Al principio solo les iba a dejar los títulos y los párrafos, al final me decidí de agregarle un poco de estilo para que se aprecie mejor.
<!doctype html>Este tutorial surge por un trabajo que estaba haciendo en la U me pregunte como se podia enumerar dichos titulo o subtitulos de un documento pero utilizando html y css.
index
Como siempre agregamos la estructura de nuestro index.html Al principio solo les iba a dejar los títulos y los párrafos, al final me decidí de agregarle un poco de estilo para que se aprecie mejor.
Tenemos un div con id container que dentro del estarán los
h3 y p.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>div flotantes</title>
<link rel="stylesheet" href="estilo10.css">
</head>
<body>
<div id="container">
<h3>Historia del iPhone</h3>
<p>Los ingenieros de Apple investigaron la pantalla táctil, bajo la dirección del expresidentes de Apple. Apple creó el dispositivo con la colaboración exclusiva y sin precedentes de AT&T Mobility- </p>
<h3>Orígenes</h3>
<p>Los ingenieros de Apple investigaron la pantalla táctil, bajo la dirección del expresidentes de Apple. Apple creó el dispositivo con la colaboración exclusiva y sin precedentes de AT&T Mobility- </p>
<h3>Publicidad</h3>
<p>Los ingenieros de Apple investigaron la pantalla táctil, bajo la dirección del expresidentes de Apple. Apple creó el dispositivo con la colaboración exclusiva y sin precedentes de AT&T Mobility- </p>
<h3>Lanzamientos estadounidenses</h3>
<p>Los ingenieros de Apple investigaron la pantalla táctil, bajo la dirección del expresidentes de Apple. Apple creó el dispositivo con la colaboración exclusiva y sin precedentes de AT&T Mobility- </p>
</div>
</body>
</html>
Aremos uso del selector :before para colocar contenido antes de que empiece
el contenido de la etiqueta, en este caso H3. Antes que nada en el body
especificamos una variable first. la cual sirve como variable inicial para que
después todo empiece a incrementarse de uno en uno.
En el before del H3 lo que hacemos es
decir la variable que queremos incrementar un valor, y más abajo decimos que la
muestre. Y en la última línea al final se le agrego un punto que obtendríamos
esto 1. Y también un espacio para que los números no están junto al texto.
*
{margin: 0;
padding: 0;
}
body
{
counter-reset: first 0;
font-family: verdana;
}
A los títulos que están dentro de los H3 se le agrego un color de texto blanco con sombras y un tamaño de 15px negrita
h3
{
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 15px;
font-weight: bold;
}
h3:before{
counter-increment: first;
content: counter(first) ". ";
}
p
{
font-size: 10px;
padding: 10px 0;
}
Al container tiene un color de fondo azul oscuro , esta vez agregamos un alto y un ancho a este contenedor que el texto no ocupara todo el ancho del navegador.
#container
{
background: #335D9C;
height:400px;
margin: 0 auto;
padding: 30px;
width: 800px;
}
Este tutorial surge por un trabajo que estaba haciendo en la U me pregunte como se podia enumerar dichos titulo o subtitulos de un documento pero utilizando html y css.
ResponderEliminarhttps://tecniciencias.com/10-mejores-software-para-convertir-de-mayusculas-a-minusculas/