本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑
3 d- V+ h5 |/ Q1 ]# Z8 a+ E7 G( S# X. `6 a
【REVIEW】：我的上一篇（第2篇）帖子☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css! J/ g2 A4 t$ g9 l# l8 j$ \/ A
↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩
* V/ x: ^. R% \5 X, [/ J$ I
$ z, ], ^ [$ T
8 J( f r {5 D3 ~, m
3 P8 N9 X' t/ h8 E一、【背景】：! y8 N) x* S0 m6 C( g; f8 ~# O/ g
1、论坛里有些词典仅有mdx文件而没有css文件（或者虽然既有mdx文件又有mdd文件，但mdd文件中并不包含css文件），此类词典的排版样式是在文本编辑器里用代码写成的（例如使用<br>换行、<b>加粗、<table>做背景或分割栏）；这种排版的方式的缺点可能有2个——
+ J) b2 w1 k* O8 v l ①使用该方式进行较丰富的样式排版时，操作可能更复杂、代码可能更多；7 R2 U; M* Q4 _" W5 W
②后期或他人修改该方式做出的样式排版时，工作量可能更大、出错率可能更高。（*注：上面2个缺点的反面可能恰恰就是使用css文件排版的优点）
2 |0 c5 ~" a( h2 C. K2 v8 D8 ]* w 2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。（可能是因为这些都是最基础的HTML5、CSS知识）
% `7 S9 Y! [% j) e L 3、我和部分小伙伴缺乏HTML5和css相关基础知识，导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过，并且词典制作教程多数未涉及从零开始创建css（部分前辈们发布的css教程多数都聚焦于对已有css的修改上，故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴）；此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”（e.g.对于很多操作步骤和正则表达式，可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容，导致我们对于mdx源文件、css文件中的诸多代码一知半解。 L2 r/ @4 r8 l' J1 W6 V* R A
' E) D J4 ^* V6 [3 _二、【目的】：
" K8 ] k, ~3 ]0 O A8 A* s/ ? 分享css文件的创建方法——为没有css文件的mdx词典创建css文件；并对mdx源文件进行适当修改，使其能够适配css文件。6 l# A! j: d' j4 c* C5 L
' x' [7 x! L$ C7 Z
三、【方法】： V6 B- N! W& R. e3 M0 b
1、知识/认识——
. j0 n% B! N: s U+ `. a( v0 J 认真学习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文件中代码的含义及用法。
O6 N1 m- q2 j0 a: n: Z4 s/ Y& Q2 y! V! o& M9 r
2、行动/实践（从下面的实例出发）——( u/ ^0 y3 i) ?8 X+ L4 F) {
某词典mdx源文件（.txt文本文档）中medicine这个词条的代码是：- medicine" A% t2 M- u# ]: P7 ^
- <b>medicine</b><br>the study and treatment of diseases and injuries! r$ n' ~0 [! Q, F
- </>
（1）新建一个文本文档（后缀为.txt）。之后，在该文本文档中输入下面的代码（整个文本文档中只需要输入这几行代码就行，无需输入<html><head><style>等其他内容）：- .citiao {
3 p+ @ m% k2 ]2 k - font-weight: 900;% Z3 `, A3 E- E8 x; N1 r
- font-size: 130%;
& f" ~2 d4 G! } - }& n7 H* f4 r& i* i9 v; h) i+ {
- 1 l1 p: o, ]- j9 ?) ^; S
- .shiyi {# C" R& T: l9 O/ t. H n/ p
- font-weight: bold;' }7 [8 g* T3 ^- X V5 m
- background-color: #eeeeee;
5 A7 G4 R* ^( n1 w& M - }
. T9 l0 x( b5 ^% Y0 {
（2）使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件（.txt文本文档）。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种：
1 V2 ]# f7 }% F6 S' _; E+ H ①（适用于各种词典）：/ D3 s* Z; @ q
- medicine
- d* F$ a6 Q4 o7 D, G8 x8 { - <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>( u: f* e* ~6 H. K9 i
- </>
- medicine, \: T1 |6 `0 E6 F4 t
- <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>) Q/ I( H2 J( W: t" e. D
- </>
( M& S1 t& `9 E# A/ R# c4 \" e
q2 n* b- q: M% I5 |. }# H （3）使用MdxBuilder等软件将mdx源文件（.txt文本文档）打包成mdx文件（详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。之后，将制作好的 mdx词典文件 & css文件 放在同一级目录下，则可使用。
' Q. |/ Y+ Z7 L3 ^/ }" j! r6 M0 h0 z* I7 @ *注：最好是单独建立一个文件夹，文件夹里只存放上述的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前辈的解答）。
2 ~2 I1 E7 s! b1 f4 k! c
1 v- D2 Z9 |7 D q$ | 3、上述方法可归纳为——
, X, y6 {, J6 S& j/ p- v$ r* F （1）创建css文件，定义选择器的名称、属性、值；（相关知识参见下图或：http://www.w3school.com.cn/css/css_syntax.asp）
% k- n0 S# n G' E （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）% d0 F6 o7 d; [, k
（3）遇到问题多使用百度、论坛等各种工具查找答案。 v [9 `5 B' b
（4）实践→认识→再实践→再认识（如@oversky所言，“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”），在反复练习制作词典和css文件的过程中学习和发现。
3 u! m+ v4 l/ K! T9 Y8 t2 o! L; D1 U
四、【致谢】：8 M8 N1 W# t) ?- Z& C/ g6 M
1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误（参见☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css）；! X# n& }- ~5 p; b$ T/ d# j
2、感谢@Hugh（[教程] 【图文】手把手教你[转换]+[排版] MDX格式词）、@Oeasy（[教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025]）对词典制作的指导；" |& ^, F/ N( w8 }
3、感谢@Yyang.的css样式的教学（参见☞[教程] 超级零基础小小小白Css修改教程贴）；* W3 {9 y- T5 o5 N% W1 C
4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利；% x# k, @7 R+ a- V! U
5、感谢并期待大家指正我的错误。* U# {, ?! x1 s# N& Z7 ^ u$ Q
* m# m3 b! Q; S$ t- f6 D: W# D; b- @1 O% S3 O- \
4 k8 a7 h0 ?! W' L4 K' `↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ * }5 }1 K# r- y7 [+ a$ H8 ?" V
【PREVIEW】：我的下一篇（第4篇）帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 | 
发表于 2018-11-3 15:38:55
发表于 2018-11-3 16:57:08
楼主
