En este tutorial, aprenderás cómo mejorar la apariencia visual de tu página HTML aplicando estilos CSS de manera gradual. A lo largo del proceso, irás asignando selectores a los elementos de tu HTML y los estilizarás paso a paso. Esta metodología te permitirá comprender cómo los estilos se aplican a diferentes elementos y cómo influyen en el diseño general de tu página web.
En el
de tu archivo index.html, añade el enlace al archivo CSS:
<head>
<!-- Metadatos -->
<link rel="stylesheet" href="estilos.css">
</head>
Incluye la fuente "Roboto" de Google Fonts:
En tu
, añade:<head>
<!-- Metadatos -->
<link rel="stylesheet" href="estilos.css">
<!-- Enlaces a Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
En estilos.css, comienza estableciendo estilos generales para el cuerpo del documento:
/* Estilos Generales */
body {
font-family: 'Roboto', sans-serif;
background-color: #E9EFEC; /* Color de fondo claro */
margin: 0;
padding: 0;
color: #16423C; /* Color de texto principal */
}
En index.html, agrega un atributo id al encabezado:
<header id="encabezado">
<h1>Mapa de Iniciativas Ecológicas Locales</h1>
</header>
En estilos.css, añade:
/* Encabezado */
#encabezado {
background-color: #16423C; /* Color primario oscuro */
color: #E9EFEC; /* Texto claro */
padding: 20px;
text-align: center;
}
#encabezado h1 {
margin: 0;
font-size: 2.5em;
}
En index.html, agrega:
<nav id="navegacion">
<ul>
<!-- Enlaces -->
</ul>
</nav>
En estilos.css:
/* Menú de Navegación */
#navegacion {
background-color: #6A9C89; /* Color secundario */
}
#navegacion ul {
list-style: none; /* Quita los puntos de la lista */
margin: 0;
padding: 0;
display: flex; /* Alinea los elementos horizontalmente */
justify-content: center; /* Centra los elementos */
}
#navegacion li {
margin: 0;
}
#navegacion a {
display: block;
color: #E9EFEC; /* Texto claro */
padding: 15px 20px;
text-decoration: none;
font-weight: bold;
}
#navegacion a:hover {
background-color: #16423C; /* Cambia el fondo al pasar el cursor */
}
En index.html, actualiza el carrusel:
<section id="carrusel">
<h2>Iniciativas Destacadas</h2>
<div class="carrusel-contenedor">
<!-- Slides -->
<div class="slide">
<img src="img/1.jpg" alt="Imagen 1">
<p>Descripción de la imagen 1</p>
</div>
<!-- Más slides... -->
<!-- Controles del carrusel -->
<button class="prev">«</button>
<button class="next">»</button>
</div>
</section>
En estilos.css:
/* Carrusel */
#carrusel {
text-align: center;
padding: 20px 10px;
background-color: #C4DAD2; /* Color de acento */
}
.carrusel-contenedor {
position: relative;
max-width: 1000px;
margin: auto;
overflow: hidden;
border-radius: 5px;
}
.slide {
display: none; /* Oculta los slides por defecto */
}
.slide img {
width: 100%;
height: auto;
border-radius: 5px;
}
.slide:first-child {
display: block; /* Muestra el primer slide */
}
/* Botones de navegación */
.prev, .next {
background-color: rgba(22, 66, 60, 0.7); /* Color semitransparente */
border: none;
color: #E9EFEC;
padding: 5px 12px;
position: absolute;
top: 50%;
cursor: pointer;
border-radius: 50%;
font-size: 1.5em;
transform: translateY(-50%); /* Centra verticalmente */
}
.prev {
left: 15px;
}
.next {
right: 15px;
}
.prev:hover, .next:hover {
background-color: rgba(22, 66, 60, 0.9);
}
En index.html:
<section id="informacion">
<h2>Sobre Nosotros</h2>
<!-- Contenido -->
</section>
En estilos.css:
/* Contenido Principal */
main {
padding: 40px 20px;
}
section {
margin-bottom: 60px;
}
/* Sección Informativa */
#informacion h2 {
color: #16423C;
text-align: center;
}
#informacion p {
line-height: 1.8; /* Espacio entre líneas */
max-width: 800px; /* Ancho máximo para mejorar la legibilidad */
margin: 20px auto; /* Centra el texto */
text-align: center;
}
En index.html:
<section id="registro">
<h2>Registrar Nueva Iniciativa</h2>
<!-- Formulario -->
</section>
En estilos.css:
/* Formulario de Registro */
#registro h2 {
text-align: center;
color: #16423C;
}
#registro form {
max-width: 600px;
margin: auto;
background-color: #FFFFFF;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#registro label {
display: block;
margin-top: 15px;
color: #16423C;
font-weight: bold;
}
#registro input[type="text"],
#registro textarea,
#registro select {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #C4DAD2;
border-radius: 5px;
background-color: #E9EFEC;
}
#registro input[type="text"]:focus,
#registro textarea:focus,
#registro select:focus {
border-color: #6A9C89;
outline: none;
}
#registro input[type="submit"] {
margin-top: 20px;
background-color: #6A9C89;
color: #E9EFEC;
border: none;
padding: 15px;
cursor: pointer;
width: 100%;
font-size: 1.1em;
border-radius: 5px;
}
#registro input[type="submit"]:hover {
background-color: #16423C;
}
En index.html:
<section id="mapa">
<h2>Mapa de Iniciativas</h2>
<div>
<!-- Mapa -->
</div>
</section>
En estilos.css:
/* Sección del Mapa */
#mapa {
padding: 40px 20px;
background-color: #C4DAD2;
border-radius: 10px;
}
#mapa h2 {
text-align: center;
color: #16423C;
}
#mapa div {
height: 500px;
}
En index.html:
<footer id="pie-de-pagina">
<p>© 2024 Mapa de Iniciativas Ecológicas Locales</p>
</footer>
En estilos.css:
/* Pie de Página */
#pie-de-pagina {
background-color: #16423C;
color: #E9EFEC;
text-align: center;
padding: 15px;
}
#pie-de-pagina p {
margin: 0;
font-size: 0.9em;
}
En estilos.css, añade:
/* Diseño Responsivo */
@media screen and (max-width: 768px) {
#navegacion ul {
flex-direction: column; /* Cambia el menú a vertical */
}
.prev, .next {
padding: 3px 8px;
}
#registro form {
width: 100%;
padding: 20px;
}
#encabezado h1 {
font-size: 2em;
}
}
¡Felicidades! Has completado la estilización de tu página web, aprendiendo a utilizar selectores y comprendiendo cómo afectan al diseño. Ahora tienes una página web funcional y estéticamente agradable.
以上是Mapa de Iniciativas Ecológicas: CSS (Parte 2)的详细内容。更多信息请关注PHP中文网其他相关文章！
