查看: 3848|回复: 8
打印 上一主题 下一主题

[教程] 从零开始创建css文件(为没有css文件的mdx词典制作css文件)

[复制链接]
  • TA的每日心情
    开心
    2018-12-3 09:50
  • 签到天数: 52 天

    [LV.5]常住居民I

    4

    主题

    123

    回帖

    1473

    积分

    解元

    Rank: 5Rank: 5

    积分
    1473
    跳转到指定楼层
    1
    发表于 2018-11-3 15:38:55 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    本帖最后由 maomaowei5655 于 2020-5-1 09:36 编辑

    【REVIEW】:我的上一篇(第2篇)帖子☞[求助] 如何从头开始创建css?部分词典只有mdx而没有css
    ↪~~~~✂~~~~↩↪~~~~✂~~~~↩↪~~~~分割线~~~~↩↪~~~~✂~~~~↩↪~~~~✂~~~~↩



    一、【背景】:
          1、论坛里有些词典仅有mdx文件而没有css文件(或者虽然既有mdx文件又有mdd文件,但mdd文件中并不包含css文件),此类词典的排版样式是在文本编辑器里用代码写成的(例如使用<br>换行、<b>加粗、<table>做背景或分割栏);这种排版的方式的缺点可能有2个——
          ①使用该方式进行较丰富的样式排版时,操作可能更复杂、代码可能更多;
          ②后期或他人修改该方式做出的样式排版时,工作量可能更大、出错率可能更高。
    (*注:上面2个缺点的反面可能恰恰就是使用css文件排版的优点
          2、论坛里似乎没有帖子详细介绍如何为上述这种词典从零开始创建css文件。(可能是因为这些都是最基础的HTML5、CSS知识)
          3、我和部分小伙伴缺乏HTML5和css相关基础知识,导致我们对mdx源文件和css文件中涉及的代码一知半解。由于之前一些前辈们发布的mdx词典制作教程中对html5和css相关基础知识仅是一笔带过,并且词典制作教程多数未涉及从零开始创建css(部分前辈们发布的css教程多数都聚焦于对已有css的修改上,故也未涉及从零开始创建css。参见☞
    [教程] 超级零基础小小小白Css修改教程贴);此外前辈们发布的mdx词典制作教程多数属于“傻瓜式操作”(e.g.对于很多操作步骤和正则表达式,可能仅需要照搬照抄即可。参见☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库)。所以我们在学习前辈们的词典/css教程前没有认真学习HTML5和CSS的基础内容,导致我们对于mdx源文件、css文件中的诸多代码一知半解。

    二、【目的】:
          分享css文件的创建方法——为没有css文件的mdx词典创建css文件;并对mdx源文件进行适当修改,使其能够适配css文件

    三、【方法】:
          1、知识/认识——
          认真学习HTML5和CSS的基础知识(http://www.w3school.com.cn/html5/index.asphttp://www.w3school.com.cn/css/index.asp。esp.这两个网站中关于HTML5标签等章节的内容;CSS的基础语法高级语法id选择器类选择器CSS创建  等章节的内容)。这可以帮助我们理解mdx源文件与css文件中代码的含义及用法。


          2、行动/实践(从下面的实例出发)——
          某词典mdx源文件(.txt文本文档)中medicine这个词条的代码是:
    1. medicine
    2. <b>medicine</b><br>the study and treatment of diseases and injuries
    3. </>
    复制代码
          如果我想通过创建css文件的形式,让代码中第二行的“medicine”字体加粗且字号增加、让“the study and treatment of diseases and injuries”字体加粗、背景色变为浅灰色,那我需要做如下的(1)~(3)三件事:
          (1)新建一个文本文档(后缀为.txt)。之后,在该文本文档中输入下面的代码(整个文本文档中只需要输入这几行代码就行,无需输入<html><head><style>等其他内容):
    1. .citiao {
    2.     font-weight: 900;
    3.     font-size: 130%;
    4. }

    5. .shiyi {
    6.     font-weight: bold;
    7.     background-color: #eeeeee;
    8. }
    复制代码
          *注:上述代码中的“citiao”“shiyi”是css类选择器的名称。(相关知识参见☞http://www.w3school.com.cn/css/css_syntax.asp      之后,将该文件另存为后缀为.css的文件,文件命名为“paiban”(*注:文件名可自拟)。也就是说,我们创建了一个css文件——“paiban.css”。

          (2)使用UltraEdit或EmEditor等文本编辑软件打开mdx词典源文件(.txt文本文档)。利用查找-替换功能、正则表达式将上述代码改写为如下①和②中的其中一种:
          ①(适用于各种词典):
    1. medicine
    2. <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>
    3. </>
    复制代码
          ②(可能仅适用于欧路词典。其原因参见 [求助] 如何从头开始创建css?部分词典只有mdx而没有css 2楼@simonfire前辈的解答):
    1. medicine
    2. <div class=“citiao”>medicine</div><div class=“shiyi”>the study and treatment of diseases and injuries</div>
    3. </>
    复制代码
          *Note that: 代码①与②的差别就在于第2行行首的<link rel="stylesheet" type="text/css" href="paiban.css">。对于为什么会有此差别,请参考☞HTML 5  标签如何创建 CSS│如何插入样式表

          (3)使用MdxBuilder等软件将mdx源文件(.txt文本文档)打包成mdx文件(详情请参考☞[教程] 【图文】手把手教你[转换]+[排版] MDX格式词库)。之后,将制作好的 mdx词典文件 & css文件 放在同一级目录下,则可使用。
          *注:最好是单独建立一个文件夹,文件夹里只存放上述的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前辈的解答)。

          3、上述方法可归纳为——
          (1)创建css文件,定义选择器的名称、属性、值;(相关知识参见下图或:http://www.w3school.com.cn/css/css_syntax.asp

          (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
          (3)遇到问题多使用百度、论坛等各种工具查找答案。
          (4)实践→认识→再实践→再认识(如@oversky所言,“从最简单的例子开始研究”或“把一些结构内容相对简单的词频字典解开看看”),在反复练习制作词典和css文件的过程中学习和发现。

    四、【致谢】:
          1、感谢@simonfire和@oversky两位前辈花费时间解答我的问题并指正我的错误(参见☞
    [求助] 如何从头开始创建css?部分词典只有mdx而没有css);
          2、感谢@Hugh(
    [教程] 【图文】手把手教你[转换]+[排版] MDX格式词)、@Oeasy([教程] [实例][解压mdx/mdd再打包为mdx/mdd][乱][多图][20151025])对词典制作的指导;
          3、感谢@Yyang.的css样式的教学(参见☞
    [教程] 超级零基础小小小白Css修改教程贴);
          4、感谢论坛中各位前辈的前期工作为我们生活和学习带来的便利;
          5、感谢并期待大家指正我的错误。




    ↪~~~~✂~~~~↩↪~~~~✂~~~~↩↪~~~~分割线~~~~↩↪~~~~✂~~~~↩↪~~~~✂~~~~↩
    【PREVIEW】:我的下一篇(第4篇)帖子☞ [工具] mdx/mdd解压&打包工具-Mac版

    css代码.jpg (338.04 KB, 下载次数: 1)

    【示例】css代码

    【示例】css代码

    评分

    2

    查看全部评分

    本帖被以下淘专辑推荐:

  • TA的每日心情
    无聊
    2022-9-25 21:09
  • 签到天数: 1136 天

    [LV.10]以坛为家III

    17

    主题

    3142

    回帖

    2万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    25289

    灌水大神章

    推荐
    发表于 2018-11-3 18:46:13 | 只看该作者
    提醒一下,regular expression 在不同的编辑器里可能有不同的实作方式,
    也就是使用的语法不尽相容。
    例如孤影兄的帖子提到用 EditPlus,其中 \1 \2 的用法在 vim 和 PsPad 是会有问题
    (请熟悉 vim 的网友指点一下要如何修改或设定)
    我有试到免费的 notepad++ 也是可用的。
  • TA的每日心情
    慵懒
    2021-12-14 13:16
  • 签到天数: 403 天

    [LV.9]以坛为家II

    2

    主题

    940

    回帖

    1万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    13665

    QQ 章灌水大神章笑傲江湖章推广专家

    2
    发表于 2018-11-3 16:17:35 | 只看该作者
    有图片看不到、我网速问题?感谢楼主分享、
  • TA的每日心情
    开心
    2023-1-18 23:24
  • 签到天数: 211 天

    [LV.7]常住居民III

    427

    主题

    4539

    回帖

    9万

    积分

    超级版主

    Rank: 12Rank: 12Rank: 12

    积分
    92011

    灌水大神章小蜜蜂章笑傲江湖章翰林院专用章管理组专用章城管大队长

    3
    发表于 2018-11-3 16:57:08 | 只看该作者
    本帖最后由 kyletruman 于 2018-11-3 17:17 编辑

    楼主帖子中的超链接显示不正常,还有部分代码没有正常显示,请重新编辑帖子,勾选右上角的 纯文本,然后再保存,谢谢




    A.新建一个文本文档(后缀为.txt)。之后,在该文本文档中输入下图中内容。
    这些文字之后的内容可否直接把代码放入代码编辑器<>呢?论坛图片有时显示不正常
  • TA的每日心情
    开心
    2018-12-3 09:50
  • 签到天数: 52 天

    [LV.5]常住居民I

    4

    主题

    123

    回帖

    1473

    积分

    解元

    Rank: 5Rank: 5

    积分
    1473
    4
     楼主| 发表于 2018-11-3 17:57:17 | 只看该作者
    kyletruman 发表于 2018-11-3 16:57
    楼主帖子中的超链接显示不正常,还有部分代码没有正常显示,请重新编辑帖子,勾选右上角的 纯文本,然后再 ...

    谢谢您的热心提醒和不断鼓励,现已根据您的建议对帖子内容进行了修正
  • TA的每日心情
    开心
    2018-12-3 09:50
  • 签到天数: 52 天

    [LV.5]常住居民I

    4

    主题

    123

    回帖

    1473

    积分

    解元

    Rank: 5Rank: 5

    积分
    1473
    5
     楼主| 发表于 2018-11-3 17:58:42 | 只看该作者
    sexinsexppl 发表于 2018-11-3 16:17
    有图片看不到、我网速问题?感谢楼主分享、

    谢谢您指出问题所在;已根据@kyletruman的建议对帖子内容进行了修正。
  • TA的每日心情
    开心
    2023-1-18 23:24
  • 签到天数: 211 天

    [LV.7]常住居民III

    427

    主题

    4539

    回帖

    9万

    积分

    超级版主

    Rank: 12Rank: 12Rank: 12

    积分
    92011

    灌水大神章小蜜蜂章笑傲江湖章翰林院专用章管理组专用章城管大队长

    7
    发表于 2018-11-3 19:05:28 | 只看该作者
    oversky 发表于 2018-11-3 18:46
    提醒一下,regular expression 在不同的编辑器里可能有不同的实作方式,
    也就是使用的语法不尽相容。
    例如 ...

    henices版主用的是vim编辑器,你可以问他
  • TA的每日心情
    奋斗
    2019-9-24 09:07
  • 签到天数: 2 天

    [LV.1]初来乍到

    3

    主题

    1028

    回帖

    -6581

    积分

    禁止发言

    积分
    -6581

    QQ 章灌水大神章

    8
    发表于 2019-9-24 09:30:31 | 只看该作者
    从零开始创建css文件
  • TA的每日心情
    奋斗
    昨天 06:46
  • 签到天数: 1047 天

    [LV.10]以坛为家III

    1

    主题

    1592

    回帖

    2万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    23059

    QQ 章

    9
    发表于 2020-3-6 12:17:09 | 只看该作者
    非常感谢楼主的分享,学习。