css
CSS（层叠样式表）是一种用于描述网页样式和布局的样式表语言。它用于控制网页元素的外观和排列，包括字体、颜色、大小、边距、位置等。通过CSS，可以使网页更具吸引力、易读性和用户友好性。以下是CSS的基本概念和常见应用：
基本概念：
-
选择器（Selectors）:
- 选择器用于选择要应用样式的HTML元素。常见的选择器包括标签选择器（如
h1、p）、类选择器（如.class-name）和ID选择器（如#id-name）等。
- 选择器用于选择要应用样式的HTML元素。常见的选择器包括标签选择器（如
-
属性（Properties）:
- 属性定义了要应用于选定元素的样式。例如，
color属性用于定义文本颜色，font-size属性用于定义字体大小。
- 属性定义了要应用于选定元素的样式。例如，
-
值（Values）:
- 值指定了属性的具体设置。例如，
color属性的值可以是颜色名称（如red）、十六进制值（如#ff0000）或RGB值（如rgb(255, 0, 0)）。
- 值指定了属性的具体设置。例如，
-
盒模型（Box Model）:
- 盒模型描述了网页元素在页面上的布局。它由内容区域、内边距、边框和外边距组成，这些属性可以通过CSS设置来控制元素的大小和间距。
-
层叠（Cascading）:
- 层叠指的是多个样式规则应用于同一个元素时的处理方式。通过层叠规则，可以确定哪些样式规则具有更高的优先级，并最终应用于元素。
基本应用：
-
样式表链接（Linking）:
- 将CSS样式表链接到HTML文件中。可以通过
<link>标签将外部CSS文件链接到HTML文件，也可以在HTML文件中使用<style>标签嵌入CSS样式。
<!-- 外部样式表链接 --> <link rel="stylesheet" type="text/css" href="styles.css"><!-- 内部样式表 --> <style>/* CSS样式 */ </style> - 将CSS样式表链接到HTML文件中。可以通过
-
选择器和属性设置:
- 使用选择器选择要样式化的元素，并设置相应的属性和值。
/* 标签选择器 */ h1 {color: red;font-size: 24px; }/* 类选择器 */ .highlight {background-color: yellow; }/* ID选择器 */ #header {font-weight: bold; } -
盒模型控制:
- 使用
width、height、padding、margin和border等属性控制元素的尺寸、内边距、外边距和边框。
/* 盒模型属性设置 */ .box {width: 200px;height: 100px;padding: 10px;margin: 20px;border: 1px solid black; } - 使用
-
伪类和伪元素:
- 伪类和伪元素用于向特定的元素添加特定的样式，例如悬停状态、访问链接状态、首字母样式等。
/* 鼠标悬停时改变链接颜色 */ a:hover {color: blue; }/* 添加首字母样式 */ p:first-letter {font-size: 24px;color: red; }
以上是CSS的基本概念和常见应用。通过CSS，可以实现网页的样式化和布局，使其具有吸引力和可读性。深入了解CSS可以帮助你更好地设计和优化网页。
例子
python
from flask import Flask,render_template, send_from_directoryapp = Flask(__name__,template_folder='html',static_folder='html/static')#定义html文件路径，以及css路径#css 基本例子
@app.route('/csstest/')
def csstest():return render_template('csstest.html')if __name__ == '__main__':# 绑定到指定的IP地址和端口app.run(host='0.0.0.0', port=1024, debug=True)
html
<!DOCTYPE html>
<html>
<head><title>CSS 示例页面</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='csstest.css') }}">
</head>
<body><h1>CSS 示例页面</h1><p class="highlight">这是一个段落，应用了类选择器的样式。</p><p id="unique">这是一个段落，应用了ID选择器的样式。</p><div class="box">这是一个盒子，展示了盒模型的应用。</div><a href="#">这是一个链接，悬停时会改变颜色。</a>
</body>
</html>
CSS
/* 标签选择器 */
h1 {color: blue;text-align: center;
}/* 类选择器 */
.highlight {background-color: yellow;font-size: 18px;
}/* ID选择器 */
#unique {color: green;font-weight: bold;
}/* 盒模型 */
.box {width: 200px;height: 100px;padding: 10px;margin: 20px auto;border: 2px solid black;text-align: center;line-height: 100px; /* 垂直居中对齐 */
}/* 伪类 */
a:hover {color: red;
}
_编写简单的FreeRTOS任务例程)
