TA的每日心情 | 开心
2023-3-27 02:01 |
|---|
签到天数: 4 天 [LV.2]偶尔看看I
|
本帖最后由 moumuxx 于 2017-4-17 23:17 编辑 4 K p5 ]# e, {2 T9 {$ j/ J
) f& X& j# C5 j% E8 u8 F6 _
本人是文科生，一点编程基础都没有，但是CSS非常的简单。( x/ |& E4 @4 C! W" K0 e" |
 不满意别人做的CSS吗？自己改啊！ p% w3 r( M4 W9 f. j* u
之前有不少大佬写过CSS教学贴，但是不太详细，看不太懂。& i1 h) @8 W5 s7 w) r& W
由此写一个超级小白修改CSS教学，以一个小白的角度写给小白们看。
! d1 _; V' Q5 i6 T7 M. {
* c/ F- v; Y! ~0 y- b* S
' ~# |$ K d3 R4 C( A
# N- t% O% e1 V使用到的软件& U- e/ ^9 v# p7 S' U4 K/ B% X
- J, C8 \% `. U3 r' w4 M1. Mdict电脑版
% b: I+ i6 m5 k) o3 u* Q8 [, J, T% C s! d- [+ O
2.CSS编写工具软件ATOM/VScode等。（本帖使用的是Atom。。个人喜好。）
3 f! |1 X7 m) u& }. T& u（也可以直接使用浏览器自带的开发者工具修改，然后CSS用文本文件打开就可以了，下跳有图片。）) a5 @7 N+ L/ i+ I+ R/ ]
) S1 o/ G9 r, i9 _6 l% Q3.解包软件GetDict2_6 (详细使用教程贴跳转Oeasy的[索引] mdx 科普、制作教程大合集[进行中][20170126]
| w4 c8 v1 {% [' J9 N I
% w$ F/ ]7 X. E5 b8 z) c
/ ?! E* C* } g/ r; B本次操刀的词典是Langheping大大的[英-英] (2016/2/8)更新)Merriam-Webster's Advanced Learner's Dictionary (带图)* I+ h: P1 V& X
! k2 ~" \' G+ f' N3 P
操刀之前切记保留一份原版CSS备份
, p: _& }4 |8 a5 }% l. _& B" G4 J6 |; J
' e- d' j1 _ M7 Q
 ' A! e0 O2 ~% J! d
6 M$ i% L# p6 f& f* l- ~- t- t/ e* u7 Z9 E
具体操作
3 g7 d- J4 ~! i' Z6 N: p/ {; ]3 x
, F: u% t5 T5 P( Y1 N8 E1. 打开Mdict，输入一个单词。
. f* X$ x7 n4 _7 G- h9 {" G/ |, i8 [7 i8 J5 w
选用单词不是随便选择的，需要选择1-3个方便查看效果，并且需要有不同的区域，方便更好的来修改不同部分的CSS。
2 Z7 U; E! Y) I
8 X3 K w1 I( d; L选择好单词之后，右键-查看源-保存TXT-改后缀为html
! k# g8 d% I2 |9 n3 M: G: {8 B* }! S( ?0 a( i
1 {3 ?% H2 c& |/ J* I1 l9 v 9 m* G7 _, H: z( S3 K4 C
 6 _& [6 f) V0 t" K- b3 |
2 w; v, ?. C7 q- f, Z6 u/ l& h1 @& u% ]5 B% H0 H! P% B+ ~3 j/ K
`+ j/ q4 o, F7 S; o7 H
^) p. @4 y& c: ]1 Z% w' N- g0 y2 m# x
$ [' e0 I3 K* z) h! A G
2.打开Atom软件，安装HTML preview插件，以方便查看CSS修改的效果。. S: U/ D0 s* w- |! e% z" i
# f, Q1 }1 V# P) }如果词典文件只有MDX没有CSS，请前往下载Oeasy的贴下载Getdict，具体使用参考O大帖子，分解之后即可获得CSS。
. Z @; b6 p$ D+ q. A
7 x+ G' R. {/ Y( {0 r7 l将词典的CSS拖入Atom，然后将选择好的单词html文件拖入。
( \* F6 D- x2 J2 L/ u, @6 ~9 A, Y1 l1 x' m5 }
接下来需要看看是否需要修改HTML里的CSS路径，不修改的话显示出来的排版并不是CSS的排版，然后右键-Inspect，得到开发者工具界面。
# {# v; n% O# U3 k
* ], C% B3 Q; s/ V* v6 s在开发者界面里，左边的Elements界面各行对应的是html的各个部分，展开鼠标移至上方就可以在html窗口看见各行对应的部分。0 o6 r( C5 @* w
6 E8 ~( B' Z, p- h
 ' E; d( i6 Y# K' H
 " m6 M0 L) v7 d8 t& `
 : W1 s: z- G$ s. {, B
7 g& v/ ^/ H3 f1 ^2 i; ]( Z' x# m # o7 r9 b$ H; ` l! m% K& {3 D$ v
9 k) |$ S6 O5 X" A: k; a* O# E
. e+ o: U' u m9 ~; n
不想安装专业软件怎么办？用chrome就可以！！！5 j l. K# F6 T
有人反映插件安装可能有点麻烦，用Chrome就可以啦！！
" O x6 V6 A3 i P: O I5 @8 q4 c6 N直接双击html文件，在浏览器打开，右键-检查1 g7 u3 F1 @: R; v5 o3 e
 9 ]1 c: K$ b% `; |/ j6 p
* c% r3 P& F( f: U
" n# J! v0 Q) k; J( F) N; n4 t4 W( l: ^& b2 r7 i
/ K& R/ C. d% k5 E# L
! O, ^9 \# @7 S [1 G( e
3 w) v' |- R; V/ S
3. 开始修改CSS
9 H0 y' a* H! Q u- p
( l( X8 ]' A* e5 T找到自己需要修改的地方，然后点击对应行，可以看见开发者工具里的styles显示的是需要修改部分的现有属性。
) Y2 ]+ w1 w3 H6 N# [- J
0 I' }5 m0 Q3 M s; ~可以在开发者工具的Sources里直接打开CSS文件，这样可以在属性修改框的右上角看见对应的CSS行数，修改后的CSS会直接显示在Sources里。$ y, Z, L# z3 b0 `+ ]+ h
（比如我比较懒，在开发者工具里修改好全部属性之后，直接跑到Sources里全选，复制，覆盖原版的CSS代码。。。就不用一个一个的对应修改了。）, t, b- z; N* x; D; H
 , s" ?& A3 n- H- U2 }$ r
& J: R3 s* F3 K& t/ [; T) T* m* a
比如下图中的border-bottom:#3F51B5 2px solid对应的是单词的下划线：颜色，粗细，直线属性（直线还是虚线等）
, k6 ?! F% q J7 A7 ` ! B- ~& X+ E, y! L2 d7 ?; S
这里列举一下简单的修改：, k. f1 e9 F/ }, T/ g( n. ?5 @
font-size 字体大小; Y9 d8 W( W/ ^
font-family 字体
+ t X& }& O5 O5 ^. \8 Zfont-weight 字体粗细
2 K d3 X( ^* j. O% m- R9 R! }font-style 字体风格
% S7 z$ W! G9 d& s3 q4 G4 Ecolor 字体颜色
! _$ M' i) Q6 g' w% v6 e8 sLine-height 行间距
/ X' M# j% ^2 A. E6 [ Zbackground 背景颜色, E% t( ~( ?) P) w
padding 背景填充大小3 u% ^5 m2 J6 c3 {+ O! \
text-transform 大小写转换等% }! u O1 A( G6 I- V9 N
border-style 框线样式% [0 I1 S& q$ @3 F$ I' E
border-radius 框角弧度
) P8 Z5 I. u2 H- Y6 t# e7 d2 u- U2 c: [' E
其他的自行研究~~改错了可以删除，瞎戳戳试试看说不定有意想不到的效果% V/ \6 l4 j# P( Q' g* d t
) l9 D, a6 ]0 N) Y* L, x% Ra) 比如这里需要修改词性的图片，我加了字体，以及修改了图片大小，字体大小，框角弧度。4 r) F! y# g" C7 D
（在CSS里用/*xxx*/可以加备注，方便查看对应的属性进行修改。）
% H) w, x6 c% \) t" {" y( ~b) 原版的CSS的第一行，/*body｛｝*/为注释，不起作用。我希望全部的字体都显示为Arial，则可以把“/* */”删掉，留下; S3 [* B: R% D/ P7 ~0 Z2 D, P
" `" b$ `6 I" G+ e" k
- body{
2 r6 ]% Q$ `, j$ z3 T - font-family:arial,sans-serif;1 f( ~" K. U' O* R) T# U
- Line-height:1.5em;1 p5 B% s1 t6 `8 ~. t$ q1 U1 \
- color:#555555;0 x& ]; h% n7 ^7 S/ P' z; {* w
- }
5 \ ^+ W0 M" G& e2 E; }$ U 8 a% B, e w6 V* p+ m. G" R
0 ]9 _3 Z) g* e* u( Hc) 这里修改主单词，请教了一下@tanek 。。。这个CSS比较坑爹，没有写入，需要多加一段代码，一般情况下是不需要多些的，修改一般在CSS都有写3 F4 L6 s8 ~9 Y# E
 - Y4 \2 h# f5 h9 v, j! h# [) ~, o- u' w
) |; T/ ^8 [0 X* V
一般情况如上图修改，这里不展开这个坑爹的格式修改了_(:з」∠)_，大家力所能及吧~！
% v# k) u# f; {1 \* J; i* |1 v5 f4 b( r. \, V' n9 n
 $ Y7 d2 l% v0 d. }1 e
' U$ N9 L2 L t9 n* P% o
# j' e' E/ M; C & r0 S# y1 o- r# H0 {
 ( y* r: I* ~" y9 g1 k: [/ A
 ) Y K" @$ }! e0 F6 q
& {" f: ?- o0 X1 r
: C k6 l( v3 b6 Q+ B7 g) M4 a0 Z- @3 O6 L7 v( c+ x
" u& ^& R; w2 l# ?% x- G/ C, S4 C
说一下挽救手残的一个关键：ctrl+z撤销+ M# O2 H* Y" c- q! [: \4 {
3 M" _8 m9 p1 F: M0 _7 G& z
挑了一个有点坑的CSS修改_(:з」∠)_
; n" l5 y2 b# ~$ B4 S4 K纸上得来终觉浅，绝知此事要躬行。( |& j0 w7 @3 Y4 S, U3 J
大家动手折腾才是硬道理！！！！！！！！！！！！！
4 B' X2 t$ M0 j% s7 ^$ x6 {/ L/ U
& u7 W- Y* M6 M/ ]. _
+ O$ n Y" B# Z
+ w B c7 T8 i U9 f; q |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
评分
-
9
查看全部评分
-
|
[复制链接]
发表于 2017-4-17 22:47:28
发表于 2017-4-18 16:50:02
楼主
多谢大佬肯定~！
多些大神本次支持以及技术指导
