生態倡議地圖：CSS（第 2 部分）

介紹

在本教學中，您將學習如何透過逐步套用 CSS 樣式來改善 HTML 頁面的視覺外觀。在整個過程中，您將向 HTML 元素分配選擇器並逐步設定它們的樣式。這種方法將讓您了解如何將樣式套用到不同的元素以及它們如何影響您網站的整體設計。

第 1 步：建立 CSS 文件

• 在文字編輯器中建立一個新檔案並將其另存為eco_initiatives資料夾中的styles.css。

步驟 2：將 CSS 檔案連結到 HTML

在

從您的 index.html 檔案中，加入指向 CSS 檔案的連結：

    <!-- Metadatos -->
    <link rel="stylesheet" href="estilos.css">

• ：將 CSS 樣式表連結到 HTML 文件。

步驟 3： 新增 Google Fonts 中的字體

包括來自 Google Fonts 的字體「Roboto」：

• 在瀏覽器中，前往 Google Fonts 並蒐索字體「Roboto」。
• 選擇您想要使用的樣式（例如常規 400、粗體 700）。
• 複製提供的連結。

在您的

中加入：

    <!-- 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">

• ：將「Roboto」來源連結到文件。

第四步：通用樣式

在 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 */
}

• font-family：將「Roboto」字體套用至整個文件。
• background-color：設定頁面的背景顏色。
• 邊距和填滿：刪除預設的邊距和填滿。
• 顏色：定義正文的顏色。

第 5 步：設定標題樣式

5.1 在 HTML 的 Header 中加入 ID

在index.html中，在header中加入一個id屬性：

<header id="encabezado">
    <h1 id="Mapa-de-Iniciativas-Ecológicas-Locales">Mapa de Iniciativas Ecológicas Locales</h1>
</header>

• id="header"：為元素指派唯一識別碼。

5.2 在 CSS 中套用樣式

在 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;
}

• #header：將樣式套用於 id="header" 的元素的 ID 選擇器。
• background-color 和 color：定義背景和文字顏色。
• 填滿：在內容周圍增加內部空間。
• text-align：將文字水平置中。
• #h1 header：將樣式套用至

  標題。在標題內。

第 6 步：設定導覽選單的樣式

6.1 在 HTML 中向選單新增 ID

在index.html中，新增：

<nav id="navegacion">
    <ul>
        <!-- Enlaces -->
    </ul>
</nav>

6.2 在 CSS 中套用樣式

在 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 */
}

• display: flex：我們使用 Flexbox 水平對齊元素。
• justify-content: center：將元素放在容器內居中。
• list-style: none：從清單中刪除點。
• 文字裝飾：無：從連結中刪除底線。
• font-weight：bold：讓文字加粗。
• 偽類 :hover：當使用者將滑鼠懸停在連結上時更改連結的樣式。

第 7 步：設定圖像輪播樣式

7.1 在 HTML 中新增 ID 和類

在index.html中，更新輪播：

<section id="carrusel">
    <h2 id="Iniciativas-Destacadas">Iniciativas Destacadas</h2>
    <div class="carrusel-contenedor">
        <!-- Slides -->
        <div class="slide">
            <img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" 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>

• id="carousel"：標識輪播部分。
• class="carousel-container"：輪播容器的類別。
• class="slide"：每張投影片的類別。
• class="prev", class="next"：導航按鈕的類別。

7.2 在 CSS 中套用樣式

在 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(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);
}

• .slide: Oculta todos los slides inicialmente.
• .slide:first-child: Muestra el primer slide.
• position: absolute: Ubica los botones sobre las imágenes.
• transform: translateY(-50%): Centra verticalmente los botones.
• border-radius: Redondea las esquinas de las imágenes y botones.
• Uso de rgba: Crea colores con transparencia.

Paso 8: Estilizar el Contenido Principal

Sección Informativa

8.1 Añadir un ID en el HTML

En index.html:

<section id="informacion">
    <h2 id="Sobre-Nosotros">Sobre Nosotros</h2>
    <!-- Contenido -->
</section>

8.2 Aplicar Estilos en CSS

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;
}

• line-height: Aumenta el espacio entre líneas para facilitar la lectura.
• max-width y margin: auto: Controlan el ancho y centran el contenido.

Formulario de Registro

8.3 Añadir un ID en el HTML

En index.html:

<section id="registro">
    <h2 id="Registrar-Nueva-Iniciativa">Registrar Nueva Iniciativa</h2>
    <!-- Formulario -->
</section>

8.4 Aplicar Estilos en CSS

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;
}

• Estilos del formulario: Creamos un fondo blanco con sombra y bordes redondeados.
• Campos de entrada: Estilizamos los campos para que sean atractivos y fáciles de usar.
• Pseudo-clase :focus: Cambia el estilo de los campos cuando el usuario hace clic en ellos.
• Botón de envío: Destaca y cambia de color al pasar el cursor.

Paso 9: Estilizar la Sección del Mapa

9.1 Añadir un ID en el HTML

En index.html:

<section id="mapa">
    <h2 id="Mapa-de-Iniciativas">Mapa de Iniciativas</h2>
    <div>
        <!-- Mapa -->
    </div>
</section>

9.2 Aplicar Estilos en CSS

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;
}

• Estilos coherentes con el resto de la página.
• height: Define la altura del contenedor del mapa.

Paso 10: Estilizar el Pie de Página

10.1 Añadir un ID en el HTML

En index.html:

<footer id="pie-de-pagina">
    <p>© 2024 Mapa de Iniciativas Ecológicas Locales</p>
</footer>

10.2 Aplicar Estilos en CSS

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;
}

• Crea un pie de página atractivo y consistente con el diseño general.

Paso 11: Añadir Responsividad

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;
    }
}

• Media Query: Aplica estilos cuando el ancho de pantalla es menor o igual a 768px.
• Ajustes para dispositivos móviles: Mejora la usabilidad en pantallas pequeñas.

Paso 12: Guardar y Probar los Estilos

1. Guarda el archivo estilos.css.
2. Actualiza el navegador donde tienes abierto index.html para ver los cambios.
3. Verifica que los estilos se apliquen correctamente y que el diseño se vea moderno y atractivo.

---

¡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.

---

以上是生態倡議地圖：CSS（第 2 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！