TA的每日心情 | 开心
2023-3-27 02:01 |
|---|
签到天数: 4 天 [LV.2]偶尔看看I
|
本帖最后由 moumuxx 于 2017-4-17 23:17 编辑
$ p. D. x1 L# [! w, C1 r1 A
! \, n3 U. q7 ]1 M3 W5 l& j2 J9 s本人是文科生，一点编程基础都没有，但是CSS非常的简单。& u' Y% \ x" v. c
 不满意别人做的CSS吗？自己改啊！; B! \! k& s, K
之前有不少大佬写过CSS教学贴，但是不太详细，看不太懂。
9 Y6 |) z- [* O2 W# p* Q' q2 n由此写一个超级小白修改CSS教学，以一个小白的角度写给小白们看。
/ y; n' k" l# R5 j4 E: k. Q0 ?& R+ {0 |6 |
5 Z3 N9 K# u* i, z5 m" x( |4 T m' s. V) Z
使用到的软件
2 P: M5 H7 } N7 Q2 x& Y1 Q W) J6 b. l8 C2 x9 i( d% n' r& X
1. Mdict电脑版
% ]* x. G2 H, O: [. k* f3 i- N( t4 p4 n% _3 t, o9 m2 Q
2.CSS编写工具软件ATOM/VScode等。（本帖使用的是Atom。。个人喜好。）1 V( E2 N- T$ F9 S) s* u; Z
（也可以直接使用浏览器自带的开发者工具修改，然后CSS用文本文件打开就可以了，下跳有图片。）
; `, [) l; ?% o" L% Y* X# L7 Y# z5 C1 h, O, s9 \* y) _+ ^+ a3 ]
3.解包软件GetDict2_6 (详细使用教程贴跳转Oeasy的[索引] mdx 科普、制作教程大合集[进行中][20170126]9 a: s+ v9 J. w+ O. |2 @
- B5 w) {& N4 V* z Y W
2 ?8 z1 T* L% p$ E, Z7 T }本次操刀的词典是Langheping大大的[英-英] (2016/2/8)更新)Merriam-Webster's Advanced Learner's Dictionary (带图)
6 | d( a; A" F6 V0 n7 z
9 e& ]+ ~: _! m, ^% A( S+ \: G操刀之前切记保留一份原版CSS备份! K2 [/ ~$ D- U! I ~
% y* I: o$ T! b/ e- y' {
! P0 x: P' L8 ]- h
 ! z$ q6 I6 }3 i" L5 v7 L! E$ y8 W
2 G) j& N# @4 n2 u' J, l3 E( G
' r% g: Q9 q- {0 a" r! H4 h具体操作$ T# l/ w3 H5 ]2 z% P
8 {. `$ p8 f6 }5 |" y1. 打开Mdict，输入一个单词。
: N R( K5 `( M& s* ?/ H
. P8 _& S. g: Y# m2 S选用单词不是随便选择的，需要选择1-3个方便查看效果，并且需要有不同的区域，方便更好的来修改不同部分的CSS。 g1 F: w7 c! n! O4 l. ]$ b9 l! [& P
# m" P* y& v" j% v$ J
选择好单词之后，右键-查看源-保存TXT-改后缀为html- @2 F# K ^; q7 e
% V3 X f8 {# I7 D
 / L- p$ J6 v0 V, {6 X
 8 A. U, x; v# ?8 ?7 W8 a% m* J( G
 ' x% y l/ H: M! E* `
, }/ s: u% y3 k# C2 @
% Y3 h9 o ]9 a7 m! ^
1 T2 n& n. I; ~: m
9 S1 J: y7 ]8 J- _5 }; ?* v, A- q1 L0 Q7 M" J; e& `: S
) p7 l$ \/ ]% g6 l; i2.打开Atom软件，安装HTML preview插件，以方便查看CSS修改的效果。
% m4 Y3 Q# @# c
9 ~& M1 N1 i6 Q' {: K r* k如果词典文件只有MDX没有CSS，请前往下载Oeasy的贴下载Getdict，具体使用参考O大帖子，分解之后即可获得CSS。; Q8 y7 G1 ^4 @* E' z+ N
) j7 }2 b* \# D& j5 g. ~ }
将词典的CSS拖入Atom，然后将选择好的单词html文件拖入。
0 _- {, ^: X- E' y, l' v7 F& O. I( S( y! f
接下来需要看看是否需要修改HTML里的CSS路径，不修改的话显示出来的排版并不是CSS的排版，然后右键-Inspect，得到开发者工具界面。
: F3 R1 I: r6 k! y
B" n5 H( t9 k在开发者界面里，左边的Elements界面各行对应的是html的各个部分，展开鼠标移至上方就可以在html窗口看见各行对应的部分。& t: R) y( _* O+ L" `& q
( B/ c' D* e4 C/ C
. N/ T# J3 b2 N" J- J # ]4 M/ K# z' s+ e
 + z: t8 P, q6 K- d m/ a, [1 T
1 q5 g0 ?3 E Y0 h! p! N ! [; l2 g* ?2 I5 `0 S# `
- M$ P. R& H3 t8 T/ B0 p' s
. s! i% m/ Q1 T. b6 X不想安装专业软件怎么办？用chrome就可以！！！, s; [' I, y" [ z2 E* w
有人反映插件安装可能有点麻烦，用Chrome就可以啦！！9 V$ y: Q, B$ {- k1 P3 L0 t; N: s! E
直接双击html文件，在浏览器打开，右键-检查5 x1 u! w& v: W' ]7 h
 - m+ H* ]8 Y9 k: z, i
* X& x% ^: r: \) M) q0 b9 [ p
& \( G: X( J) l3 ^0 l8 B
. R' k. O( b' S5 @+ [% A
, \" {4 c) k5 U6 z B
$ G/ C0 p- n3 p0 r, t! q$ w' b+ {1 E+ k* w$ Y8 I' q% C
3. 开始修改CSS
; ?0 X I6 ^# b4 ~
0 W3 `1 X. h5 n找到自己需要修改的地方，然后点击对应行，可以看见开发者工具里的styles显示的是需要修改部分的现有属性。0 T+ @' k- E9 a" r( n
/ b0 L' m3 b! g' v; P0 W; w可以在开发者工具的Sources里直接打开CSS文件，这样可以在属性修改框的右上角看见对应的CSS行数，修改后的CSS会直接显示在Sources里。
1 c2 N" C5 D( V; ~3 | k& S（比如我比较懒，在开发者工具里修改好全部属性之后，直接跑到Sources里全选，复制，覆盖原版的CSS代码。。。就不用一个一个的对应修改了。）
; h/ ^/ t5 E# I2 D" b/ A/ l5 ^
6 W' a6 q. E& E- R6 o; B
9 X q: i- v8 C1 l比如下图中的border-bottom:#3F51B5 2px solid对应的是单词的下划线：颜色，粗细，直线属性（直线还是虚线等）
7 Q! o' z* k! U+ d7 U1 n
3 [1 L3 x o6 B4 q这里列举一下简单的修改：
& [/ ?6 D5 U5 Y" rfont-size 字体大小
9 I; F# p b+ m2 o) Kfont-family 字体
6 C9 B$ B; d: Y( mfont-weight 字体粗细0 J' M* r- F; F( `4 R
font-style 字体风格. I' p8 U7 x) F
color 字体颜色$ z& d/ d1 Y, i
Line-height 行间距, i5 Z( C) K: Y r
background 背景颜色
: C, \; z( _* | K/ s8 Gpadding 背景填充大小
8 A" L* K- w# Atext-transform 大小写转换等$ @) G0 d& P, }# s+ o
border-style 框线样式
' o1 n0 j* R* ]& I, Iborder-radius 框角弧度! w+ L1 ]/ t m4 X O6 c$ |2 Q
) e) P! i3 d, b/ j d其他的自行研究~~改错了可以删除，瞎戳戳试试看说不定有意想不到的效果# P* p% p; Q& B4 z& ^( b
# j; S( v# [6 ~3 x8 S' b/ i* R' d
a) 比如这里需要修改词性的图片，我加了字体，以及修改了图片大小，字体大小，框角弧度。% g) W# e# q1 [4 J9 {5 B/ H
（在CSS里用/*xxx*/可以加备注，方便查看对应的属性进行修改。）
/ j( ]6 |3 g+ m% m1 Hb) 原版的CSS的第一行，/*body｛｝*/为注释，不起作用。我希望全部的字体都显示为Arial，则可以把“/* */”删掉，留下
( \! O0 v7 |' Y' m1 L- k( k9 I2 r! P2 f, Z1 H, s8 l+ _
- body{
$ A, ?6 m& ^ A$ J- Z( m8 i& a - font-family:arial,sans-serif;( c. q' l9 J2 c0 ?4 \6 z0 g- s# c8 J
- Line-height:1.5em;
" }6 ^2 q+ [1 J5 c9 O/ G' n - color:#555555;/ T+ X5 E, V* ?- d* X4 e- _. i) W9 O6 e
- }
2 X3 y3 [+ K* ?* T: _$ f
$ l3 q! s$ E, H8 k C - D$ ?$ Z* h0 Q& o9 Z6 w
- d- x( }, X3 E/ l# a& L
c) 这里修改主单词，请教了一下@tanek 。。。这个CSS比较坑爹，没有写入，需要多加一段代码，一般情况下是不需要多些的，修改一般在CSS都有写
0 d+ y) q! Z/ k9 @- ~ # j: Y7 `4 f/ Z3 R% o3 T* g
* W0 z' }* H- n4 ~一般情况如上图修改，这里不展开这个坑爹的格式修改了_(:з」∠)_，大家力所能及吧~！
' v0 p+ T. Y8 F! R7 o/ {2 c( [" r' J" \3 @) K
 / Y# Y: {, ^7 _
* Z+ p6 V6 } e7 }) f b& J M/ V
/ D0 K6 `5 N1 z 7 z$ P- R# H' ^, U7 t
 ; U7 W3 v( f9 M4 y& v
 & T3 d% u; U d9 \2 j
: i$ W8 @1 k; p( B4 }' Q" S4 ^! _2 K$ G
, n* d, l* j1 @& e- Y% Z* U
* _# ]8 f' y( E: h( j- s说一下挽救手残的一个关键：ctrl+z撤销5 E+ ^! k- F3 ]' w$ H/ p' G
/ u6 l" H! J7 T) ?0 w- O
挑了一个有点坑的CSS修改_(:з」∠)_0 A6 i' s! c% m- \7 a! e& n! [( Z
纸上得来终觉浅，绝知此事要躬行。
; l( k8 z) b1 [0 w# L3 b大家动手折腾才是硬道理！！！！！！！！！！！！！" t) R* X2 @' w
) Z2 l' i) ^& L2 A; r7 L& ?
b$ B/ N e% B! ]1 w3 |: n
" w* i, N6 y: |! g; M: g: B |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
评分
-
9
查看全部评分
-
|
[复制链接]
发表于 2017-4-17 22:47:28
发表于 2017-4-18 16:50:02
楼主
多谢大佬肯定~！
多些大神本次支持以及技术指导
