ESP32-Web-Server编程-CSS 基础 2

news2024/12/25 22:18:57

ESP32-Web-Server编程-CSS 基础 2

概述

如上节所述，可以使用外部 CSS 文件来修饰指定的 HTML 文件。

外部引用 - 使用外部 CSS 文件。

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，就可以通过更改一个文件来改变所有包含该 CSS 文件的 HTML 的外观。在 HTML 文件中使用 href=XXX，来导入对应的 CSS 文件到该文件。就像 C 语言的头文件、或者 python 语言的 import 一样。
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

网页内容不复杂时，可以使用内联样式，网页内容复杂的话，最好的方式是通过外部引用CSS文件。

需求及功能解析

与上节的后台代码类似，本节主要演示如何使用外部 CSS 文件，来让读者了解并体会其基本语法与作用。

如果你是第一次学习该系列的博客，请参考 A 博客来熟悉编程使用的方法。

示例解析

目录结构

├── CMakeLists.txt
├── main
│   ├── CMakeLists.txt
│   └── main.c                 User application
├── components
│   └── fs_image
		└── index.html
		└── css
			└── stylesheet.css
|	└── url_handlers
		└── url_handlers.c
		└── ...
└── README.md                  This is the file you are currently reading

目录结构主要包含主目录 main，以及组件目录 components. 与前述章节不同的是，在 components/fs_image/css 目录定义了一个 stylesheet.css 文件。该css 文件定义了一些样式类别：

.box { 
    background-color: rgb(66, 138, 148);
  }
  
  .mygrid { 
    max-width: 800px; 
    margin: 0 auto; 
    display: grid; 
    grid-gap: 2rem; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  html {
    font-family: Arial, Helvetica, sans-serif; 
    display: inline-block; 
    text-align: center;
  }
  
  p {
    font-size: 16px;
  }

然后在 components/fs_image/index.html 中通过外部引用关键字 link 引入该 css 文件，如此该 css 文件可以作用于该 HTML 中的元素：

<head>
    <title>IOT LAO WANG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>

读者可以删除或在屏蔽 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 这行代码，对比包含该代码和去掉该部分代码后的异同，增加对这部分内容的理解。

最后在后端代码中为了让浏览器加载到 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 这行代码时客户端浏览器能能正确从 web 服务器接收到对应的 css 文件，因此在 url_handlers/url_handlers.c 中增加对应的 handler 函数css_get_handler()：

/* Handler to respond with CSS.
 * Browsers expect to GET website icon at URI /stylesheet.css.*/
static esp_err_t css_get_handler(httpd_req_t *req)
{
    extern const unsigned char css_start[] asm("_binary_stylesheet_css_start");
    extern const unsigned char css_end[]   asm("_binary_stylesheet_css_end");
    const size_t css_size = (css_end - css_start);
    httpd_resp_set_type(req, "text/css");
    httpd_resp_send(req, (const char *)css_start, css_size);
    return ESP_OK;
}

httpd_uri_t httpd_uri_array[URL_HANDLERS_MAX] = {
    {"/", HTTP_GET, index_html_get_handler, NULL},
    {"/favicon.ico", HTTP_GET, favicon_get_handler, NULL},
    {"/stylesheet.css", HTTP_GET, css_get_handler, NULL}, // 浏览器请求时通过该函数发送 CSS 文件
};

示例输出：

在这里插入图片描述