Karte der ökologischen Initiativen: CSS (Teil 2)-CSS-Tutorial-php.cn

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

Einführung

In diesem Tutorial erfahren Sie, wie Sie das visuelle Erscheinungsbild Ihrer HTML-Seite verbessern, indem Sie schrittweise CSS-Stile anwenden. Im Laufe des Prozesses weisen Sie den Elementen Ihres HTML Selektoren zu und formatieren sie Schritt für Schritt. Mit dieser Methodik können Sie verstehen, wie Stile auf verschiedene Elemente angewendet werden und wie sie das Gesamtdesign Ihrer Website beeinflussen.

Schritt 1: Erstellen Sie die CSS-Datei

Erstellen Sie eine neue Datei in Ihrem Texteditor und speichern Sie sie als „styles.css“ im Ordner „eco_initiatives“.

Schritt 2: Verknüpfen Sie die CSS-Datei mit dem HTML

Im Fügen Sie aus Ihrer index.html-Datei den Link zur CSS-Datei hinzu:

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

Nach dem Login kopieren

: Verknüpft das CSS-Stylesheet mit dem HTML-Dokument.

Schritt 3: Fügen Sie die Schriftart von Google Fonts hinzu

Enthält die Schriftart „Roboto“ von Google Fonts:

Gehen Sie in Ihrem Browser zu Google Fonts und suchen Sie nach der Schriftart „Roboto“.
Wählen Sie die Stile aus, die Sie verwenden möchten (z. B. Normal 400, Fett 700).
Kopieren Sie den bereitgestellten Link.

Fügen Sie in Ihrem Folgendes hinzu:

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

Nach dem Login kopieren

: Verknüpft die „Roboto“-Quelle mit dem Dokument.

Schritt 4: Allgemeine Stile

In der Datei „styles.css“ legen Sie zunächst allgemeine Stile für den Hauptteil des Dokuments fest:

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

Nach dem Login kopieren

Schriftfamilie: Wendet die Schriftart „Roboto“ auf das gesamte Dokument an.
Hintergrundfarbe: Legen Sie die Hintergrundfarbe der Seite fest.
Rand und Polsterung: Entfernen Sie die Standardränder und Polsterung.
Farbe: Definiert die Farbe des Haupttextes.

Schritt 5: Gestalten Sie die Kopfzeile

5.1 Fügen Sie dem Header im HTML eine ID hinzu

Fügen Sie in index.html ein ID-Attribut zum Header hinzu:

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

Nach dem Login kopieren

id="header": Weist dem Element eine eindeutige Kennung zu.

5.2 Stile in CSS anwenden

Fügen Sie in der Datei „styles.css“ Folgendes hinzu:

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

Nach dem Login kopieren

#header: ID-Selektor, der Stile auf das Element mit id="header" anwendet.
Hintergrundfarbe und Farbe: Definieren Sie die Hintergrund- und Textfarben.
Polsterung: Fügt internen Raum um den Inhalt hinzu.
text-align: Zentriert den Text horizontal.
#h1-Header: Wendet Stile auf den
-Header an. im Header.

Schritt 6: Gestalten Sie das Navigationsmenü

6.1 Fügen Sie dem Menü im HTML eine ID hinzu

Fügen Sie in index.html Folgendes hinzu:

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

Nach dem Login kopieren

6.2 Stile in CSS anwenden

In style.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 */
}

Nach dem Login kopieren

Anzeige: Flex: Wir verwenden Flexbox, um die Elemente horizontal auszurichten.
justify-content: center: Zentriert die Elemente innerhalb des Containers.
list-style: none: Entfernt Punkte aus der Liste.
text-decoration: none: Unterstreichungen von Links entfernen.
Schriftstärke: fett: Macht den Text fett.
Pseudoklasse :hover: Ändert den Stil von Links, wenn der Benutzer mit der Maus darüber fährt.

Schritt 7: Gestalten Sie das Bildkarussell

7.1 Fügen Sie eine ID und Klassen im HTML hinzu

Aktualisieren Sie in index.html das Karussell:

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

Nach dem Login kopieren

id="carousel": Identifiziert den Karussellabschnitt.
class="carousel-container": Klasse für den Karussellcontainer.
class="slide": Klasse für jede Folie.
class="prev", class="next": Klassen für Navigationsschaltflächen.

7.2 Stile in CSS anwenden

In style.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);
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonKarte der ökologischen Initiativen: CSS (Teil 2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!