cari

Rumah >hujung hadapan web >tutorial css >Peta Inisiatif Ekologi: CSS (Bahagian 2)

Peta Inisiatif Ekologi: CSS (Bahagian 2)

DDD
DDDasal
2024-09-19 08:16:03558semak imbas

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

pengenalan

Dalam tutorial ini, anda akan belajar cara menambah baik penampilan visual halaman HTML anda dengan menggunakan gaya CSS secara beransur-ansur. Sepanjang proses, anda akan menetapkan pemilih kepada elemen HTML anda dan menggayakannya langkah demi langkah. Metodologi ini akan membolehkan anda memahami cara gaya digunakan pada elemen yang berbeza dan cara ia mempengaruhi reka bentuk keseluruhan tapak web anda.

Langkah 1: Buat Fail CSS

  • Buat fail baharu dalam editor teks anda dan simpan sebagai styles.css dalam folder eco_initiatives.

Langkah 2: Pautkan Fail CSS ke HTML

Dalam daripada fail index.html anda, tambahkan pautan ke fail CSS:

<head>
    <!-- Metadatos -->
    <link rel="stylesheet" href="estilos.css">
</head>
  • : Memautkan helaian gaya CSS ke dokumen HTML.

Langkah 3: Tambahkan Fon daripada Google Font

Termasuk fon "Roboto" daripada Google Font:

  • Dalam penyemak imbas anda, pergi ke Google Fonts dan cari fon "Roboto".
  • Pilih gaya yang anda mahu gunakan (cth. Biasa 400, Tebal 700).
  • Salin pautan yang disediakan.

Dalam anda, tambahkan:

<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>
  • : Memautkan sumber "Roboto" ke dokumen.

Langkah 4: Gaya Umum

Dalam styles.css, mulakan dengan menetapkan gaya umum untuk badan dokumen:

/* 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: Menggunakan fon "Roboto" pada keseluruhan dokumen.
  • warna latar belakang: Tetapkan warna latar belakang halaman.
  • margin dan padding: Alih keluar margin lalai dan padding.
  • warna: Mentakrifkan warna teks utama.

Langkah 5: Gayakan Pengepala

5.1 Tambah ID pada Pengepala dalam HTML

Dalam index.html, tambahkan atribut id pada pengepala:

<header id="encabezado">
    <h1>Mapa de Iniciativas Ecológicas Locales</h1>
</header>
  • id="header": Berikan pengecam unik kepada elemen.

5.2 Gunakan Gaya dalam CSS

Dalam styles.css, tambah:

/* 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: Pemilih ID yang menggunakan gaya pada elemen dengan id="header".
  • warna latar belakang dan warna: Tentukan warna latar belakang dan teks.
  • lapik: Menambah ruang dalaman di sekeliling kandungan.
  • text-align: Memusatkan teks secara mendatar.
  • Pengepala #h1: Menggunakan gaya pada

    di dalam pengepala.

Langkah 6: Gayakan Menu Navigasi

6.1 Tambah ID pada Menu dalam HTML

Dalam index.html, tambah:

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

6.2 Gunakan Gaya dalam CSS

Dalam 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 */
}
  • paparan: flex: Kami menggunakan Flexbox untuk menjajarkan elemen secara mendatar.
  • justify-content: center: Pusatkan elemen dalam bekas.
  • gaya senarai: tiada: Mengalih keluar mata daripada senarai.
  • hiasan teks: tiada: Alih keluar garis bawah daripada pautan.
  • berat fon: tebal: Menjadikan teks tebal.
  • Pseudo-class :hover: Mengubah gaya pautan apabila pengguna melayang di atasnya.

Langkah 7: Gayakan Karusel Imej

7.1 Tambah ID dan Kelas dalam HTML

Dalam index.html, kemas kini karusel:

<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": Mengenal pasti bahagian karusel.
  • class="carousel-container": Kelas untuk bekas karusel.
  • class="slide": Kelas untuk setiap slaid.
  • class="prev", class="next": Kelas untuk butang navigasi.

7.2 Gunakan Gaya dalam CSS

Dalam 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

  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.

Atas ialah kandungan terperinci Peta Inisiatif Ekologi: CSS (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html define auto class href display position margin padding border background transform flex
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cara membuat troli beli-belah mudah dalam HTMLCSSand JS dengan penyepaduan PembayaranArtikel seterusnya：Cara membuat troli beli-belah mudah dalam HTMLCSSand JS dengan penyepaduan Pembayaran

Artikel berkaitan

Lihat lagi