Peta Inisiatif Ekologi: CSS (Bahagian 2)-tutorial css-php.cn

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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.

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