本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑 0 [8 K. t+ p9 R( B, D
9 e1 L- K0 Q% D【REVIEW】：我的上一篇（第2篇）帖子☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css5 D7 R/ Q" u4 i' G& g" e, Q
↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩
* d* h9 Z2 F: t9 j" \! Z! g p5 L* C6 }) |5 |! l
* D+ y8 x$ |8 `! j* ^
4 {$ j7 V. t/ d. p% J一、【背景】：5 M* {) Q! A2 v) N9 k3 u6 ]- |5 A
1、论坛里有些词典仅有mdx文件而没有css文件（或者虽然既有mdx文件又有mdd文件，但mdd文件中并不包含css文件），此类词典的排版样式是在文本编辑器里用代码写成的（例如使用<br>换行、<b>加粗、<table>做背景或分割栏）；这种排版的方式的缺点可能有2个——
" ], U7 A4 ]! Y ①使用该方式进行较丰富的样式排版时，操作可能更复杂、代码可能更多；
; b+ p8 |0 F0 E6 |2 d4 I ②后期或他人修改该方式做出的样式排版时，工作量可能更大、出错率可能更高。（*注：上面2个缺点的反面可能恰恰就是使用css文件排版的优点）( X, j& K% h2 O7 J+ e
2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。（可能是因为这些都是最基础的HTML5、CSS知识）
7 s8 L9 J5 ~# F, n1 i) i 3、我和部分小伙伴缺乏HTML5和css相关基础知识，导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过，并且词典制作教程多数未涉及从零开始创建css（部分前辈们发布的css教程多数都聚焦于对已有css的修改上，故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴）；此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”（e.g.对于很多操作步骤和正则表达式，可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容，导致我们对于mdx源文件、css文件中的诸多代码一知半解。
Y2 u2 S( q; H4 m
7 l# m7 @1 E4 F二、【目的】：: }1 W0 a0 {; c- A1 F
分享css文件的创建方法——为没有css文件的mdx词典创建css文件；并对mdx源文件进行适当修改，使其能够适配css文件。
; b. b1 Y6 {& l: R( w# a$ D$ K N6 b ?5 n9 ^$ Y
三、【方法】：
+ w6 R! h7 v2 [; b& Y, ^! I9 n% N 1、知识/认识——
/ G0 [/ c6 D" R. T; d& L5 |8 v 认真学习HTML5和CSS的基础知识（http://www.w3school.com.cn/html5/index.asp、http://www.w3school.com.cn/css/index.asp。esp.这两个网站中关于HTML5标签等章节的内容；CSS的基础语法、高级语法、id选择器、类选择器与CSS创建 等章节的内容）。这可以帮助我们理解mdx源文件与css文件中代码的含义及用法。
, t" ~$ |% A- l) I6 `) P$ Q/ v
0 P8 d( x; h( n& D 2、行动/实践（从下面的实例出发）——
. m& g& V+ M1 h7 H. c% Y 某词典mdx源文件（.txt文本文档）中medicine这个词条的代码是：- medicine
Q& ~/ R) E: f% `) A* N - <b>medicine</b><br>the study and treatment of diseases and injuries
$ k2 Q6 I; c% U! B1 V% V, g9 v - </>
+ c, B+ K' e% s( r （1）新建一个文本文档（后缀为.txt）。之后，在该文本文档中输入下面的代码（整个文本文档中只需要输入这几行代码就行，无需输入<html><head><style>等其他内容）：- .citiao {
3 R. H; t% t+ r" g1 R$ l8 T9 T - font-weight: 900;* |5 m1 B- ^- C& ]) j; h) b& y2 F
- font-size: 130%;- A( d6 p' N5 q3 ^ o& n# W: s
- }
6 V8 B; O( A+ A* [$ q
E- v# x0 r8 o# R& D3 h- .shiyi {
! p u6 ?- A. Y* Z* } - font-weight: bold;3 \- X- \! Y# m4 D5 L4 {/ z
- background-color: #eeeeee;
: S; j& H2 s8 ~% l' W p1 M' H. J& p - }
: f! A4 T! }, Q8 ~3 u6 Y% o5 B" d （2）使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件（.txt文本文档）。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种：
& K: j( j( u7 p6 G; n ①（适用于各种词典）：
8 C- Q3 z9 C) N: k- k6 X! X. s1 `- medicine3 ~! m3 [8 \6 P2 f# f. S1 N/ F
- <link rel="stylesheet" type="text/css" href="paiban.css"><div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>
- e. v; b# ?5 `: z! s& l# S - </>
- medicine; K; _+ d$ b. j
- <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>5 j7 m8 }& n: {7 Q- w. b" y9 g
- </>
& S+ x+ D% \* J, s
（3）使用MdxBuilder等软件将mdx源文件（.txt文本文档）打包成mdx文件（详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。之后，将制作好的 mdx词典文件 & css文件 放在同一级目录下，则可使用。# X4 `/ M! S1 V1 G- ~; c
*注：最好是单独建立一个文件夹，文件夹里只存放上述的2个文件（mdx词典文件 & css文件）；其原因参见☞[经验交流] 解决欧路词典样式排版错乱 外部CSS无法加载的问题。此外，如果在步骤（2）中采用了代码①，则css文件名不能再更改（也就是说，css文件名必须和mdx源文件代码<link rel="stylesheet" type="text/css" href="paiban.css">中链接的css文件名保持相同）；如果在步骤（2）中采用了代码②（使用欧路词典），则css文件名可随意更改（其原因参见 [求助] 如何从头开始创建css？部分词典只有mdx而没有css 2楼@simonfire前辈的解答）。
. r; e% q5 q: @8 C
, y, K8 n6 K7 b+ ^# j 3、上述方法可归纳为——' Z; j- T6 Q2 w- c2 H
（1）创建css文件，定义选择器的名称、属性、值；（相关知识参见下图或：http://www.w3school.com.cn/css/css_syntax.asp）
4 F0 P- z: t3 T; @, H/ ?' ]8 ] （2）使用文本编辑软件的查找-替换功能 & 正则表达式，在mdx源文件中欲修改词条body的行首加上<link rel="stylesheet" type="text/css" href="CSS文件名称.css">、在mdx源文件中欲修改词条的欲修改样式的内容前加上<span class=“选择器名称”>、在mdx源文件中欲修改词条的欲修改样式的内容后加上</span>。（前述的span也可更换为div或p或其他合适的html5标签。参见：http://www.w3school.com.cn/html5/html5_reference.asp）
: o4 R( C$ G" G4 V" G5 S3 H6 _- p （3）遇到问题多使用百度、论坛等各种工具查找答案。( s& a" s; g1 D `3 a' @8 R* G1 u
（4）实践→认识→再实践→再认识（如@oversky所言，“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”），在反复练习制作词典和css文件的过程中学习和发现。
9 T" w2 m/ M! e0 B# H+ ]" D, `3 w# B
四、【致谢】：8 y$ u S3 V3 P2 |* \: a
1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误（参见☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css）；
8 a$ R6 u7 I) u6 h 2、感谢@Hugh（[教程] 【图文】手把手教你[转换]+[排版] MDX格式词）、@Oeasy（[教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025]）对词典制作的指导；& T. i1 m: X5 [; p
3、感谢@Yyang.的css样式的教学（参见☞[教程] 超级零基础小小小白Css修改教程贴）；
" i, \! n* L9 c3 K4 n 4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利；
% f2 i- @9 m6 q4 G$ y 5、感谢并期待大家指正我的错误。4 }9 {3 H% Z/ B9 h
. |" x4 p+ D. X. P
5 f, K+ z c) P2 t' S
: L7 Y$ `7 n8 Z↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ 0 X7 T: Z9 L- V$ t! M
【PREVIEW】：我的下一篇（第4篇）帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 | 
发表于 2018-11-3 15:38:55
发表于 2018-11-3 16:57:08
! w/ |8 ~, ?% I; i' c: U
: k9 |+ J/ @5 ]% b b( s
楼主
