-
Notifications
You must be signed in to change notification settings - Fork 20
/
cascading-style-sheets.html
257 lines (257 loc) · 29.6 KB
/
cascading-style-sheets.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Matt Makai">
<meta name="description" content="到 Full Stack Python 上学习如何使用级联样式表 (CSS) 来设计你的 Web 应用用户界面。">
<title>级联样式表 - Full Stack Python</title>
<link href="/f.css" rel="stylesheet">
<link rel="shortcut icon" href="/img/fsp-fav.png">
</head>
<body>
<div style="margin: 0 0 12px;background-color: #22B24C;">
<div class="container">
<p class="banner sans-font">
<a href="https://training.talkpython.fm/courses/explore_entrepreneurs/python-for-entrepreneurs-build-and-launch-your-online-business" style="color: #fff">创业家的 Python: 边创造你自己的生意边学 Python</a>!
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo-header-section">
<a href="/" style="text-decoration: none; border: none;"><img src="/img/logo-sm.png" class="logo-image" alt="Full Stack Python logo"></a>
<span class="logo-title"><a href="https://www.fullstackpython.com/">Full Stack Python</a></span>
</div>
<div class="sans-font">
<!--<a href="/blog.html" class="submenu-item-first">Blog</a> |
<a href="/books.html" class="submenu-item">Books</a> | -->
<a href="/table-of-contents.html">全部主题</a>
<span style="margin:0 12px 0 12px">|</span>
<a href="/blog.html">Blog</a>
<span style="margin:0 12px 0 12px">|</span>
<a href="/email.html">时讯</a>
<span style="margin:0 12px 0 12px">|</span>
<a href="https://twitter.com/fullstackpython">@fullstackpython</a>
<span style="margin:0 12px 0 12px">|</span>
<a href="https://www.facebook.com/fullstackpython">Facebook</a>
<span style="margin:0 12px 0 12px">|</span>
<a href="https://github.com/mattmakai/fullstackpython.com">源码</a>
</div> </div>
</div><div class="row">
<div class="col-md-8">
<h1>级联样式表 (CSS)</h1>
<p>级联样式表 (CSS) 文件包含了浏览器如何显示和布局 HTML 内容的规则。</p>
<h2>为什么说 CSS 是必需的？</h2>
<p>CSS 将 HTML 文件内容与其如何显示进行了分离。将内容与其应该如何呈现的规则分离的重要性主要在于：可以在多个页面中更加容易复用这些规则。相比于嵌在 HTML 文件中的样式内容，大型项目中使用 CSS 文件还更易于维护。</p>
<h2>CSS 是怎样从 Web 服务器上获取的？</h2>
<p>由 Web 服务器发送的 HTML 文件中包含有指向 CSS 文件（用于呈现内容）的引用地址。浏览器获取到 HTML 文件后，再请求 CSS 文件，如下面的截图所示，该图是从 Chrome Web 开发者工具中的网络流量标签页截取的。</p>
<p><img src="/img/css-chrome-dev-tools.jpg" width="100%" alt="Google Chrome Web 开发者工具显示了 CSS 是如何与 HTML 内容分离的。" class="technical-diagram" /></p>
<p>发送了一个对 fsp.css 文件的请求是因为 Full Stack Python 的 HTML 文件中包含了一个到 <code>theme/css/fsp.css</code> 的引用，如下面的显示源代码截图所示。</p>
<p><img src="/img/fsp-css-source.jpg" width="100%" alt="View source screenshot for the fsp.css file in index.html." class="technical-diagram" /></p>
<h2>CSS 预处理器</h2>
<p>CSS 预处理器将处理语言编译成纯 CSS 代码。CSS 处理语言通过增设变量、mixin、函数等语法结构来减少代码的重复度。有了这些额外的语法，使得设计人员使用这些基本的编程结构来编写可维护的前端代码变得可能。</p>
<ul>
<li>
<p><a href="http://sass-lang.com/">Sass</a> 是一款目前在设计界备受青睐的预处理器。Sass 具有很多高级的语言特性，因此被认为是功能最强大的 CSS 预处理器。</p>
</li>
<li>
<p><a href="http://lesscss.org/">LESS</a> 是一款与 Sass 不分上下的预处理器，由于 <a href="http://getbootstrap.com/">Bootstrap 框架</a> 是用 LESS 写的，LESS 现在变得越来越受欢迎了。</p>
</li>
<li><a href="http://learnboost.github.io/stylus/">Stylus</a> 经常被认为是排名第三的最受欢迎的 CSS 预处理语言。</li>
</ul>
<h3>CSS 预处理器资源</h3>
<ul>
<li>
<p>《Advanced Guide to HTML and CSS》这本书中有一章是专门讲 <a href="http://learn.shayhowe.com/advanced-html-css/preprocessors">预处理器</a>的，写的很好。</p>
</li>
<li>
<p><a href="http://css-tricks.com/sass-vs-less/">Sass 对比 LESS</a> 先是对应该选用哪个框架这个问题给出了个精简的回答，然后为那些想了解细节的用户给出来一份详实的答案。</p>
</li>
<li>
<p><a href="http://blog.teamtreehouse.com/how-to-choose-the-right-css-preprocessor">如何选择一个合适的 CSS 预处理器</a> 对 Sass、LESS 和 Stylus 进行了对比。</p>
</li>
<li>
<p><a href="http://css-tricks.com/musings-on-preprocessing/">对 CSS 预处理器的思考</a> 这篇文章中包含了一些很有用的建议，内容包括从如何在团队环境中使用预处理器到你该用什么应用程序来辅助你的工作流等等不一而足。</p>
</li>
</ul>
<h2>CSS 框架</h2>
<p>CSS 框架为 Web 应用的设计提供架构和样板文件。</p>
<ul>
<li>
<p><a href="http://getbootstrap.com/">Bootstrap</a></p>
</li>
<li>
<p><a href="http://foundation.zurb.com/">Foundation</a></p>
</li>
<li>
<p><a href="http://gumbyframework.com/">Gumby</a></p>
</li>
<li>
<p><a href="http://compass-style.org/">Compass</a></p>
</li>
<li>
<p><a href="http://www.profoundgrid.com/">Profound Grid</a></p>
</li>
<li>
<p><a href="http://www.getskeleton.com/">Skeleton</a></p>
</li>
<li>
<p><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></p>
</li>
</ul>
<h2>CSS 资源</h2>
<ul>
<li>
<p><a href="https://github.com/dypsilon/frontend-dev-bookmarks">前端开发书签</a> 是一个有关前端知识的最有价值的资料库之一，里面即包含 CSS 也包含 Javascript。</p>
</li>
<li>
<p><a href="https://github.com/vasanthk/css-refresher-notes">CSS 复习摘记</a> 对于之前一直是零星学习 CSS知识，现在又想填充知识空白的你来说相当有帮助。</p>
</li>
<li>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">Mozilla 开发者网络中的 CSS 页面</a> 上包含有 CSS 知识的丰富资源、教程和示例。</p>
</li>
<li>
<p><a href="http://alistapart.com/article/css-positioning-101">CSS 定位 101</a> 这份详细指南讲解了如何用 CSS 进行正确的元素定位。</p>
</li>
<li>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf">CSS3 小抄</a>。</p>
</li>
<li>
<p><a href="http://learnlayout.com/toc.html">学习 CSS 布局</a> 这篇简单的指南将 CSS 布局相关主题分成几个章节来讲解，因此你可以按步每次学一部分内容。</p>
</li>
<li>
<p><a href="https://developers.google.com/web/fundamentals/">Google Web 基础课程</a> 讲解了如何创建响应式的设计和高性能的网站。</p>
</li>
<li>
<p><a href="http://programming.oreilly.com/2014/04/tailoring-css-for-performance.html">CSS 性能调优</a> 是一篇很有意思的文章，因为很多开发人员不会考虑 CSS 的复杂性对浏览器渲染时间的影响。</p>
</li>
<li>
<p><a href="http://caniuse.com/">我能用 ...</a> 是一个兼容表格，显示了哪个版本的浏览器实现了哪些特定的 CSS 功能。</p>
</li>
</ul>
<h2>CSS 学习清单</h2>
<ol>
<li>
<p>创建一个只含基本元素的简单 HTML 文件。使用 <code>python -m SimpleHTTPServer</code> 命令来开启服务端进程。在 HTML 文件的 <code><head></code> 区域中创建一个 <code><style></style></code>。 在 style 元素中通过试验 CSS 来改变页面的外观。</p>
</li>
<li>
<p>研究 Bootstrap 或 Foundation 等前端框架，并将框架集成到 HTML 页面中。</p>
</li>
<li>
<p>练习该框架的网格系统、样式选项和定制功能，以便熟悉如何使用该框架。</p>
</li>
<li>
<p>将该框架应用到你的 Web 应用中并调整设计，直到实现比通用 HTML 更好的效果。</p>
</li>
</ol>
<h3>对你的应用设置好样式后，接下来你需要学习什么知识？</h3>
<div class="row">
<div class="col-md-4">
<div class="well select-next">
<a href="/web-design.html" class="btn btn-success btn-full"><svg width="28" height="30" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M576 576q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448h-1408v-192l320-320 160 160 512-512zm96-704h-1600q-13 0-22.5 9.5t-9.5 22.5v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5v-1216q0-13-9.5-22.5t-22.5-9.5zm160 32v1216q0 66-47 113t-113 47h-1600q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1600q66 0 113 47t47 113z" fill="#fff"/></svg></a>
<p class="under-btn">如何改善应用的用户界面的？</p> </div>
</div>
<div class="col-md-4">
<div class="well select-next">
<a href="/static-content.html" class="btn btn-success btn-full"><svg width="28" height="30" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z" fill="#fff"/></svg></a>
<p class="under-btn">我应该如何提供静态内容文件服务？</p> </div>
</div>
<div class="col-md-4">
<div class="well select-next">
<a href="/javascript.html" class="btn btn-success btn-full"><svg width="28" height="30" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z" fill="#fff"/></svg></a>
<p class="under-btn">在我的 Python Web 应用中如何使用 JavaScript？</p> </div>
</div>
</div><div id="mc_embed_signup">
<form action="//mattmakai.us2.list-manage.com/subscribe/post?u=b7e774f0c4f05dcebbfee183d&id=b22335388d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h4>在这里注册以便每月能收到一份邮件资料，内容包含本站的主要更新、教程和 Python 书籍的打折码等。</h4>
<div class="row">
<div class="col-md-9">
<input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="邮箱地址" required>
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" tabindex="-1" value=""></div>
</div>
<div class="col-md-3">
<div class="clear"><input type="submit" value="订阅" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue';"></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-offset-1 col-md-3" id="sidebar">
<div class="panel panel-success">
<div class="panel-body">
<a href="http://www.deploypython.com/"><img src="/img/sponsored/fsp-deployment-guide.png" alt="The Full Stack Python Guide to Deployments" width="100%"></a>
<p style="font-size: .8em; margin-top: 10px;">想找到一个完整的，一步一步的部署方案吗？请看<a href="http://www.deploypython.com/">《The Full Stack Python Guide to Deployments》</a>.
</p>
</div>
</div><div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-head">邮件获取更新</h3>
</div>
<div class="panel-body">
<div id="mc_embed_signup">
<form action="//mattmakai.us2.list-manage.com/subscribe/post?u=b7e774f0c4f05dcebbfee183d&id=b22335388d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h5>注册以便每月能收到一份邮件资料，内容包含本站的主要更新和 Python 教程。</h5>
<input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="邮箱地址" required>
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b7e774f0c4f05dcebbfee183d_b22335388d" tabindex="-1" value=""></div>
<input type="submit" value="订阅" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success" style="font-family: 'Helvetica Neue'; margin-top: 5px;">
</div>
</form>
</div>
</div>
</div><div class="panel" id="full-toc">
<div class="panel-heading">
<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">目录</a></h3>
</div>
<div class="list-group">
<a href="/introduction.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>1. 简介</a><a href="/learning-programming.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>学习编程</a><a href="/why-use-python.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>为什么用 Python？</a><a href="/python-2-or-3.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Python 2 还是 3？</a><a href="/enterprise-python.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>企业 Python</a><a href="/python-community.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Python Community</a><a href="/best-python-podcasts.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Best Python Podcasts</a><a href="/best-python-resources.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>最佳 Python 资源</a><a href="/best-python-videos.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>最佳 Python 视频</a><a href="/development-environments.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>2. 开发环境</a><a href="/vim.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Vim</a><a href="/emacs.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Emacs</a><a href="/python-programming-language.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>3. 核心语言</a><a href="/generators.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>生成器</a><a href="/comprehensions.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>推导式</a><a href="/web-development.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>4. Web 开发</a><a href="/web-frameworks.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Web 框架</a><a href="/django.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Django</a><a href="/flask.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Flask</a><a href="/bottle.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Bottle</a><a href="/pyramid.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Pyramid</a><a href="/morepath.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Morepath</a><a href="/other-web-frameworks.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>其它 Web 框架</a><a href="/web-design.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Web 设计</a><a href="/cascading-style-sheets.html" class="list-group-item smaller-item active" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>级联样式表 (CSS)</a><a href="/javascript.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>JavaScript</a><a href="/websockets.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>WebSockets</a><a href="/template-engines.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>模板引擎</a><a href="/web-application-security.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Web 应用安全</a><a href="/static-site-generator.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>静态网站生成器</a><a href="/jinja2.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Jinja2</a><a href="/data.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>5. 数据</a><a href="/databases.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>关系型数据库</a><a href="/no-sql-datastore.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>NoSQL 数据存储</a><a href="/object-relational-mappers-orms.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>对象关系映射器</a><a href="/postgresql.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>PostgreSQL</a><a href="/mysql.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>MySQL</a><a href="/sqlite.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>SQLite</a><a href="/application-programming-interfaces.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>6. Web APIs</a><a href="/api-integration.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>API 集成</a><a href="/api-creation.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>API 的创建</a><a href="/twilio.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Twilio</a><a href="/deployment.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>7. 部署</a><a href="/servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>服务器</a><a href="/platform-as-a-service.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>平台即服务（PaaS）</a><a href="/operating-systems.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>操作系统</a><a href="/web-servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Web 服务器</a><a href="/wsgi-servers.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>WSGI 服务器</a><a href="/source-control.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>源码控制</a><a href="/application-dependencies.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>应用程序依赖</a><a href="/static-content.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>静态内容</a><a href="/task-queues.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>任务队列</a><a href="/configuration-management.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>配置管理</a><a href="/continuous-integration.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>持续集成</a><a href="/logging.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>日志</a><a href="/monitoring.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>监控</a><a href="/web-analytics.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Web 分析</a><a href="/docker.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Docker</a><a href="/caching.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>缓存</a><a href="/microservices.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>微服务</a><a href="/devops.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>DevOps</a><a href="/nginx.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Nginx</a><a href="/apache-http-server.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Apache HTTP 服务器</a><a href="/caddy.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Caddy</a><a href="/green-unicorn-gunicorn.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Green Unicorn (Gunicorn)</a><a href="/ubuntu.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Ubuntu</a><a href="/pelican.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Pelican</a><a href="/lektor.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Lektor</a><a href="/mkdocs.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>MkDocs</a><a href="/testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>8. 测试</a><a href="/unit-testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>单元测试</a><a href="/integration-testing.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>集成测试</a><a href="/code-metrics.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>代码度量</a><a href="/debugging.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>调试</a><a href="/what-full-stack-means.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif;'>9. Meta</a><a href="/bots.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Bots</a><a href="/change-log.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Change Log</a><a href="/future-directions.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Future Directions</a><a href="/about-author.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>About the Author</a><a href="/sqlalchemy.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>SQLAlchemy</a><a href="/peewee.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",sans-serif; padding-left:27px'>Peewee</a> <a href="/table-of-contents.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",san-serif;background-color:#22B24C; color: #fff;'>...或者<span style="border-bottom: 1px dotted;">显示全部目录内容</span>.</a>
</div>
</div> <div class="panel">
<div class="panel-heading"><h3 class="panel-head">级联样式表</h3></div>
<div class="panel-body">
重要的更新内容会通过 Twitter 账号<a href="https://twitter.com/fullstackpython">@fullstackpython</a>发布。
<hr/>
需要更加详细的教程吗？请看
<a href="http://www.deploypython.com/">《The Full Stack Python Guide to Deployments》。</a>
</div>
</div>
<div class="panel" id="mobile-toc">
<div class="panel-heading">
<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Chapters</a></h3>
</div>
<div class="list-group">
<a href="/introduction.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>1. 简介</a><a href="/development-environments.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>2. 开发环境</a><a href="/python-programming-language.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>3. 核心语言</a><a href="/web-development.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>4. Web 开发</a> <a href="/cascading-style-sheets.html" class="list-group-item smaller-item active" style='font-family: "Helvetica Neue",sans-serif;'>» 级联样式表 (CSS)</a>
<a href="/data.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>5. 数据</a><a href="/application-programming-interfaces.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>6. Web APIs</a><a href="/deployment.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>7. 部署</a><a href="/testing.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>8. 测试</a><a href="/what-full-stack-means.html" class="list-group-item smaller-item " style='font-family: "Helvetica Neue",sans-serif;'>9. Meta</a> <a href="/table-of-contents.html" class="list-group-item smaller-item" style='font-family: "Helvetica Neue",san-serif;background-color:#22B24C; color: #fff;'>...or <span style="border-bottom: 1px dotted;">view the full table of contents</span>.</a>
</div>
</div></div></div>
<hr/>
</div>
<div class="container">
<div class="footer pull-right">
This site is based on <a href="https://github.com/mattmakai">Matt Makai</a>'s project <a href="https://github.com/mattmakai/fullstackpython.com">Full Stack Python</a>, thanks for his excellent work!
</div>
</div>
<div class="container">
<div class="footer pull-right" style="text-align:right; font-size:85%;">
<p>此网站由 <a href="https://github.com/haiiiiiyun">@haiiiiiyun</a> 和 <a href="https://github.com/haiiiiiyun/fullstackpython.cn/graphs/contributors">开源爱好者们</a> 共同维护。
若发现错误或想贡献，请访问： <a href="https://github.com/haiiiiiyun/fullstackpython.cn/">Github fullstackpython.cn 项目</a>
</p>
</div>
</div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-77551377-2', 'auto');
ga('send', 'pageview');
</script><script type='text/javascript'>
var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, {'hitCallback': function () { document.location = url; } }); }
</script>
</body>
</html>