绿色倡议地图：CSS（第 2 部分）-css教程-PHP中文网

绿色倡议地图：css（第 2 部分）

介绍

在本教程中，您将学习如何通过逐步应用 css 样式来改善 html 页面的视觉外观。在整个过程中，您将向 html 元素分配选择器并逐步设置它们的样式。这种方法将让您了解如何将样式应用于不同的元素以及它们如何影响您网站的整体设计。

第 1 步：创建 css 文件

在文本编辑器中创建一个新文件并将其另存为eco_initiatives文件夹中的styles.css。

第 2 步：将 css 文件链接到 html

在index.html文件的<head>中，添加css文件的链接：

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

登录后复制

<link rel="stylesheet" href="estilos.css">：将 css 样式表链接到 html 文档。

第 3 步：添加 google fonts 中的字体

包括来自 google fonts 的字体“roboto”：

在浏览器中，转到 google fonts 并搜索字体“roboto”。
选择您想要使用的样式（例如常规 400、粗体 700）。
复制提供的链接。

在您的 <head> 中，添加：

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

登录后复制

<link href="..." rel="stylesheet">：将“roboto”源链接到文档。

第四步：通用样式

在 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”字体应用于整个文档。
background-color：设置页面的背景颜色。
边距和填充：删除默认的边距和填充。
颜色：定义正文的颜色。

第 5 步：设置标题样式

5.1 在 html 的 header 中添加 id

在index.html中，在header中添加一个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：将文本水平居中。
#header h1：将样式应用于标头内的 <h1>。

第 6 步：设置导航菜单的样式

6.1 在 html 中向菜单添加 id

在index.html中，添加：

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

登录后复制

6.2 在 css 中应用样式

在 styles.css 中：

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

/* 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：使文本加粗。
伪类 :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：最初隐藏所有幻灯片。
.slide:first-child：显示第一张幻灯片。
位置：绝对：将按钮放置在图像上。
变换：translatey(-50%)：按钮垂直居中。
border-radius：将图像和按钮的角变圆。
rgba的使用：创建具有透明度的颜色。

第 8 步：设置主要内容的样式

信息部分

8.1 在 html 中添加 id

在index.html中：

<section id="informacion">
    <h2>sobre nosotros</h2>
    <!-- contenido -->
</section>

登录后复制

8.2 在 css 中应用样式

在 styles.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;
}

登录后复制

行高：增加行与行之间的间距，以便于阅读。
max-width 和 margin: auto：控制宽度并使内容居中。

登记表

8.3 在 html 中添加 id

在index.html中：

<section id="registro">
    <h2>registrar nueva iniciativa</h2>
    <!-- formulario -->
</section>

登录后复制

8.4 在 css 中应用样式

在 styles.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;
}

登录后复制

表单样式：我们创建带有阴影和圆边的白色背景。
输入字段：我们对字段进行样式设计，使其有吸引力且易于使用。
伪类：焦点：当用户单击字段时更改字段的样式。
提交按钮：悬停时突出显示并改变颜色。

第 9 步：设置地图部分的样式

9.1 在 html 中添加 id

在index.html中：

<section id="mapa">
    <h2>mapa de iniciativas</h2>
    <div>
        <!-- mapa -->
    </div>
</section>

登录后复制

9.2 在 css 中应用样式

在 styles.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;
}

登录后复制

与页面其余部分风格一致。
height：定义地图容器的高度。

第10步：设置页脚样式

10.1 在 html 中添加 id

在index.html中：

<footer id="pie-de-pagina">
    <p>&copy; 2024 mapa de iniciativas ecológicas locales</p>
</footer>

登录后复制

10.2 在 css 中应用样式

在 styles.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;
}

登录后复制

创建有吸引力的页脚并与整体设计保持一致。

第 11 步：添加响应能力

在 styles.css 中，添加：

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

登录后复制