本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑
- d8 V+ D! S% n0 e- p# E, u3 ~. b: \! i* b1 B
【REVIEW】：我的上一篇（第2篇）帖子☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css
: B( N8 ?/ J' ^0 a7 u↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩
0 |) f2 u! f; y
) F2 Z5 u! u0 c* u3 \" W ) Z$ l) |7 i' |3 z/ f
$ ~; e7 a- e( q* v6 W一、【背景】：
5 Z# U1 b# B4 ^4 M; Z, O 1、论坛里有些词典仅有mdx文件而没有css文件（或者虽然既有mdx文件又有mdd文件，但mdd文件中并不包含css文件），此类词典的排版样式是在文本编辑器里用代码写成的（例如使用<br>换行、<b>加粗、<table>做背景或分割栏）；这种排版的方式的缺点可能有2个——
6 j+ O4 j, C( h+ B- L ①使用该方式进行较丰富的样式排版时，操作可能更复杂、代码可能更多；" S# n' d5 i; x; V+ E
②后期或他人修改该方式做出的样式排版时，工作量可能更大、出错率可能更高。（*注：上面2个缺点的反面可能恰恰就是使用css文件排版的优点）/ `* i; V, L6 q' N; A. m$ }
2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。（可能是因为这些都是最基础的HTML5、CSS知识）7 T* o. I. H0 P1 U% E3 K! r
3、我和部分小伙伴缺乏HTML5和css相关基础知识，导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过，并且词典制作教程多数未涉及从零开始创建css（部分前辈们发布的css教程多数都聚焦于对已有css的修改上，故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴）；此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”（e.g.对于很多操作步骤和正则表达式，可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容，导致我们对于mdx源文件、css文件中的诸多代码一知半解。$ ]6 B* ]# ~0 T& Y! T. u
+ I& x, c5 m4 b# y% n
二、【目的】：# R }/ i L' m0 V. l
分享css文件的创建方法——为没有css文件的mdx词典创建css文件；并对mdx源文件进行适当修改，使其能够适配css文件。3 |; T, M) F* C# z! S
# T# v2 r( @0 Y* H* ~ Z) S9 P* V
三、【方法】：; p5 I- {8 x% m. p( l" N; L
1、知识/认识——
- I9 l8 P4 r' r/ \- O& P 认真学习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文件中代码的含义及用法。
. o8 b2 M) @7 A& I# C0 e
; _# ?- e3 W0 O2 p 2、行动/实践（从下面的实例出发）——' |1 T3 O) k2 y6 w
某词典mdx源文件（.txt文本文档）中medicine这个词条的代码是：- medicine
! @1 }6 N% @6 q& p - <b>medicine</b><br>the study and treatment of diseases and injuries) Q2 ?8 e9 X! J T1 M
- </>
9 x( K+ x$ h/ ^% E. e/ e （1）新建一个文本文档（后缀为.txt）。之后，在该文本文档中输入下面的代码（整个文本文档中只需要输入这几行代码就行，无需输入<html><head><style>等其他内容）：- .citiao {3 M! z. a% Y e
- font-weight: 900;
' _3 k9 O8 k5 l$ H# P$ h+ t, D - font-size: 130%;
$ j4 D' z; M/ l' N. S. H! y! p - }4 m, n" f. E' a9 e7 P, _
2 T3 g+ z9 U; x( U2 k7 z3 ?- .shiyi {
& r' ?$ T$ |6 w- w2 L - font-weight: bold;
1 V! a V v% c. @+ B; V6 a - background-color: #eeeeee;1 y! P$ C( G+ I8 ~7 w3 T7 `) X& }
- }
0 B+ ~ L% _% k0 B
（2）使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件（.txt文本文档）。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种：
$ M+ Y7 e& j3 k K ①（适用于各种词典）：* G2 ~9 A/ F8 Q
- medicine% b5 b' F0 ^' F2 X p2 |0 D
- <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># |% o( a1 y) P) d6 s
- </>
+ ?6 I$ g3 l: N- g8 f) s- medicine; p3 O( E3 |! D' c
- <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>( ^; v5 k5 R) r5 t- ?: _
- </>
2 G5 E) d) p: `) z9 V O4 S
) L# U5 l: }$ Y7 ] （3）使用MdxBuilder等软件将mdx源文件（.txt文本文档）打包成mdx文件（详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。之后，将制作好的 mdx词典文件 & css文件 放在同一级目录下，则可使用。
/ M; C7 q# z% ]2 M) d/ o# s *注：最好是单独建立一个文件夹，文件夹里只存放上述的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前辈的解答）。
7 ^; O6 Q! C* U" O. o
' Z2 _4 @( ?: d: j) } 3、上述方法可归纳为——2 P3 y) d) y, o) ~
（1）创建css文件，定义选择器的名称、属性、值；（相关知识参见下图或：http://www.w3school.com.cn/css/css_syntax.asp）5 H& g9 u( r1 o
（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）
7 {% x% V( J4 a2 ]. W$ j+ L （3）遇到问题多使用百度、论坛等各种工具查找答案。7 h. Y" g! b8 p6 S" c
（4）实践→认识→再实践→再认识（如@oversky所言，“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”），在反复练习制作词典和css文件的过程中学习和发现。
0 J& }) g9 j0 O) Q
* F; m2 P* [+ l6 J" r四、【致谢】：; E8 V" c) N a: W' W9 M1 \
1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误（参见☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css）；* S1 [4 q7 `7 a. O8 e
2、感谢@Hugh（[教程] 【图文】手把手教你[转换]+[排版] MDX格式词）、@Oeasy（[教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025]）对词典制作的指导；
& s0 m z, h2 { 3、感谢@Yyang.的css样式的教学（参见☞[教程] 超级零基础小小小白Css修改教程贴）；
" A* Q; T# J; p _- w/ t 4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利；. F) e; R4 K0 W7 k5 p8 B
5、感谢并期待大家指正我的错误。
1 @" m- }; x" ]$ F# o+ L* b @: ]4 E6 G
3 r! w: r: c y# g0 W- |# G
2 @7 R; j6 c+ b; C↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ 0 b6 n0 r* l1 Z6 n- H* x( N" F7 q
【PREVIEW】：我的下一篇（第4篇）帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 | 
发表于 2018-11-3 15:38:55
发表于 2018-11-3 16:57:08
' Y1 A& k0 o! c' P5 U5 S
楼主
