在本教程中，您将学习如何通过逐步应用 css 样式来改善 html 页面的视觉外观。在整个过程中，您将向 html 元素分配选择器并逐步设置它们的样式。这种方法将让您了解如何将样式应用于不同的元素以及它们如何影响您网站的整体设计。
在index.html文件的
中，添加css文件的链接：
<!-- metadatos -->
<link rel="stylesheet" href="estilos.css">
包括来自 google fonts 的字体“roboto”：
在您的
中，添加：
<!-- metadatos -->
<link rel="stylesheet" href="estilos.css">
在 styles.css 中，首先设置文档正文的常规样式：
/* 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 */
}
在index.html中，在header中添加一个id属性：
<header id="encabezado"><h1>mapa de iniciativas ecológicas locales</h1> </header>
在 styles.css 中，添加：
/* 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;
}
在index.html中，添加：
<nav id="navegacion"><ul><!-- enlaces --></ul></nav>
在 styles.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 */
}
在index.html中，更新轮播：
<section id="carrusel"><h2>iniciativas destacadas</h2>
<div class="carrusel-contenedor">
<!-- slides -->
<div class="slide">
@@##@@
<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>
在 styles.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(null, 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(null, 66, 60, 0.9);
}
在index.html中：
<section id="informacion"><h2>sobre nosotros</h2>
<!-- contenido -->
</section>
在 styles.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;
}
在index.html中：
<section id="registro"><h2>registrar nueva iniciativa</h2>
<!-- formulario -->
</section>
在 styles.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(null, 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;
}
在index.html中：
<section id="mapa"><h2>mapa de iniciativas</h2>
<div>
<!-- mapa -->
</div>
</section>
在 styles.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;
}
在index.html中：
<footer id="pie-de-pagina"><p>© 2024 mapa de iniciativas ecológicas locales</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </footer>
在 styles.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;
}
在 styles.css 中，添加：
/* 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;
}
}
恭喜！您已经完成了网站的样式设计，学习了如何使用选择器并了解它们如何影响设计。现在您拥有了一个功能齐全且美观的网站。