Carte des initiatives écologiques : CSS (Partie 2)-tutoriel CSS-php.cn

Mapa de Iniciativas Ecológicas: CSS (Parte 2)

Introduction

Dans ce tutoriel, vous apprendrez comment améliorer l'apparence visuelle de votre page HTML en appliquant progressivement les styles CSS. Tout au long du processus, vous attribuerez des sélecteurs aux éléments de votre HTML et les styliserez étape par étape. Cette méthodologie vous permettra de comprendre comment les styles sont appliqués aux différents éléments et comment ils influencent la conception globale de votre site internet.

Étape 1 : Créer le fichier CSS

Créez un nouveau fichier dans votre éditeur de texte et enregistrez-le sous styles.css dans le dossier eco_initiatives.

Étape 2 : Liez le fichier CSS au HTML

Dans la zone depuis votre fichier index.html, ajoutez le lien vers le fichier CSS :

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

Copier après la connexion

: Lie la feuille de style CSS au document HTML.

Étape 3 : ajouter la police à partir de Google Fonts

Inclut la police "Roboto" de Google Fonts :

Dans votre navigateur, accédez à Google Fonts et recherchez la police "Roboto".
Sélectionnez les styles que vous souhaitez utiliser (par exemple Regular 400, Bold 700).
Copiez le lien fourni.

Dans votre , ajoutez :

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

Copier après la connexion

: Lie la source "Roboto" au document.

Étape 4 : Styles généraux

Dans styles.css, commencez par définir des styles généraux pour le corps du document :

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

Copier après la connexion

font-family : applique la police "Roboto" à l'ensemble du document.
background-color : Définissez la couleur d'arrière-plan de la page.
marge et remplissage : supprimez les marges et le remplissage par défaut.
color : Définit la couleur du texte principal.

Étape 5 : styliser l'en-tête

5.1 Ajouter un identifiant à l'en-tête dans le HTML

Dans index.html, ajoutez un attribut id à l'en-tête :

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

Copier après la connexion

id="header" : Attribue un identifiant unique à l'élément.

5.2 Appliquer des styles en CSS

Dans styles.css, ajoutez :

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

Copier après la connexion

#header : sélecteur d'ID qui applique des styles à l'élément avec id="header".
background-color et color : Définissez les couleurs d'arrière-plan et du texte.
padding : ajoute un espace interne autour du contenu.
text-align : centre le texte horizontalement.
En-tête #h1 : applique des styles à l'élément
à l'intérieur de l'en-tête.

Étape 6 : Styliser le menu de navigation

6.1 Ajouter un identifiant au menu dans le HTML

Dans index.html, ajoutez :

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

Copier après la connexion

6.2 Appliquer des styles en CSS

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

Copier après la connexion

affichage : flex : Nous utilisons Flexbox pour aligner les éléments horizontalement.
justify-content: center : Centre les éléments dans le conteneur.
list-style : none : Supprime des points de la liste.
text-decoration : none : Supprimez le soulignement des liens.
font-weight: bold : Rend le texte en gras.
Pseudo-classe :hover : Change le style des liens lorsque l'utilisateur les survole.

Étape 7 : Styliser le carrousel d'images

7.1 Ajouter un identifiant et des classes dans le HTML

Dans index.html, mettez à jour le carrousel :

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

Copier après la connexion

id="carousel" : Identifie la section carrousel.
class="carousel-container" : Classe pour le conteneur carrousel.
class="slide" : Classe pour chaque diapositive.
class="prev", class="next" : Classes pour les boutons de navigation.

7.2 Appliquer des styles en CSS

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

Copier après la connexion

.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>Sobre Nosotros</h2>
    <!-- Contenido -->
</section>

Copier après la connexion

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

Copier après la connexion

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>Registrar Nueva Iniciativa</h2>
    <!-- Formulario -->
</section>

Copier après la connexion

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

Copier après la connexion

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>Mapa de Iniciativas</h2>
    <div>
        <!-- Mapa -->
    </div>
</section>

Copier après la connexion

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

Copier après la connexion

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>&copy; 2024 Mapa de Iniciativas Ecológicas Locales</p>
</footer>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Guarda el archivo estilos.css.
Actualiza el navegador donde tienes abierto index.html para ver los cambios.
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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!