本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑 1 }5 |* a. t2 @3 e" Q0 X- O2 \% k, T0 m
. x! S% {$ g1 i7 d: c
【REVIEW】：我的上一篇（第2篇）帖子☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css
* V/ M6 T+ [9 y! s/ ^9 `6 B↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ + p$ e) l9 f4 V1 f
$ A h! Q( r4 b5 z( p2 { 6 x, f8 o [$ O \3 q9 v) L7 }
; x% n2 x, M8 R一、【背景】：# ~( y1 |8 {( \6 j( v
1、论坛里有些词典仅有mdx文件而没有css文件（或者虽然既有mdx文件又有mdd文件，但mdd文件中并不包含css文件），此类词典的排版样式是在文本编辑器里用代码写成的（例如使用<br>换行、<b>加粗、<table>做背景或分割栏）；这种排版的方式的缺点可能有2个——1 |5 s, L- p) g9 S: b3 o0 D
①使用该方式进行较丰富的样式排版时，操作可能更复杂、代码可能更多；
: N) x( [- P( p ②后期或他人修改该方式做出的样式排版时，工作量可能更大、出错率可能更高。（*注：上面2个缺点的反面可能恰恰就是使用css文件排版的优点）+ M2 j6 ^: R5 F6 S& W$ q( Y
2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。（可能是因为这些都是最基础的HTML5、CSS知识）
' F- x$ F% i4 @% q& l 3、我和部分小伙伴缺乏HTML5和css相关基础知识，导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过，并且词典制作教程多数未涉及从零开始创建css（部分前辈们发布的css教程多数都聚焦于对已有css的修改上，故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴）；此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”（e.g.对于很多操作步骤和正则表达式，可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容，导致我们对于mdx源文件、css文件中的诸多代码一知半解。* ]! h) @- j/ \5 [3 Z1 v" C7 \
! L9 V# |6 I; P5 v
二、【目的】：
* y/ z( s( @# k6 L* d( x 分享css文件的创建方法——为没有css文件的mdx词典创建css文件；并对mdx源文件进行适当修改，使其能够适配css文件。
, z2 Q) \& A7 W' v8 ?- M
& N" U& E6 ?0 i0 s/ C- _三、【方法】：+ K n: y. Z) U
1、知识/认识——4 F, \) A/ v0 }0 ?0 ?( t' B
认真学习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文件中代码的含义及用法。; `8 |+ x4 i$ b, ?2 q: ]
) V( v( A$ B5 H! Y 2、行动/实践（从下面的实例出发）——
: l: E$ z: v: B7 \, b; x8 s. ~ 某词典mdx源文件（.txt文本文档）中medicine这个词条的代码是：- medicine
' @, _, H/ {3 }* u0 g# Z - <b>medicine</b><br>the study and treatment of diseases and injuries% e3 K I6 \5 d3 A& O" g4 V( ^6 V7 t
- </>
7 n; p5 E+ s5 q/ V% r5 b; z% t （1）新建一个文本文档（后缀为.txt）。之后，在该文本文档中输入下面的代码（整个文本文档中只需要输入这几行代码就行，无需输入<html><head><style>等其他内容）：- .citiao {4 ^( L# O9 M8 h$ W% {$ ~# M
- font-weight: 900;
1 z" Z8 n8 E1 e - font-size: 130%;
7 g: t* N7 u& ] - }' `$ V5 W8 `+ U. w0 q
" P6 z# F; v; Y7 d- .shiyi {' d* W3 n( [* z
- font-weight: bold;+ \( }& K# v: X# V" H
- background-color: #eeeeee;1 I, ?( Z* \, e5 C9 x1 z
- }
( N% w7 |& ?1 o% u( @# ?5 Q& \/ Y* r5 ]6 d# z
（2）使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件（.txt文本文档）。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种：. j; m- ^+ o1 x7 P% _
①（适用于各种词典）：6 G! B- a' s7 e, y
- medicine! q8 T. ?( R' M4 X: `2 z) S% Y& U
- <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>
5 W) N5 k( y% J. K A - </>
5 W' k f3 D' p" v+ }% l4 L0 p* V- medicine4 ^( M, C6 @: J# ]2 t6 F) w7 ^. \
- <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>/ Q: u5 ^. K3 x' w$ [
- </>
7 D. ^+ v) E: z9 ]+ T% B1 ~' x3 L$ X% X* m1 [
（3）使用MdxBuilder等软件将mdx源文件（.txt文本文档）打包成mdx文件（详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库）。之后，将制作好的 mdx词典文件 & css文件 放在同一级目录下，则可使用。
7 z* ~ B% D5 ?" k5 w" k v *注：最好是单独建立一个文件夹，文件夹里只存放上述的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前辈的解答）。, q" [/ d$ f( j2 y( D+ f
6 n/ }5 r' y$ q. x! o 3、上述方法可归纳为——
/ w: F* y% @+ J/ P （1）创建css文件，定义选择器的名称、属性、值；（相关知识参见下图或：http://www.w3school.com.cn/css/css_syntax.asp）
; D( _3 L; G2 ~) N" w+ u% U5 |/ c8 j （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 `: N8 V# ]! _& P2 ~# _5 H
（3）遇到问题多使用百度、论坛等各种工具查找答案。
3 K, A5 w8 e0 e, n" H" W （4）实践→认识→再实践→再认识（如@oversky所言，“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”），在反复练习制作词典和css文件的过程中学习和发现。. {# p/ ~7 t) y$ j& {5 S2 j. X1 V
' X8 J* s! D- i5 ]. z% D: j, q7 i四、【致谢】：
# f" ]8 a2 Z a. {. {5 z! _ 1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误（参见☞[求助] 如何从头开始创建css？部分词典只有mdx而没有css）；
# M2 Y6 U% n' l) C e. ^ 2、感谢@Hugh（[教程] 【图文】手把手教你[转换]+[排版] MDX格式词）、@Oeasy（[教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025]）对词典制作的指导；4 m5 w8 e# U) b3 r& {' N, ]! I. X, e
3、感谢@Yyang.的css样式的教学（参见☞[教程] 超级零基础小小小白Css修改教程贴）；0 m+ c0 ~$ X9 F' Y
4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利；
* n0 D% u1 B" q 5、感谢并期待大家指正我的错误。: C1 s8 m0 \# g8 I8 A7 Z
9 @+ o" M) {: g1 x# \$ W. f5 i* V& W* c
. a$ d) r3 l& l$ G, _
3 e; [9 A" }1 u& z7 |# V
↪～～～～✂～～～～↩↪～～～～✂～～～～↩↪～～～～分割线～～～～↩↪～～～～✂～～～～↩↪～～～～✂～～～～↩ 4 ? }4 M7 j/ n, B" I# c& H1 ?' h
【PREVIEW】：我的下一篇（第4篇）帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 | 
发表于 2018-11-3 15:38:55
发表于 2018-11-3 16:57:08
1 d! O' S! \$ G5 x/ r3 b5 W
. [+ N- L5 A: l f
楼主
