本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑 ) ^2 |: K) }- Z* g
! n( _6 v$ z8 Q( |! ~5 X8 ~4 _
【REVIEW】:我的上一篇(第2篇)帖子☞[求助] 如何从头开始创建css?部分词典只有mdx而没有css6 L2 f& v: V# A# v4 T
↪~~~~✂~~~~↩↪~~~~✂~~~~↩↪~~~~分割线~~~~↩↪~~~~✂~~~~↩↪~~~~✂~~~~↩ ' ]2 K; S& p& y
- }; [- }. T/ @1 F9 ^$ c ( W2 Y' h# D c! L
5 X# K' l2 p0 S! A ?! _
一、【背景】:
* E. D$ m! A4 S- w3 C5 \* k 1、论坛里有些词典仅有mdx文件而没有css文件(或者虽然既有mdx文件又有mdd文件,但mdd文件中并不包含css文件),此类词典的排版样式是在文本编辑器里用代码写成的(例如使用<br>换行、<b>加粗、<table>做背景或分割栏);这种排版的方式的缺点可能有2个——, `$ a# K; S) N+ j. R3 G
①使用该方式进行较丰富的样式排版时,操作可能更复杂、代码可能更多;' F1 _: S# x9 Z
②后期或他人修改该方式做出的样式排版时,工作量可能更大、出错率可能更高。(*注:上面2个缺点的反面可能恰恰就是使用css文件排版的优点)& R5 ^, \& p3 r. L& t
2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。(可能是因为这些都是最基础的HTML5、CSS知识)' m: I) q. \, x
3、我和部分小伙伴缺乏HTML5和css相关基础知识,导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过,并且词典制作教程多数未涉及从零开始创建css(部分前辈们发布的css教程多数都聚焦于对已有css的修改上,故也未涉及从零开始创建css。参见☞[教程] 超级零基础小小小白Css修改教程贴);此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”(e.g.对于很多操作步骤和正则表达式,可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库)。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容,导致我们对于mdx源文件、css文件中的诸多代码一知半解。
9 E3 ?9 V4 R4 i, W# f6 }
; R0 P" f5 W+ R( C5 w二、【目的】:
7 s2 h# x" v8 S" | 分享css文件的创建方法——为没有css文件的mdx词典创建css文件;并对mdx源文件进行适当修改,使其能够适配css文件。$ [4 Y, H3 ]) `5 L$ |) {4 ^: t# w# g
5 g6 _% P. e n R6 Z4 `三、【方法】:) L: m1 ~* e# b. k
1、知识/认识——* l7 h, L! d1 g/ k% f2 H. E( l
认真学习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文件中代码的含义及用法。
+ A9 }1 S9 [1 D) v) u1 |5 @, x: @$ I2 w* ~! ~6 F1 q
2、行动/实践(从下面的实例出发)——
, F5 T( E1 ~' ~% u' Q' a' @ 某词典mdx源文件(.txt文本文档)中medicine这个词条的代码是:- medicine% u+ X. E R# ~' D
- <b>medicine</b><br>the study and treatment of diseases and injuries
5 Y/ T3 k% m. ~* o" T6 [ - </>
复制代码 如果我想通过创建css文件的形式,让代码中第二行的“medicine”字体加粗且字号增加、让“the study and treatment of diseases and injuries”字体加粗、背景色变为浅灰色,那我需要做如下的(1)~(3)三件事: [: d$ n6 b3 w% m$ }% m) d
(1)新建一个文本文档(后缀为.txt)。之后,在该文本文档中输入下面的代码(整个文本文档中只需要输入这几行代码就行,无需输入<html><head><style>等其他内容):- .citiao {( V8 F8 p) w6 I
- font-weight: 900;
) J, }: ]% v- Z" ]% W - font-size: 130%;
8 ]- D' X4 J- B" C/ @ d0 J - }7 @( Z1 s6 i* v8 b! W
- / k3 u1 X( [4 r) M
- .shiyi {
* N; t4 _' w5 S - font-weight: bold;/ F9 H6 [5 s0 c C
- background-color: #eeeeee;
) ?+ w7 [; ]; ^: z: [2 o8 O' {$ Z - }
复制代码 *注:上述代码中的“citiao”“shiyi”是css类选择器的名称。(相关知识参见☞http://www.w3school.com.cn/css/css_syntax.asp) 之后,将该文件另存为后缀为.css的文件,文件命名为“paiban”(*注:文件名可自拟)。也就是说,我们创建了一个css文件——“paiban.css”。
5 F/ o- l" \: Z1 x( H! j6 t2 \2 c0 s
(2)使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件(.txt文本文档)。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种:
i. |' {& {$ q S! @9 ]- I ①(适用于各种词典):. X0 E: P. W/ b- y: R
- medicine
) c, |) X9 h0 H$ f" }( e0 E8 j - <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>
9 ` ~; S+ S* Q% C' D6 @- d - </>
复制代码 ②(可能仅适用于欧路词典。其原因参见 [求助] 如何从头开始创建css?部分词典只有mdx而没有css 2楼@simonfire前辈的解答):
# q( M6 [, c+ i2 ]; l- medicine! K( ~1 d4 j1 f0 u5 ^- B
- <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>* }: \+ m1 U, ?1 j- u4 I
- </>
复制代码 *Note that: 代码①与②的差别就在于第2行行首的<link rel="stylesheet" type="text/css" href="paiban.css">。对于为什么会有此差别,请参考☞HTML 5 标签、如何创建 CSS│如何插入样式表。* ]7 A0 D: q9 p
) @# r# v4 D6 H) J (3)使用MdxBuilder等软件将mdx源文件(.txt文本文档)打包成mdx文件(详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库)。之后,将制作好的 mdx词典文件 & css文件 放在同一级目录下,则可使用。
; h1 ^" ~% \/ \ O5 c! m2 M: n *注:最好是单独建立一个文件夹,文件夹里只存放上述的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前辈的解答)。' G& x/ o: G& M
: V, g x1 |! u 3、上述方法可归纳为——/ ^# Z2 ~/ ^) E; D
(1)创建css文件,定义选择器的名称、属性、值;(相关知识参见下图或:http://www.w3school.com.cn/css/css_syntax.asp)
! m& p8 U) a2 A: 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): Y$ i) T" C% r
(3)遇到问题多使用百度、论坛等各种工具查找答案。7 U3 v M- |$ Z+ \. J: H
(4)实践→认识→再实践→再认识(如@oversky所言,“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”),在反复练习制作词典和css文件的过程中学习和发现。0 H$ q8 [& H* K9 q8 S6 e5 K1 T
" m- P( _7 ^. n* H
四、【致谢】:
; @( L+ x% e5 ~# {& m2 p$ `( b 1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误(参见☞[求助] 如何从头开始创建css?部分词典只有mdx而没有css);
* H) ^/ `- f. I 2、感谢@Hugh([教程] 【图文】手把手教你[转换]+[排版] MDX格式词)、@Oeasy([教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025])对词典制作的指导;
/ P) f3 W# N/ F. X 3、感谢@Yyang.的css样式的教学(参见☞[教程] 超级零基础小小小白Css修改教程贴);
$ w: W( p6 ~* G 4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利;
. b) i e; T) p- F 5、感谢并期待大家指正我的错误。, R! B! a7 ~9 t
' e( b! S! x: v K4 h0 g3 Q( _$ z4 d) Y* q0 L
$ Q* [) p* I: h2 r5 G4 B/ v% t↪~~~~✂~~~~↩↪~~~~✂~~~~↩↪~~~~分割线~~~~↩↪~~~~✂~~~~↩↪~~~~✂~~~~↩
, \: I$ p- [7 N0 `$ t【PREVIEW】:我的下一篇(第4篇)帖子☞ [工具] mdx/mdd解压&打包工具-Mac版 |