Maison >interface Web >tutoriel CSS >Carte des initiatives écologiques : CSS (Partie 2)

Carte des initiatives écologiques : CSS (Partie 2)

DDDoriginal: 2024-09-19 08:16:03558parcourir

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>

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

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

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>

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

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

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

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>

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

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

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>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>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>&copy; 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

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!

css html define auto class href display position margin padding border background transform flex

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un panier simple en HTMLCSS et JS avec intégration de paiementArticle suivant：Comment créer un panier simple en HTMLCSS et JS avec intégration de paiement

Articles Liés

Voir plus

Carte des initiatives écologiques : CSS (Partie 2)

Introduction

Étape 1 : Créer le fichier CSS

Étape 2 : Liez le fichier CSS au HTML

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

Étape 4 : Styles généraux

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

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

5.2 Appliquer des styles en CSS

à 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

6.2 Appliquer des styles en CSS

Étape 7 : Styliser le carrousel d'images

7.1 Ajouter un identifiant et des classes dans le HTML

7.2 Appliquer des styles en CSS

Paso 8: Estilizar el Contenido Principal

Sección Informativa

8.1 Añadir un ID en el HTML

8.2 Aplicar Estilos en CSS

Formulario de Registro

8.3 Añadir un ID en el HTML

8.4 Aplicar Estilos en CSS

Paso 9: Estilizar la Sección del Mapa

9.1 Añadir un ID en el HTML

9.2 Aplicar Estilos en CSS

Paso 10: Estilizar el Pie de Página

10.1 Añadir un ID en el HTML

10.2 Aplicar Estilos en CSS

Paso 11: Añadir Responsividad

Paso 12: Guardar y Probar los Estilos

Articles Liés