本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑 ( v% x% a" \5 v: e2 a" `
1 z; e0 v" z2 v. J, S: w
【REVIEW】：我的上一篇（第2篇）帖子☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css
* e' |: K \+ _* J) `↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩
7 y* }! G4 C6 L: Y9 f: c) A& F! u% d, @# J1 u, u8 ~% J) Q3 t
2 w* D! I" O5 _# v
3 J, Z B( h+ ?) m1 X
一、【背景】：
" S1 E3 F% c" N7 c 1、论坛里有些词典仅有mdx文件而没有css文件（或者虽然既有mdx文件又有mdd文件，但mdd文件中并不包含css文件），此类词典的排版样式是在文本编辑器里用代码写成的（例如使用<br>换行、<b>加粗、<table>做背景或分割栏）；这种排版的方式的缺点可能有2个——+ L' j/ p# ~& Y! f3 Z' F
①使用该方式进行较丰富的样式排版时，操作可能更复杂、代码可能更多；! n3 b1 j4 o: @% x: \& o! m( S
②后期或他人修改该方式做出的样式排版时，工作量可能更大、出错率可能更高。（*注：上面2个缺点的反面可能恰恰就是使用css文件排版的优点）
* k* @1 m- v2 r! r6 O 2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。（可能是因为这些都是最基础的HTML5、CSS知识）# i9 a" o! O+ Y1 G& I
3、我和部分小伙伴缺乏HTML5和css相关基础知识，导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过，并且词典制作教程多数未涉及从零开始创建css（部分前辈们发布的css教程多数都聚焦于对已有css的修改上，故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴）；此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”（e.g.对于很多操作步骤和正则表达式，可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容，导致我们对于mdx源文件、css文件中的诸多代码一知半解。; h5 Y. {( i Q" @
4 F7 o, E/ \2 n9 K& ]5 R' i二、【目的】：
: A R* _7 J3 Q$ Q# d 分享css文件的创建方法——为没有css文件的mdx词典创建css文件；并对mdx源文件进行适当修改，使其能够适配css文件。9 M7 y3 J" j( O
+ Y9 F# Y3 X6 }( y三、【方法】：
% f3 A$ h n# N: f: y W4 K 1、知识/认识——: c9 P8 e. s$ S8 o5 b3 F* ?" Q
认真学习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文件中代码的含义及用法。
. U$ ^" U! T. s& C! N2 S; O1 g' w3 m% _( U, ^5 I" {! F
2、行动/实践（从下面的实例出发）——
) V3 G* m- R9 Q. w7 ] 某词典mdx源文件（.txt文本文档）中medicine这个词条的代码是：- medicine2 r+ u$ i0 n' ? _( N6 S9 L
- <b>medicine</b><br>the study and treatment of diseases and injuries
, g/ ?, t$ `2 u3 b% p - </>
（1）新建一个文本文档（后缀为.txt）。之后，在该文本文档中输入下面的代码（整个文本文档中只需要输入这几行代码就行，无需输入<html><head><style>等其他内容）：- .citiao {
* E. H" g$ W5 r) ~+ ]" e5 m% S - font-weight: 900;
3 {3 E% H5 b* x' p5 H - font-size: 130%;
8 F# X7 ^5 ^# n; h - }/ U: D4 r2 I2 ~
6 P! m: w& T1 ?& ^$ Q/ N- .shiyi {
& a p! O& F2 l8 g - font-weight: bold;; b/ F& I; R+ X
- background-color: #eeeeee;
o) j. O( |# s - }
8 M( P9 [" v. q* v/ M2 x+ y: X9 p' k, O- X( r9 B6 i+ u
（2）使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件（.txt文本文档）。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种：
( P0 w% U7 y( l9 \ ①（适用于各种词典）：) s' M1 q- q5 r. h y
- medicine; Z1 W5 @1 ]9 L
- <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>- m# H/ r; n y
- </>
4 Q! N8 e: ^$ m, N- medicine
2 L) @ E' Y e4 | - <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>' @) I9 Q8 j( x7 U3 G: T. n
- </>
; s" `5 R1 i* H* F6 S/ C" E8 d
（3）使用MdxBuilder等软件将mdx源文件（.txt文本文档）打包成mdx文件（详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。之后，将制作好的 mdx词典文件 & css文件 放在同一级目录下，则可使用。
2 A5 |! i( |; g* ~! K *注：最好是单独建立一个文件夹，文件夹里只存放上述的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 m$ i4 h& a- q& l
' B/ W4 x+ s- M# D8 p s: I
3、上述方法可归纳为——
, }0 o4 F6 p. b& l （1）创建css文件，定义选择器的名称、属性、值；（相关知识参见下图或：http://www.w3school.com.cn/css/css_syntax.asp）! `2 Y! Z6 M8 W5 H; T8 h
（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）& H1 h% h% J5 n/ V. d8 u3 h
（3）遇到问题多使用百度、论坛等各种工具查找答案。
6 a* a6 o9 V9 Z; L2 \- s （4）实践→认识→再实践→再认识（如@oversky所言，“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”），在反复练习制作词典和css文件的过程中学习和发现。
; D: K1 ^. i4 O$ q2 D( s6 D g0 ^" I3 H6 P' [" K
四、【致谢】：
, ?4 R7 w) U Z 1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误（参见☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css）；
- Z: g i a/ T3 ~) ~ 2、感谢@Hugh（[教程] 【图文】手把手教你[转换]+[排版] MDX格式词）、@Oeasy（[教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025]）对词典制作的指导；, ~) E ]- @3 s" g0 @# G
3、感谢@Yyang.的css样式的教学（参见☞[教程] 超级零基础小小小白Css修改教程贴）；
. x( X) B1 }1 M6 o1 n* c 4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利；, v$ \9 [5 \( P! G" E2 I
5、感谢并期待大家指正我的错误。
0 N$ ^5 \8 H' N3 W K K* W: j8 K5 v4 g6 Z3 w9 u
! H# R& W" e& e) R4 i' @, ~) [+ g9 |1 A, n
↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ 8 E. { a' T: l4 }) B3 Z( h
【PREVIEW】：我的下一篇（第4篇）帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 | 
发表于 2018-11-3 15:38:55
发表于 2018-11-3 16:57:08
# a# l1 M, x' p/ a. d4 v
5 B p, w: ?1 s5 y) R
楼主
