TA的每日心情 | 开心
2018-12-3 09:50 |
|---|
签到天数: 52 天 [LV.5]常住居民I
|
本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑
4 M3 X- M. G' P- o2 [6 u) j- i. U, Q8 d8 R
【REVIEW】：我的上一篇（第2篇）帖子☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css' X2 ?. P# ]' ^) J4 `0 F7 L6 A
↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ ! r4 F$ G, K, g. g( B q8 m
& h# K, q# v9 Z+ S: U+ F
# K" A6 m" I# W$ F
) d( I/ Z( Y% p1 ?% @3 Q. r: m一、【背景】：. P. f" o, u/ ~! S/ r" U+ @/ f
1、论坛里有些词典仅有mdx文件而没有css文件（或者虽然既有mdx文件又有mdd文件，但mdd文件中并不包含css文件），此类词典的排版样式是在文本编辑器里用代码写成的（例如使用<br>换行、<b>加粗、<table>做背景或分割栏）；这种排版的方式的缺点可能有2个——4 `1 d3 [8 T( X: Z
①使用该方式进行较丰富的样式排版时，操作可能更复杂、代码可能更多；! v2 \) a: a: Q5 D4 H+ D
②后期或他人修改该方式做出的样式排版时，工作量可能更大、出错率可能更高。（*注：上面2个缺点的反面可能恰恰就是使用css文件排版的优点）
- }0 o. x0 ?( V5 \" ]& } I 2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。（可能是因为这些都是最基础的HTML5、CSS知识）
j% O& z5 q% _" x [ 3、我和部分小伙伴缺乏HTML5和css相关基础知识，导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过，并且词典制作教程多数未涉及从零开始创建css（部分前辈们发布的css教程多数都聚焦于对已有css的修改上，故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴）；此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”（e.g.对于很多操作步骤和正则表达式，可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容，导致我们对于mdx源文件、css文件中的诸多代码一知半解。# l6 l: I0 B- W6 f, S& S
' t8 l0 b& g+ _: I# a& N7 x2 U& K二、【目的】：
' g' B2 A9 l- Q 分享css文件的创建方法——为没有css文件的mdx词典创建css文件；并对mdx源文件进行适当修改，使其能够适配css文件。' n$ {7 L8 f% {+ K6 C6 C& x- X9 P
: E* M/ U5 T% g, D. E# K8 M9 D三、【方法】：* b4 S2 E6 f4 ^, ^
1、知识/认识——
8 z# p$ m% S& | 认真学习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文件中代码的含义及用法。
( X g, b Y7 \3 t; [- e! o+ |8 Q* v" j- N, S4 I/ Q6 o. S! h5 f
2、行动/实践（从下面的实例出发）——
0 l K- E# \, N5 [ 某词典mdx源文件（.txt文本文档）中medicine这个词条的代码是：- medicine
& h! ]8 _8 m. a R' \8 a - <b>medicine</b><br>the study and treatment of diseases and injuries
$ s' `. r8 t; t- g - </>
（1）新建一个文本文档（后缀为.txt）。之后，在该文本文档中输入下面的代码（整个文本文档中只需要输入这几行代码就行，无需输入<html><head><style>等其他内容）：- .citiao {; |* x$ W; Z+ P
- font-weight: 900;
. h+ ]2 E0 d6 [ - font-size: 130%;+ D. ?' O0 c2 |; |- U/ Y
- }5 d3 D* Z2 W' f1 }8 q; O
- $ |" I/ Q9 y4 s' R: t$ j Y+ ]8 J: E
- .shiyi {
* }" F, k/ V" E# L, @ - font-weight: bold;
+ ~7 P$ n m, t4 \ - background-color: #eeeeee;
9 }/ l3 n9 D! z. z1 W# J1 G - }
2 D% ~& K2 @1 W. l1 G! T) t6 u5 T% s9 k （2）使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件（.txt文本文档）。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种：9 N Y5 }5 e" E/ J
①（适用于各种词典）：+ |( p+ V2 p" F, F% P6 D" |
- medicine" A- \8 y4 q3 k/ `, ?" p
- <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>
% C) V; {! G1 \, \" k - </>
- medicine' s" [% Y# P n; J l* o% ?
- <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>- |8 n5 Q# q! {
- </>
' F# h3 B3 e/ O0 a9 \' V
（3）使用MdxBuilder等软件将mdx源文件（.txt文本文档）打包成mdx文件（详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。之后，将制作好的 mdx词典文件 & css文件 放在同一级目录下，则可使用。" `! d" I' D, Y T) M
*注：最好是单独建立一个文件夹，文件夹里只存放上述的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前辈的解答）。
5 Z# s F, \1 [' `3 n2 J* m6 M( Q
3、上述方法可归纳为——' V2 c% a$ k2 s8 p
（1）创建css文件，定义选择器的名称、属性、值；（相关知识参见下图或：http://www.w3school.com.cn/css/css_syntax.asp）1 B1 X9 R' W0 N; W+ ?# _9 h% ]3 Q
（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）; Y4 p5 H3 ]' u/ D A
（3）遇到问题多使用百度、论坛等各种工具查找答案。5 A, x a _3 D# h5 K' x8 q/ t6 l! ]
（4）实践→认识→再实践→再认识（如@oversky所言，“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”），在反复练习制作词典和css文件的过程中学习和发现。1 j0 X* _& m. Z; R
. F2 [0 L& Z* f' A
四、【致谢】：% h/ w( E2 H8 |/ n4 B) j4 W
1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误（参见☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css）；
1 v5 F @/ h7 } t. j 2、感谢@Hugh（[教程] 【图文】手把手教你[转换]+[排版] MDX格式词）、@Oeasy（[教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025]）对词典制作的指导；7 I& p) h; j4 c; l. a4 P8 p0 T
3、感谢@Yyang.的css样式的教学（参见☞[教程] 超级零基础小小小白Css修改教程贴）；/ Q v$ ]2 G& \$ n( x
4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利；! T; A* R9 T# y: Q2 c: u
5、感谢并期待大家指正我的错误。
2 A* M' h( n8 K) S7 w9 ?; z: U& q$ E' R7 E. |8 v
- q2 U. o5 Z0 A7 y/ f) i, d' n1 y& p- b( k: e+ r. m# N0 o; p
↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩
0 H: P$ V+ z3 z8 s, G【PREVIEW】：我的下一篇（第4篇）帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
评分
-
2
查看全部评分
-
|
发表于 2018-11-3 15:38:55
发表于 2018-11-3 16:57:08
2 |7 n/ G1 ^7 g5 l# Q+ e4 @& f
楼主
