【CSS教学贴+L大韦氏修改CSS】小白式修改CSS方法

moumuxx

. ~' `8 @& _" \5 r本人是文科生，一点编程基础都没有，但是CSS非常的简单。
不满意别人做的CSS吗？自己改啊！
之前有不少大佬写过CSS教学贴，但是不太详细，看不太懂。
由此写一个超级小白修改CSS教学，以一个小白的角度写给小白们看。
; }/ v5 v* b4 W3 N6 }5 p8 K

9 d/ g; z; q6 Q- [/ E3 g# Z
% ^* g) p3 `" ~7 l, M% R使用到的软件

1. Mdict电脑版
1 z- f7 ]9 I* p( A9 ?; `
2.CSS编写工具软件ATOM/VScode等。（本帖使用的是Atom。。个人喜好。）
3 [% |& t! U1 x% l# L（也可以直接使用浏览器自带的开发者工具修改，然后CSS用文本文件打开就可以了，下跳有图片。）
0 m, W* c% m6 l& j
3.解包软件GetDict2_6  (详细使用教程贴跳转Oeasy的[索引] mdx 科普、制作教程大合集[进行中][20170126]

( Y+ g. ]9 x  V
8 o9 p; k3 }3 T( W* F" ~7 S" i" u本次操刀的词典是Langheping大大的[英-英] (2016/2/8)更新)Merriam-Webster's Advanced Learner's Dictionary (带图)

/ X) e  b1 W2 _" o: J$ N/ X3 `操刀之前切记保留一份原版CSS备份
4 Z3 k( a# J8 B+ Q
$ ]4 L, h9 h7 \2 c3 R/ {


( o7 A" p% D3 C
0 O1 B+ v( I9 I& O8 q具体操作

6 v# w/ o4 j+ I1. 打开Mdict，输入一个单词。

选用单词不是随便选择的，需要选择1-3个方便查看效果，并且需要有不同的区域，方便更好的来修改不同部分的CSS。
0 p8 M  Z, s# {, p
- B3 |6 M# k! |选择好单词之后，右键-查看源-保存TXT-改后缀为html

% f! ^6 R, ]& O3 h
; d0 s; U5 \; b( _: J

1 J  G* ~! l$ N+ O  h) y

3 E* ~3 m7 g4 D8 E' q


  z/ _; n# y* G, u
2.打开Atom软件，安装HTML preview插件，以方便查看CSS修改的效果。

如果词典文件只有MDX没有CSS，请前往下载Oeasy的贴下载Getdict，具体使用参考O大帖子，分解之后即可获得CSS。

将词典的CSS拖入Atom，然后将选择好的单词html文件拖入。
. S: |9 D3 k3 B6 s
接下来需要看看是否需要修改HTML里的CSS路径，不修改的话显示出来的排版并不是CSS的排版，然后右键-Inspect，得到开发者工具界面。
# [7 U3 o/ {& i# e8 W! f* {
$ v! j& h. U; T1 e  k在开发者界面里，左边的Elements界面各行对应的是html的各个部分，展开鼠标移至上方就可以在html窗口看见各行对应的部分。
& J; y9 X  ^2 Z: E7 w# |1 U. Z
' M% i, `8 r0 [8 o6 m1 d
3 t( t4 N' w* s  r6 a- |
" j( w- r; X0 W' |2 ?6 G, Z& W. G* |
- C3 c$ x2 j, U* S' v

  M! h  z( I% z: D* j4 x

! H) E3 L7 P$ ]" v- E2 R不想安装专业软件怎么办？用chrome就可以！！！
' e+ g1 h& I5 a  D有人反映插件安装可能有点麻烦，用Chrome就可以啦！！
直接双击html文件，在浏览器打开，右键-检查

( {/ {3 d. w* U% i, M3 M
/ X  u) P! T* Z6 P! H
- d7 Q5 c0 G& L- _7 q8 X
$ m+ c  a( H+ t" a6 v* e2 C3 D- e% Z- G
# V) i0 r" J. a0 z1 s# _; S6 J0 N
" s! d8 y+ }% I# c: K, R$ X
6 n  s' w9 q2 J' Q- b8 u3. 开始修改CSS
4 f" e9 O- o4 S4 [. @
+ ^  R& M5 S+ r& j! q找到自己需要修改的地方，然后点击对应行，可以看见开发者工具里的styles显示的是需要修改部分的现有属性。

可以在开发者工具的Sources里直接打开CSS文件，这样可以在属性修改框的右上角看见对应的CSS行数，修改后的CSS会直接显示在Sources里。
' z. _0 @% i4 k/ \/ ^9 p; U% m（比如我比较懒，在开发者工具里修改好全部属性之后，直接跑到Sources里全选，复制，覆盖原版的CSS代码。。。就不用一个一个的对应修改了。）
9 D1 W- e" s: R* S. P4 i' h5 J  [
- m2 m* p. o2 Q+ e
' r& ]1 J* Q) s( ]; \比如下图中的border-bottom:#3F51B5 2px solid对应的是单词的下划线：颜色，粗细，直线属性（直线还是虚线等）
: _; w. p& j6 K$ {) C7 r
. A: u; G# x. r; Q" j1 O这里列举一下简单的修改：
' E. I) e7 i2 F; U+ ~/ D- [: v1 Lfont-size                                字体大小
font-family                                字体
/ G. T/ V5 h" h3 {; i! V. l+ t' j& u- Gfont-weight                        字体粗细
font-style                                字体风格
color                                        字体颜色
3 H6 ^; P( Z) B- {. t! C3 j% h: ELine-height                        行间距
9 O. f- l# V6 sbackground                        背景颜色
padding                                背景填充大小
text-transform                        大小写转换等
/ u* l1 y8 ~# u3 J3 }border-style                        框线样式
border-radius                        框角弧度
! i/ n0 e8 M# q# m, o& }3 q
其他的自行研究~~改错了可以删除，瞎戳戳试试看说不定有意想不到的效果
# ?4 C  N, z/ h: L
a) 比如这里需要修改词性的图片，我加了字体，以及修改了图片大小，字体大小，框角弧度。
（在CSS里用/*xxx*/可以加备注，方便查看对应的属性进行修改。）
8 j. `: E7 ~' B. ]+ m% F) }b) 原版的CSS的第一行，/*body｛｝*/为注释，不起作用。我希望全部的字体都显示为Arial，则可以把“/* */”删掉，留下
8 Z" t: w5 X; Z0 ?2 {3 ]

1. body{
   $ O: l' [; j" Z* o4 K8 E/ C
2. font-family:arial,sans-serif;
   
3. Line-height:1.5em;
   
4. color:#555555;
   : q& }- y: I. W# x, G1 D0 u1 w7 G
5. }

复制代码

. ~. t9 X0 ?& b0 f
6 Z, [7 B: z0 Z

7 G) `: c2 E5 H* r; m1 `' G) q$ Wc) 这里修改主单词，请教了一下@tanek 。。。这个CSS比较坑爹，没有写入，需要多加一段代码，一般情况下是不需要多些的，修改一般在CSS都有写
9 T6 k' b* B( ~; ^; l& t  x  \
2 i0 \- ?7 Z' @& U4 M8 I
一般情况如上图修改，这里不展开这个坑爹的格式修改了_(:з」∠)_，大家力所能及吧~！



- N" a- c% q0 z2 l

) P( o! V; t3 C$ M



* p. O3 d6 J! d; R

3 S* R2 g% @5 {. e3 R; j说一下挽救手残的一个关键：ctrl+z撤销
0 P& L3 P5 N0 C# \- P, X. p
; c, Q4 b& Z" i' F) b6 x9 a) `( o7 L挑了一个有点坑的CSS修改_(:з」∠)_
纸上得来终觉浅，绝知此事要躬行。
大家动手折腾才是硬道理！！！！！！！！！！！！！
5 I7 k3 w$ k/ j7 F' L$ @
) F! Z( H# ]+ e$ F+ y# w; k7 t5 y
6 Z/ \# |* U, b7 i) Z

BLKSerene

另外你列的几个属性 font-style 就是改斜体的
% q4 F+ d: m3 R8 w三个值 normal 不斜体 italic 正常斜体 oblique 是针对那些无斜体字体的字体 模拟倾斜

Line-height 最好全小写 line-height 虽然没什么影响
) b* i" V' i2 P  g$ T0 _, X) @background 其实是个缩写属性
. X6 Y$ X* C3 D" ?分别是 background-color background-image background-position background-repeat
background: #666 url(/666.png) center no-repeat 比如说
当然只写一个 background: #666那就是定义背景颜色
也可以显式申明 background-color: #777 同时定义图片和颜色的话 图片显示不出就会显示背景颜色
- T5 q. v1 \  \3 D6 B: N相当于一个备用
$ r/ U) t, n0 f) F' K4 n! Iborder 一般都用缩写
/ s2 V, B7 K6 U/ l0 J  V" Fborder: 1px solid #292929 就是1像素实心 #292929颜色的边框
分开写是 border-width border-style border-color

border-bottom 不是下划线 只是下边框而已
2 N% E! L( r  I& s/ H添加下划线要用 text-decoration: underline
5 [( V; t4 ?7 x3 R( |% q# S- y
完整的属性和值 可以百度MDN 很全

BLKSerene

简单一点 如果不介意修改出来的CSS结构不行
直接在要改的地方右键审查 然后看该元素属性如果有 class="aaa" 或者有 id="bbb"
然后 css 在最后直接接着写（一个页面中 class 是一类元素 id 只可能针对一个元素）
/* 比如说要加粗 */
.aaa {
    font-weight: bold
}
: e6 k$ G: |9 a7 B( H5 @/* 或者比如说要加斜体 */
#bbb {
6 h  E' c2 c9 c5 I2 {% @5 k    font-style: italic
$ _, m' M1 J( q6 G8 N9 q}
8 z( z  _, v( f  |* l) S这样有个好处 原来CSS可能是依靠多个地方复写才计算出最终结果
那也不用管CSS里真正决定最终样式的出现在哪一行（CSS有优先级计算 并不是代码在后面的一定覆盖掉前面的）
9 r9 m* f: E) S0 B9 x7 }强行复写样式就行 如果出问题 直接删掉最后几行就行
( B- J, O5 M: E, m7 t( Y5 E当然有优先级问题可能复写不掉 那可以把父元素的类也写上去（有ID优先用ID 因为优先级高）
  T: \: D: ~0 ^$ D.ccc .aaa {} 多套几层优先级肯定比原来CSS的高（除非HTML里用了内联CSS）
5 |3 a6 _: d: l; @  ~
+ l( X1 W+ ?: I3 F1 f顺便说一下 CSS 规则的优先级 如果多条规则（=选择器 加后面的属性：值对）同时应用于一个元素
( i8 V9 Y5 C) r( I就是出现重复的情况 每个写在HTML内联style 里的选择器优先度为1000 ID选择器为100 类 伪类选择器为10
元素 伪元素选择器为1  除非相同才以代码中后出现的那个为准
. x! [2 d# @* y$ T* e比如说
/* 两个id 一个元素选择器 优先级是 201 */
, A' X( `7 ]: y#a #b c {
1 ?8 g4 Y7 t2 W/ s    background: #000
3 ~$ G2 M$ a7 E* m, p}
/* 一个ID 选择器 一个类选择器 一个元素选择器 优先级111 */
#a .b c {
    background: #fff
, f( g7 P0 ~! D! K% a7 S}
上面结果执行后 c标签的背景是黑的 并不会执行后面一条

Serica

咩神威武，打算追随咩神的脚步学习。

moumuxx

kyletruman 发表于 2017-4-17 22:54
) b0 O1 s$ ?) U: B  @8 r, i8 ]好详细，图文并茂，这么好的帖子该加为精华帖呀

多谢大佬肯定~！

tanek

咩神威武霸气一统江湖。
; t2 `3 [# o$ u# a
, _' B4 ?# N& L1 x. U; B7 f% s, Z这么多图，真的辛苦了。

moumuxx

tanek 发表于 2017-4-17 22:58
( I. T6 q# K  q' A; s' [# f咩神威武霸气一统江湖。

5 q/ J6 d6 l. a4 M, X: e这么多图，真的辛苦了。

多些大神本次支持以及技术指导

galvinzhang

必须赞一个。咩神太威武了。我的Atom 的PREVIEW HTML还没搞定，只能用UltraEdit。

kkytr

$ a, S& }0 C* J$ B2 T" V咩神就是厲害阿 跟著學習了

moumuxx

galvinzhang 发表于 2017-4-17 23:19
必须赞一个。咩神太威武了。我的Atom 的PREVIEW HTML还没搞定，只能用UltraEdit。

- H) ?' q2 P7 N& }/ k都是一样哒，方便编辑就口以了

moumuxx

blkserene 发表于 2017-4-18 13:49
简单一点 如果不介意修改出来的CSS结构不行
直接在要改的地方右键审查 然后看该元素属性如果有 class="aaa ...

/ v3 o) X5 U6 h6 a5 Y! V多谢大神补充说明～
" P1 \# D' t9 ]) `% N$ V) e8 K  W
6 q; k0 q7 e9 \5 _; E7 m8 \. H
. ]5 ~: L4 G% _0 e' ^但其实我是改到第三个css才学会看class和id的。小白进阶级

木木木

你实在太棒了，学到一手！我都是人工定位类和属性的……

shakahenryqht

好贴啊！绝对的好帖子，普及知识！！

leshidl

感谢咩神的教程！
科普贴，我要好好参悟一下！

frenk

好贴啊！

moumuxx

blkserene 发表于 2017-4-18 16:50
: Y2 z. v% U7 s, f) }. ~7 `另外你列的几个属性 font-style 就是改斜体的
4 J( Q4 n" ~' `- ~+ ?三个值 normal 不斜体 italic 正常斜体 oblique 是针对那些 ...

+ S! Y8 t" L% Z9 Z( d; m  r( K谢谢大佬补充！看过你的css，简直业界良心啊，标注的很完整。
( x6 i. V+ J! w) H& N
要是大佬能出个css教程贴就好了
( W, P0 ]: J& k- ^7 ~/ o' R! O
( p3 ?( h) S6 i0 H* g目前本人才接触了没几天。。。补了一本书看

BLKSerene

moumuxx 发表于 2017-4-20 18:34
( H4 q- |1 |2 b0 U2 P5 A, w谢谢大佬补充！看过你的css，简直业界良心啊，标注的很完整。
9 }5 u' t2 x; f7 z! k/ R; H
要是大佬能出个css教程贴就好了{:11_397 ...

; W' d" j2 O% E& o* _2 w7 B/ E
3 K( l& N: n/ y真的要系统学习的话 CSS 也好 HTML 也好 需要交互的话 JS 也好 其实就是前端码农之路了。。
淘宝当当书很多 百度一下也有很多教程
我也是文科（英语专业）一开始啥都不会 也是慢慢看了很多教程文档 时间一长就好了

yfwiki1

不是吧？！文科生都学的这么牛了，
我这计算机专业的岂不是要被清出社会了

Battmant

咩神I love you

greatszh

长话短说，css就是以前没出现xml以前，xml是自己定义标签自己利用解析器解释标签，css仅仅是个浏览器级别的html标签替换机制，当时的网络情况是32k级别的，为了控制网页html的文件大小而自定义相关html标签用的，真感觉理解起来费劲，直接拷贝别人网页上的特效，知道该往css里啥位置填啥东西，今后在自己的html网页文件中使用自己精简过的标签就是了。

abcde吕

我准备等回家就按照这个帖子折腾搞搞

moumuxx

abcde吕 发表于 2017-5-2 04:03
7 p  t: s" ~/ S' c; l5 [8 o我准备等回家就按照这个帖子折腾搞搞

+ [: U+ ?7 {5 n$ g! t鼓掌鼓掌~~

Budha

This tutorial guideline is great for learner of dictionary editing like me.

baoboss

跟着入门学习下

九合诸侯

LZ这个帖子非常好， 完全的小白入门级！
3 Y; h) ]3 G; l( E* Z6 N
在下有个小疑问， 这个同样适用于那些没有CSS的词典么？ 比如在下一直想修改一下元照英美法词典的字体和颜色， 不过试了好几次， 都没成功过。