如何编写Hype 4中的对象的样式。由于内联样式和外链样式的编写方式是一样的,本章的例子是把样式编写在外链样式的文件中。具体教程如下:+ j& E, o+ n. J3 r# ]" m3 }
一、编写Hype元素样式2 a6 y; r% j, W7 V! B. [5 J/ y: D" N
虽然Hype添加了CSS外链样式,但是style.css文件是空白的,没有指向元素的样式语句。
% v" I7 A: b+ Y8 \- @$ e) k# d  A& b为了避免样式冲突,需要把面板中设置样式的值设置为0或者无。
+ ~% o% k; `4 {由于CSS样式都是英文的,小编这里做了一个注析,列出了面板上的样式与CSS样式的英文名称的对应关系。注意:CSS样式中的英文全部是小写。
5 P5 G0 v4 v8 u$ F  o7 N背景颜色(background-color):无;边框宽度(border-width):0;边框样式(border-style):无;边框颜色(border-color):默认颜色。6 Z5 K) U9 i- x" B" A* T
" o/ I* @$ t/ o6 {
其他的如:边框半径(border-radius),补白(padding):0,不透明度(opacity),阴影(box-shadow),滤镜(filter),字体(font-family),字体大小(font-size),字体颜色(color),字体加粗(font-weight),文字对齐(text-align),文字阴影(text-shadow),字母间距(letter-space),行高度(line-height)等等,按照默认值,不需要调整。' L+ y5 z& a8 M  N2 D
在这里要提醒小伙伴,在上一章讲述了Hype内部设置样式的原理讲到,一个对象有默认行内样式:对象的位置(position),宽度(width),高度(height),边框宽度(border-width),边框样式(border-style),边框颜色(border-color)等等。
6 |, n, f2 a0 U- N; _7 G4 C在设置对象内联或者外链样式的时候,尽量避免设置对象的边框样式,而且设置了也不会显示出来。当然,通过样式的优先等级是可以显示对象的边框的,这个是下一章的内容。# P' `  v" R* u+ m; j0 n- K
在场景中创建一个元素,然后到身份面板,给这个元素设置id名为text-box和class类名box1。4 m3 Z: K0 N2 ~! B9 B4 x

' B7 z1 {' N: i8 Q" |) J# ^5 J$ j在鼠标右键菜单,使用“文本编辑”打开创建在桌面上的style.css文件。按照CSS语言编写规则,编写类名为box1的对象的样式。编写样式的时候专门写上了对象的边框样式,小伙伴可以验证一下这个对象边框能否别显示出来。
, B% u8 |% ^) I3 w0 j6 p* r7 \2 p  \6 S8 c
样式编写结束后,按“Command + S”保存文件。返回到Hype软件时,会有一个警告弹窗,意思是style.css已经在Hype外部修改了,问是保留Hype资源库中的版本还是以修改的版本来更新资源库中的版本。
! \$ a- B, ^8 i6 \- s9 Z" h毫无疑问当然选择“更新”。此时在场景中,可以马上看到样式已经作用到类名为box1的对象上了。
. o& w  P, Y# v) H8 E: z
, ]+ b* M& h7 W* a( }0 Y% R, u+ Q0 e% G点击“预览”,对象的右键菜单选择“检查”。在console平台右边的style界面,可以看到在CSS样式文件中编辑的box1样式。但是,设置的边框样式并没有显现出来。+ E$ |( V/ P2 @. H9 I

% `0 _2 H9 c' a1 t二、内联和外链样式的局限性' |- P9 m: d1 p" ?. g) g1 S
在大多数情况下,网页开发给出的建议是使用外链样式,也就是把样式写在CSS文件上。这样的好处是使HTML文档容易管理和阅读,不会使其凌乱,不利于后期对页面的管理。
7 q3 |* n3 `8 `8 [* t7 l但是,在Hype交互动效制作软件中却不一样,它是制作动画的,有关键帧,需要样式变化。如果还强调使用内联或者外链样式,那会给动画的制作带来非常大的麻烦,也失去了Hype软件的优势。  u0 n3 t1 O/ \0 d! w
9 s# i& c7 J7 ~/ W( D6 I* S
三、小结
0 M% \/ a1 q5 f# h& E. ]' G/ k在Hype软件中,对静态或者没有样式变化的元素可以使用内联或者外链样式。* w1 n( o- t6 d6 [
一般而言,如果在Hype软件中已经设置了对象的样式,又在内联或者外链样式编写了同一对象的相同样式的不同值,那么内联或者外链样式是不会起作用的。

已有 0 个人发表评论

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

加入VIP会员
快速回复 返回列表 客服中心





快速回复 返回顶部 返回列表