仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 584|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发CSS使用技能十四例

[复制链接]
萌萌妈妈 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:20:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
CSS是CascadingstyleSheets的简称,中文译作“层叠款式表单”,我把它叫作“层叠款式表”,我感应如许顺口一点,没其余意义。实践上它是一组款式。你大概对CSS这个名词对照生疏,实践上不管你用InternetExplorer仍是NetscapeNavigator在网上冲浪,几近随时都在与CSS打交道,在网上没有利用过CSS的网页大概欠好找。不论你用甚么工具软件制造网页,都有在成心偶然地利用CSS。用好CSS能使你的网页加倍简练,为何一样内容的网页,有的人做出来有几十KB,而妙手做出来只要十几KB,CSS在个中的感化是不问可知的。我把我在利用CSS中的一些小履历和一些网友来信发问的成绩收拾出来,供诸位参考。

1、CSS在网页制造中一样平常有三种体例的用法,那末详细在利用时该接纳哪一种用法?
  当有多个网页要用到的CSS,接纳外连CSS文件的体例,如许网页的代码年夜年夜削减,修正起来十分便利;只在单个网页中利用的CSS,接纳文档头部体例;只要在一个网页1、两个中央才用到的CSS,接纳行内拔出体例。

2、CSS的三种用法在一个网页中要以混用吗?
  三种用法能够混用,且不会形成凌乱。这就是它为何称之为“层叠款式表”的缘故原由,扫瞄器在显现网页时是如许处置的:先反省有无行内拔出式CSS,有就实行了,针对本句的别的CSS就不往管它了;其次反省头部体例的CSS,有就实行了;在前二者都没有的情形下再反省外连文件体例的CSS。因而可看出,三种CSS的实行优先级是:行内拔出式、头部体例、外连文件体例。

3、在Dreamweaver中怎样使内部文件式CSS?
  在Dreamweaver中利用外连文件式CSS并没有特别请求,一样是用记事本创立一个*.css文件,在网页的<head>与</head>之间加上一句如许的代码:<linkrel="stylesheet"href="在这里填上你的CSS文件地点(绝对路径+文件名)"type="text/css">就好了。

4、怎样用Dreamweaver疾速创立CSS外连式文件?
  关于一个初打仗CSS的网页计划职员来说,要用记事之类的编纂器,往创立一个CSS外连式文件是相称坚苦的。因为Dreamweaver对CSS撑持的很好,用它来匡助就轻松多了。详细能够如许操纵:
  1)先在纸上写幸亏网站的网页中大概要用到的格称号,然后在Dreamweaver的编纂窗中修改CSS面板,一个一个地界说,并在一个空缺页上得当地写一点相干内容,边界说边试用,效果不中意,当即修正;
  2)全体界说好后,再用记事本创立一个空的CSS外连式文件,把在<head>与</head>之间的那段界说好的CSS复制到CSS文件中往,就半途而废了。全部历程就是点鼠标,便利吧?

5、在Dreamweaver中接纳行内拔出式CSS要手动写代码吗?
  不必!先用CSS面板界说好要用的CSS,然后,在要拔出CSS的标志拔出:style="",再把你方才界说的CSS从<head>前面拖到这个双引号中来,把花括号之外的部分删往就好了。

6、在方档头部体例和外连文件体例的CSS中都有“<!--”和“->”,好象没甚么用,不要能够吗?
  这一对东东的感化是为了不引发低版本扫瞄器的毛病。假如某个实行此页面的扫瞄器不撑持CSS,它将疏忽个中的内容。固然如今利用不撑持CSS扫瞄器的人已很少了,因为互联网上几近甚么大概城市产生,以是仍是留着为妙。

7、怎样给一部分笔墨加背景致?
  给笔墨加上分歧色彩,在DW3中只需在属性面板上拔取笔墨的色彩就好了,十分便利,但要给部分笔墨加分歧的背景致却没有响应的功效,我们能够先做一个界说背景致的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个界说淡黄色
背景的CSS是如许的:
<styletype="text/css">
<!--
.bgstyle{background:#FFFFCC}
-->
</style>
  在要用时拔取那段笔墨,再在CSS面板上点一下“bgstyle”就好了。

8、怎样给部分笔墨加背景图象?
  与加背景致操纵相似,中是在背景在选择加载图像就是了,一个界说好的加背景图像的CSS例子的代码是如许的:
<styletype="text/css">
<!--
.imgbgstyle{background-image:url(logo.gif)}
-->
</style>
  在要用时拔取那段笔墨,再在CSS面板上点一下“imgbgstyle”就好了。

9、怎样使页面的背景在笔墨“转动”时背景图案运动不动?
  要使背景图案不随笔墨“转动”的CSS是如许的:
<styletype="text/css">
<!--
BODY{background:purpleurl(bg.jpg);
   background-repeat:repeat-y;
   background-attachment:fixed 
    }
-->
</style>

10、怎样界说字间距?
  在DW3中CSS的属性界说对话框(styleDefinitionfor.style1)的“Block”上的“letterspaceing”属性界说的就
是字间距,它指的是每个字符之间的分外间距,经长度为单元,正负值都可,当取负值时发生字符挤在一同的效果。下
面代码是一个界说好的字间距CSS例子:
<styletype="text/css">
<!--
.style1{letter-spacing:3px}
-->
</style>

11、怎样给笔墨加上划线、下划线、删除线和闪灼?
  在DW3中CSS的属性界说对话框(styleDefinitionfor.style1)的“Type”上的“decoration”属性界说的就是这些内容,要注重的是闪灼属性有些版本的扫瞄器不撑持,罕用为好。上面是一个界说好上述效果的CSS例子:
<styletype="text/css">
<!--
.style1{text-decoration:underlineoverlineline-throughblink}
-->
</style>
  个中:“underline”是界说下划线;“overline”是界说上划线;“line-through”界说的是删除线;“blink”界说的是笔墨闪灼。

12、怎样使网页具有“首行缩进”功效?
  因为DW3输出空格不便利,使用“首行缩进”将填补这个不敷。在DW3中CSS的属性界说对话框(styleDefinitionfor.style1)的“Block”上的“text-indent”属性界说的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也就是间接按回车键就构成了一个新的段落。缩进最好以“em”(字符)为单元,好比:汉字编排请求每段入手下手缩进两个汉字,设置好的CSS以下所示:
<styletype="text/css">
<!--
.style1{text-indent:2em}
-->
</style>
  在DW3要注重:在DW3中CSS的属性界说对话框(styleDefinitionfor.style1)的“Block”上的“text-indent”右
面的缩进单元选择框中“ems”指的就是“em”。

13、在用表格举行排版时,能使某一偏向上的内容分开表格线一点吗?
  能够!在DW3中CSS的属性界说对话框(styleDefinitionfor.style1)的“Box”上的“margin”界说的就是内容分开边沿的间隔,分离可界说四个偏向:“top”“bottom”“left”“right”。上面就是界说在右边分开“10px”的CSS例
子代码:
<styletype="text/css">
<!--
.style1{margin:0px0px0px10px}
-->
</style>

14、能给某部份内容加边框吗?
  用CSS能够给某部份内容加边框,在DW3中CSS的属性界说对话框(styleDefinitionfor.style1)的“Border”界说的就是边框线,“top”“bottom”“left”“right”四边可分离界说线的粗细和色彩,这些界说好后不要健忘鄙人面的“style”中界说线型,不然将看不边框线,由于默许的线型是“none”。上面是一个界说了上边框为:蓝色细线;右边框为:绿色中粗线的CSS例子:
<styletype="text/css">
<!--
.style1{border:solid;border-width:thin0px0pxmedium;border-color:#0000FFblackblack#00FF00}
-->
</style></p>
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
谁可相欹 该用户已被删除
沙发
发表于 2015-1-18 06:08:47 来自手机 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
柔情似水 该用户已被删除
板凳
发表于 2015-1-22 05:37:32 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
第二个灵魂 该用户已被删除
地板
发表于 2015-1-30 23:08:08 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
变相怪杰 该用户已被删除
5#
发表于 2015-2-6 16:57:17 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
蒙在股里 该用户已被删除
6#
发表于 2015-2-17 16:08:52 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
小女巫 该用户已被删除
7#
发表于 2015-3-5 21:01:58 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小妖女 该用户已被删除
8#
发表于 2015-3-12 15:09:41 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
简单生活 该用户已被删除
9#
发表于 2015-3-19 23:28:50 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-24 08:57

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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