생태학적 이니셔티브 지도: CSS(2부)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

생태학적 이니셔티브 지도: CSS(2부)

DDD

Sep 19, 2024 am 08:16 AM

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

소개

이 튜토리얼에서는 CSS 스타일을 점진적으로 적용하여 HTML 페이지의 시각적 모양을 개선하는 방법을 배웁니다. 프로세스 전반에 걸쳐 HTML 요소에 선택기를 할당하고 단계별로 스타일을 지정하게 됩니다. 이 방법론을 통해 스타일이 다양한 요소에 어떻게 적용되고 웹사이트의 전반적인 디자인에 어떤 영향을 미치는지 이해할 수 있습니다.

1단계: CSS 파일 생성

텍스트 편집기에서 새 파일을 생성하고 eco_initiatives 폴더 안에 styles.css로 저장하세요.

2단계: CSS 파일을 HTML에 연결

index.html 파일에서 CSS 파일에 대한 링크를 추가하세요.

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

로그인 후 복사

: CSS 스타일 시트를 HTML 문서에 링크합니다.

3단계: Google Fonts에서 글꼴 추가

Google Fonts의 "Roboto" 글꼴 포함:

브라우저에서 Google Fonts로 이동하여 "Roboto" 글꼴을 검색하세요.
사용하고 싶은 스타일을 선택하세요(예: 일반 400, 볼드 700).
제공된 링크를 복사하세요.

에 다음을 추가하세요.

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

로그인 후 복사

: "Roboto" 소스를 문서에 링크합니다.

4단계: 일반 스타일

styles.css에서 문서 본문의 일반 스타일을 설정하는 것부터 시작하세요.

/* 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: 문서 전체에 "Roboto" 글꼴을 적용합니다.
ground-color: 페이지의 배경색을 설정합니다.
여백 및 패딩: 기본 여백과 패딩을 제거합니다.
color: 본문의 색상을 정의합니다.

5단계: 머리글 스타일 지정

5.1 HTML의 헤더에 ID 추가

index.html에서 헤더에 id 속성을 추가하세요.

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

로그인 후 복사

id="header": 요소에 고유 식별자를 할당합니다.

5.2 CSS에 스타일 적용

styles.css에 다음을 추가하세요.

/* 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="header"인 요소에 스타일을 적용하는 ID 선택기.
background-color 및 color: 배경색과 텍스트 색상을 정의합니다.
패딩: 콘텐츠 주위에 내부 공간을 추가합니다.
text-align: 텍스트를 가로 중앙에 배치합니다.
#h1 헤더:
헤더 내부.

6단계: 탐색 메뉴 스타일 지정

6.1 HTML의 메뉴에 ID 추가

index.html에 다음을 추가하세요.

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

로그인 후 복사

6.2 CSS에 스타일 적용

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

로그인 후 복사

display: flex: Flexbox를 사용하여 요소를 수평으로 정렬합니다.
justify-content: center: 컨테이너 내 요소를 중앙에 배치합니다.
list-style: none: 목록에서 포인트를 제거합니다.
텍스트 장식: 없음: 링크에서 밑줄을 제거합니다.
font-weight:bold: 텍스트를 굵게 만듭니다.
Pseudo-class :hover: 사용자가 링크 위로 마우스를 가져가면 링크 스타일이 변경됩니다.

7단계: 이미지 캐러셀 스타일 지정

7.1 HTML에 ID 및 클래스 추가

index.html에서 캐러셀을 업데이트합니다.

<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": 캐러셀 섹션을 식별합니다.
class="carousel-container": 캐러셀 컨테이너 클래스
class="slide": 각 슬라이드의 클래스입니다.
class="prev", class="next": 탐색 버튼 클래스

7.2 CSS에 스타일 적용

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.

위 내용은 생태학적 이니셔티브 지도: CSS(2부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.