Heim > Artikel > Web-Frontend > Karte der ökologischen Initiativen: CSS (Teil 2)

Karte der ökologischen Initiativen: CSS (Teil 2)

DDDOriginal: 2024-09-19 08:16:03543Durchsuche

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>

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

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

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>

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

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

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

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>

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

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

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!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie einen einfachen Warenkorb in HTMLCSS und JS mit ZahlungsintegrationNächster Artikel：So erstellen Sie einen einfachen Warenkorb in HTMLCSS und JS mit Zahlungsintegration

In Verbindung stehende Artikel

Mehr sehen

Karte der ökologischen Initiativen: CSS (Teil 2)

Einführung

Schritt 1: Erstellen Sie die CSS-Datei

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

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

Schritt 4: Allgemeine Stile

Schritt 5: Gestalten Sie die Kopfzeile

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

5.2 Stile in CSS anwenden

-Header an. im Header.

Schritt 6: Gestalten Sie das Navigationsmenü

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

6.2 Stile in CSS anwenden

Schritt 7: Gestalten Sie das Bildkarussell

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

7.2 Stile in CSS anwenden

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

In Verbindung stehende Artikel