【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法
本帖最后由 moumuxx 于 2017-4-17 23:17 编辑本人是文科生,一点编程基础都没有,但是CSS非常的简单。
{:11_395:} 不满意别人做的CSS吗?自己改啊!
之前有不少大佬写过CSS教学贴,但是不太详细,看不太懂。
由此写一个超级小白修改CSS教学,以一个小白的角度写给小白们看。
使用到的软件
1. Mdict电脑版
2.CSS编写工具软件ATOM/VScode等。(本帖使用的是Atom。。个人喜好。)
(也可以直接使用浏览器自带的开发者工具修改,然后CSS用文本文件打开就可以了,下跳有图片。)
3.解包软件GetDict2_6(详细使用教程贴跳转Oeasy的[索引] mdx 科普、制作教程大合集[进行中]
本次操刀的词典是Langheping大大的[英-英] (2016/2/8)更新)Merriam-Webster's Advanced Learner's Dictionary (带图)
操刀之前切记保留一份原版CSS备份
static/image/hrline/5.gif
具体操作
1. 打开Mdict,输入一个单词。
选用单词不是随便选择的,需要选择1-3个方便查看效果,并且需要有不同的区域,方便更好的来修改不同部分的CSS。
选择好单词之后,右键-查看源-保存TXT-改后缀为html
https://www.pdawiki.com/forum/data/attachment/album/201704/17/192936pa9739o7n9997lna.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/192939hjzw96jwssywo96h.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/192939ckz42h4q4h4l2c9q.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/192938eu301w03h1hhr3hc.png
static/image/hrline/5.gif
2.打开Atom软件,安装HTML preview插件,以方便查看CSS修改的效果。
如果词典文件只有MDX没有CSS,请前往下载Oeasy的贴下载Getdict,具体使用参考O大帖子,分解之后即可获得CSS。
将词典的CSS拖入Atom,然后将选择好的单词html文件拖入。
接下来需要看看是否需要修改HTML里的CSS路径,不修改的话显示出来的排版并不是CSS的排版,然后右键-Inspect,得到开发者工具界面。
在开发者界面里,左边的Elements界面各行对应的是html的各个部分,展开鼠标移至上方就可以在html窗口看见各行对应的部分。
https://www.pdawiki.com/forum/data/attachment/album/201704/17/194826y4cdrd3bktc8izmb.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/194821e22oyfftt1271ij7.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/194823ifdjdq1j1qmhofgo.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/194824voono7vno7ollt99.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/194827lr6v4ygh6hh6g4v2.png
不想安装专业软件怎么办?用chrome就可以!!!
有人反映插件安装可能有点麻烦,用Chrome就可以啦!!
直接双击html文件,在浏览器打开,右键-检查
https://www.pdawiki.com/forum/data/attachment/album/201704/17/231511r3z38w6v6cfg7czf.png
static/image/hrline/5.gif
3. 开始修改CSS
找到自己需要修改的地方,然后点击对应行,可以看见开发者工具里的styles显示的是需要修改部分的现有属性。
可以在开发者工具的Sources里直接打开CSS文件,这样可以在属性修改框的右上角看见对应的CSS行数,修改后的CSS会直接显示在Sources里。
(比如我比较懒,在开发者工具里修改好全部属性之后,直接跑到Sources里全选,复制,覆盖原版的CSS代码。。。就不用一个一个的对应修改了。)
https://www.pdawiki.com/forum/data/attachment/album/201704/17/204901je4047n7zkze8te2.png
比如下图中的border-bottom:#3F51B5 2px solid对应的是单词的下划线:颜色,粗细,直线属性(直线还是虚线等)
https://www.pdawiki.com/forum/data/attachment/album/201704/17/201226kispxyyxy2s49s9z.png
这里列举一下简单的修改:
font-size 字体大小
font-family 字体
font-weight 字体粗细
font-style 字体风格
color 字体颜色
Line-height 行间距
background 背景颜色
padding 背景填充大小
text-transform 大小写转换等
border-style 框线样式
border-radius 框角弧度
其他的自行研究~~改错了可以删除,瞎戳戳试试看说不定有意想不到的效果
a) 比如这里需要修改词性的图片,我加了字体,以及修改了图片大小,字体大小,框角弧度。
(在CSS里用/*xxx*/可以加备注,方便查看对应的属性进行修改。)
b) 原版的CSS的第一行,/*body{}*/为注释,不起作用。我希望全部的字体都显示为Arial,则可以把“/* */”删掉,留下
body{
font-family:arial,sans-serif;
Line-height:1.5em;
color:#555555;
}
https://www.pdawiki.com/forum/data/attachment/album/201704/17/204524joxoefotooexoptx.png
c) 这里修改主单词,请教了一下@tanek 。。。这个CSS比较坑爹,没有写入,需要多加一段代码,一般情况下是不需要多些的,修改一般在CSS都有写
https://www.pdawiki.com/forum/data/attachment/album/201704/17/201226kispxyyxy2s49s9z.pnghttps://www.pdawiki.com/forum/data/attachment/album/201704/17/201224bhh7yhsdddidjksi.png
一般情况如上图修改,这里不展开这个坑爹的格式修改了_(:з」∠)_,大家力所能及吧~!
https://www.pdawiki.com/forum/data/attachment/album/201704/17/224605je685pbv35xg58ue.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/224603rrrtz2ztx8tmy2xt.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/224603x3f3x5kkt9q7o1m5.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/224602qvivzpt2o0yoyokp.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/224601chxzzg409t4sszxd.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/224600dth4goi6t64mtmz6.png
说一下挽救手残的一个关键:ctrl+z撤销
挑了一个有点坑的CSS修改_(:з」∠)_
纸上得来终觉浅,绝知此事要躬行。
大家动手折腾才是硬道理!!!!!!!!!!!!!
https://www.pdawiki.com/forum/data/attachment/album/201704/17/225128mpwvbjszgpvq7gqy.png
https://www.pdawiki.com/forum/data/attachment/album/201704/17/225126mlvfr3f1areyvbnv.png 另外你列的几个属性 font-style 就是改斜体的
三个值 normal 不斜体 italic 正常斜体 oblique 是针对那些无斜体字体的字体 模拟倾斜
Line-height 最好全小写 line-height 虽然没什么影响
background 其实是个缩写属性
分别是 background-color background-image background-position background-repeat
background: #666 url(/666.png) center no-repeat 比如说
当然只写一个 background: #666那就是定义背景颜色
也可以显式申明 background-color: #777 同时定义图片和颜色的话 图片显示不出就会显示背景颜色
相当于一个备用
border 一般都用缩写
border: 1px solid #292929 就是1像素实心 #292929颜色的边框
分开写是 border-width border-style border-color
border-bottom 不是下划线 只是下边框而已
添加下划线要用 text-decoration: underline
完整的属性和值 可以百度MDN 很全 本帖最后由 blkserene 于 2017-4-18 13:52 编辑
简单一点 如果不介意修改出来的CSS结构不行
直接在要改的地方右键审查 然后看该元素属性如果有 class="aaa" 或者有 id="bbb"
然后 css 在最后直接接着写(一个页面中 class 是一类元素 id 只可能针对一个元素)
/* 比如说要加粗 */
.aaa {
font-weight: bold
}
/* 或者比如说要加斜体 */
#bbb {
font-style: italic
}
这样有个好处 原来CSS可能是依靠多个地方复写才计算出最终结果
那也不用管CSS里真正决定最终样式的出现在哪一行(CSS有优先级计算 并不是代码在后面的一定覆盖掉前面的)
强行复写样式就行 如果出问题 直接删掉最后几行就行
当然有优先级问题可能复写不掉 那可以把父元素的类也写上去(有ID优先用ID 因为优先级高)
.ccc .aaa {} 多套几层优先级肯定比原来CSS的高(除非HTML里用了内联CSS)
顺便说一下 CSS 规则的优先级 如果多条规则(=选择器 加后面的属性:值对)同时应用于一个元素
就是出现重复的情况 每个写在HTML内联style 里的选择器优先度为1000 ID选择器为100 类 伪类选择器为10
元素 伪元素选择器为1除非相同才以代码中后出现的那个为准
比如说
/* 两个id 一个元素选择器 优先级是 201 */
#a #b c {
background: #000
}
/* 一个ID 选择器 一个类选择器 一个元素选择器 优先级111 */
#a .b c {
background: #fff
}
上面结果执行后 c标签的背景是黑的 并不会执行后面一条 咩神威武,打算追随咩神的脚步学习。 kyletruman 发表于 2017-4-17 22:54
好详细,图文并茂,这么好的帖子该加为精华帖呀
{:11_404:}多谢大佬肯定~! 咩神威武霸气一统江湖。
这么多图,真的辛苦了。{:11_384:} tanek 发表于 2017-4-17 22:58
咩神威武霸气一统江湖。
这么多图,真的辛苦了。
{:11_397:}多些大神本次支持以及技术指导 必须赞一个。咩神太威武了。我的Atom 的PREVIEW HTML还没搞定,只能用UltraEdit。 本帖最后由 kkytr 于 2017-4-17 23:40 编辑
咩神就是厲害阿{:11_384:} 跟著學習了 galvinzhang 发表于 2017-4-17 23:19
必须赞一个。咩神太威武了。我的Atom 的PREVIEW HTML还没搞定,只能用UltraEdit。
都是一样哒,方便编辑就口以了 blkserene 发表于 2017-4-18 13:49
简单一点 如果不介意修改出来的CSS结构不行
直接在要改的地方右键审查 然后看该元素属性如果有 class="aaa ...
多谢大神补充说明~
但其实我是改到第三个css才学会看class和id的。小白进阶级{:11_397:} 你实在太棒了,学到一手!我都是人工定位类和属性的……{:11_388:} 好贴啊!绝对的好帖子,普及知识!! 感谢咩神的教程!
科普贴,我要好好参悟一下!
好贴啊! blkserene 发表于 2017-4-18 16:50
另外你列的几个属性 font-style 就是改斜体的
三个值 normal 不斜体 italic 正常斜体 oblique 是针对那些 ...
谢谢大佬补充!看过你的css,简直业界良心啊,标注的很完整。
要是大佬能出个css教程贴就好了{:11_397:}
目前本人才接触了没几天。。。补了一本书看 moumuxx 发表于 2017-4-20 18:34
谢谢大佬补充!看过你的css,简直业界良心啊,标注的很完整。
要是大佬能出个css教程贴就好了{:11_397 ...
真的要系统学习的话 CSS 也好 HTML 也好 需要交互的话 JS 也好 其实就是前端码农之路了。。
淘宝当当书很多 百度一下也有很多教程
我也是文科(英语专业)一开始啥都不会 也是慢慢看了很多教程文档 时间一长就好了 不是吧?!文科生都学的这么牛了,
我这计算机专业的岂不是要被清出社会了 咩神I love you 长话短说,css就是以前没出现xml以前,xml是自己定义标签自己利用解析器解释标签,css仅仅是个浏览器级别的html标签替换机制,当时的网络情况是32k级别的,为了控制网页html的文件大小而自定义相关html标签用的,真感觉理解起来费劲,直接拷贝别人网页上的特效,知道该往css里啥位置填啥东西,今后在自己的html网页文件中使用自己精简过的标签就是了。 我准备等回家就按照这个帖子折腾搞搞 abcde吕 发表于 2017-5-2 04:03
我准备等回家就按照这个帖子折腾搞搞
鼓掌鼓掌~~{:11_397:} This tutorial guideline is great for learner of dictionary editing like me. 跟着入门学习下 LZ这个帖子非常好, 完全的小白入门级!
在下有个小疑问, 这个同样适用于那些没有CSS的词典么? 比如在下一直想修改一下元照英美法词典的字体和颜色, 不过试了好几次, 都没成功过。