登录
首页 >  文章 >  前端

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

来源：dev.to

时间：2024-09-19 08:18:40 119浏览 收藏

从现在开始，我们要努力学习啦！今天我给大家带来《绿色倡议地图：CSS（第 2 部分）》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

绿色倡议地图：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 中：

/* 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;
    }
}
  • 媒体查询：当屏幕宽度小于或等于768px时应用样式。
  • 移动设置：提高小屏幕上的可用性。

第12步：保存并测试样式

  1. 保存文件 styles.css.
  2. 刷新浏览器打开index.html以查看更改。
  3. 检查样式应用是否正确，并且设计看起来现代且有吸引力。

恭喜！您已经完成了网站的样式设计，学习了如何使用选择器并了解它们如何影响设计。现在您拥有了一个功能齐全且美观的网站。

好了，本文到此结束，带大家了解了《绿色倡议地图：CSS（第 2 部分）》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>