CSS样式表高效使用的技巧

张小豪smile

张小豪smile

2016-01-29 12:41

CSS样式表高效使用的技巧,CSS样式表高效使用的技巧

随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

1、在一个网页中同时调用CSS的多种引入方式

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

    在HTML中引入CSS的方式很多,例如直接插入式,使用 链接外部样式表,使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问,这些引入方式能不能同时在一个网页中被调用,它们之间会不会产生混乱?其实,我们大可不必这么担心,这就是它为什么称之为“层叠样式表”的原因,浏览器在处理网页中的样式表是按照一定的顺序来处理的,首先检查页面中是否有直接插入式CSS,如果存在就先执行它,针对本句的其它CSS就不去管它了;接着检查网页源代码中的"STYLE"标记,有就执行了;接下来再依次检查执行"@import"导入的内部样式表和 链接的外部样式表。因此,我们完全可以在一个网页中同时调用CSS的多种引入方式。

    2、快速创建CSS外连式文件

    对于一个初接触CSS的网页设计人员来讲,要用写字板之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:首先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver的编辑窗中调出CSS面板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;全部定义好后,再用记事本创建一个空的CSS外连式文件,把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去,就大功告成了。

    3、让背景图案静止不动

    当网页不能在一屏全部显示时,我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容,移动滚动条时一般图象和文字是一起移动的,那么我们有没有办法使背景图象不随文字一起“滚动”呢?利用CSS就可以实现这样的目的,我们只要把下面这段源代码直接放在网页的与标签之间就可以了,其中bg.jpg就是网页中的背景图象,大家可以把它换成自己需要的背景图象:

    〈style type="text/css"〉
  〈!--
   BODY { background: purple url(bg.jpg);
     background-repeat:repeat-y;
     background-attachment:fixed
     }
--〉
〈/style〉

    4、让网页自动进行“首行缩进”

    用DreamWeaver来设计网页的用户知道,在DreamWeaver中输入空格不是那么的方便,我们可以利用css来设计“首行缩进”功能来弥补这个缺憾。打开DreamWeaver的设计界面,在该界面中找到CSS的属性定义对话框(Style Definition for .style1),在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能,在这里要注意的是,所谓“首行”是指每段内容的第一行,也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉字,设置好的CSS如下所示:

    〈style type="text/css"〉
  〈!--
  .style1 { text-indent: 2em}
  --〉
  〈/style〉

    5、巧用css来设定文字的背景

    在DreamWeaver中,如果我们需要给文字加上不同的背景颜色时,操作上很简单,只要用鼠标单击属性面板上的文字颜色按钮,从弹出的颜色设置栏中选择需要的颜色就可以了。但如果我们要给部分文字加不同的背景色,该怎么操作呢?由于DreamWeaver3中没有这方面的功能,但我们可以巧妙利用css来实现这样的目的。具体操作过程是,首先我们可以先做一个定义背景色的CSS,例如给这个css命名为bjstyle,接着在网页中选中需要设置颜色的文字,然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码:

    〈style type="text/css"〉
  〈!--
  .bjstyle { background: #cc00bb}
  --〉
  〈/style〉

    6、给指定内容加边框

    在DreamWeaver中,我们可以利用CSS强大的定义功能来给某部分内容加边框,定义时首先打开DreamWeaver的设计界面,在该界面中找到CSS的属性定义对话框(Style Definition for .style1),

展开更多 50%)
分享

猜你喜欢

CSS样式表高效使用的技巧

Html CSS布局 Div+CSS XHTML
CSS样式表高效使用的技巧

CSS样式表使用的技巧

Web开发
CSS样式表使用的技巧

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS样式表常用技巧

Web开发
CSS样式表常用技巧

关于CSS样式表

Web开发
关于CSS样式表

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS样式表书写顺序

Web开发
CSS样式表书写顺序

CSS样式表最佳习惯

Web开发
CSS样式表最佳习惯

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《灵魂献祭Delta》怪物boss招式应对方法

《灵魂献祭Delta》怪物boss招式应对方法

向CCmdTarget的派生类添加一个接口的实现

向CCmdTarget的派生类添加一个接口的实现
下拉加载更多内容 ↓