本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑 1 j2 M6 }! q: x% Q
; H2 e9 J5 S% b0 I3 t3 Z' G, s4 T
【REVIEW】：我的上一篇（第2篇）帖子☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css
$ M) d7 U, z0 u6 S: s0 f↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ 3 X3 e. b1 F4 {( h+ w6 Y% T
! N D2 r' V! {7 d2 o( X E
" R3 n# ^- `( m7 C
; d" z- J# F; K! n U: W
一、【背景】：
1 Q X9 Y4 B, @4 L/ L1 z$ K B3 l/ ~ 1、论坛里有些词典仅有mdx文件而没有css文件（或者虽然既有mdx文件又有mdd文件，但mdd文件中并不包含css文件），此类词典的排版样式是在文本编辑器里用代码写成的（例如使用<br>换行、<b>加粗、<table>做背景或分割栏）；这种排版的方式的缺点可能有2个——
. s1 w: d) W2 Y0 a: d$ O( n ①使用该方式进行较丰富的样式排版时，操作可能更复杂、代码可能更多；! \0 m. I% j5 [( q. N) @
②后期或他人修改该方式做出的样式排版时，工作量可能更大、出错率可能更高。（*注：上面2个缺点的反面可能恰恰就是使用css文件排版的优点）
* Q* h" W8 P0 h1 t) ~% I9 |" U: F I 2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。（可能是因为这些都是最基础的HTML5、CSS知识）
T$ V0 ^6 h2 ^6 N$ ^) \! t 3、我和部分小伙伴缺乏HTML5和css相关基础知识，导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过，并且词典制作教程多数未涉及从零开始创建css（部分前辈们发布的css教程多数都聚焦于对已有css的修改上，故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴）；此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”（e.g.对于很多操作步骤和正则表达式，可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容，导致我们对于mdx源文件、css文件中的诸多代码一知半解。& s1 R+ Y2 |8 ^. a* j2 ]4 C( H
& \: _6 }' i+ a# |1 y0 r
二、【目的】：
& O [+ t* p$ r) T$ Z" N 分享css文件的创建方法——为没有css文件的mdx词典创建css文件；并对mdx源文件进行适当修改，使其能够适配css文件。
! I" [: {! s F5 f6 M) C# V2 `1 g b2 c# Z
三、【方法】：
$ T) F* w( V' `- L" E$ J0 ~ 1、知识/认识——. L$ t, F, Q3 Z) K# P7 ~
认真学习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文件中代码的含义及用法。* Y* _3 S# U* ]
9 Z7 g2 C8 B5 Z# R5 l4 L% D
2、行动/实践（从下面的实例出发）——
: Z5 s; L/ N9 o 某词典mdx源文件（.txt文本文档）中medicine这个词条的代码是：- medicine% C: [1 ^" G% T8 ` h" Q- g2 r6 I
- <b>medicine</b><br>the study and treatment of diseases and injuries7 {5 t% f# |. C; P
- </>
（1）新建一个文本文档（后缀为.txt）。之后，在该文本文档中输入下面的代码（整个文本文档中只需要输入这几行代码就行，无需输入<html><head><style>等其他内容）：- .citiao {$ [) c8 S+ x4 Q, G" }
- font-weight: 900;
8 L3 s: e1 A0 v4 b7 m - font-size: 130%;
, V2 _. o$ u# d' u% o - }5 ?+ ~' f1 f) d$ v1 p7 H+ w; H
- 4 j# S! p8 A" D- o; s9 q
- .shiyi {$ V+ \( E# _2 }
- font-weight: bold;( q9 O% q# T0 _5 a
- background-color: #eeeeee;8 F D, H) r9 S8 X9 O8 ~$ A
- }
" ]! O$ Q- v0 t" I$ V# B; Z$ I
3 E2 O: y+ X# X% v$ @! e3 s) z （2）使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件（.txt文本文档）。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种：9 k+ b5 E0 _# y( x
①（适用于各种词典）：
^8 D" u6 \) Q1 `4 X- medicine0 K9 k3 g+ v8 L7 \) C
- <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) S& d1 d4 v9 F. H - </>
) o! G7 ^4 X$ }; x- medicine
' ~! v- M! n) @2 [ - <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>
# E, j4 @" W% z: B& J: a - </>
% L! Z7 w; T1 H# y5 Z7 @3 E: r# F" h
6 q- {) ?: s1 I+ { （3）使用MdxBuilder等软件将mdx源文件（.txt文本文档）打包成mdx文件（详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。之后，将制作好的 mdx词典文件 & css文件 放在同一级目录下，则可使用。
4 E7 c3 A7 m" h *注：最好是单独建立一个文件夹，文件夹里只存放上述的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 C, `8 v# o; s1 Y& G) @/ T+ ^: y! J) ~4 D6 d( [
3、上述方法可归纳为——. U+ A+ ^' e- v. L, ?4 Q
（1）创建css文件，定义选择器的名称、属性、值；（相关知识参见下图或：http://www.w3school.com.cn/css/css_syntax.asp）0 z5 ^# G* G( V( a9 \# h4 A& C
（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）
) V0 K& a% [+ {7 o$ _, \ （3）遇到问题多使用百度、论坛等各种工具查找答案。
) E3 Y* \* C$ ?$ H9 p （4）实践→认识→再实践→再认识（如@oversky所言，“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”），在反复练习制作词典和css文件的过程中学习和发现。3 M$ P& R" N/ e7 y# z
4 E2 ^1 g8 F! E: ]& b) u$ d1 w
四、【致谢】：- z1 Q9 ^( Q) Q @: N; F
1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误（参见☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css）；
. X5 E _; t2 D 2、感谢@Hugh（[教程] 【图文】手把手教你[转换]+[排版] MDX格式词）、@Oeasy（[教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025]）对词典制作的指导；
0 e; G0 b) R$ W2 r! Q1 @# o I 3、感谢@Yyang.的css样式的教学（参见☞[教程] 超级零基础小小小白Css修改教程贴）；
D+ q3 Y; s1 [5 B9 j0 p 4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利；1 D" K3 {: `5 c& s; Q: e
5、感谢并期待大家指正我的错误。; O3 o& Z s1 J/ b
, ?/ O5 C- |9 ]1 z; P+ G1 }
. V+ s P# [& n
) W0 D1 e& y% `' T( `+ d; X↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ , X4 G8 k! D) R
【PREVIEW】：我的下一篇（第4篇）帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 | 
发表于 2018-11-3 15:38:55
发表于 2018-11-3 16:57:08
w/ p5 b' c- {% y/ D' M8 Q
楼主
