页面引用CSS样式方法汇总
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
[p]在阅读本文之前,首先需要声明是写给css初学者和不了解css的朋友学习的,如果你已经是一个高手,那么你就无需在这里浪费时间了。[/p]
[p]css是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言),是cascading style sheets(层叠样式表)的简称。在标准网页设计中,css负责网页内容(xhtml)的表现,跟div(或table)组织的页面结构一起实现一个完整的网页布局。通过对css标记语言的学习,可以轻松地实现页面的丰富表现。css的运用其实就是一个把素描点缀成油画的过程。[/p] [p]如何把样式运用到页面中去呢?有四种方式可以帮助我们解决这个问题。在样式调用过程中,最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。[/p] [p]四种解决方法分别是:[b]1,[/b]内联定义 (inline styles) ;[b]2,[/b]定义内部样式块对象 (embedding a style block) ;[b]3,[/b]链入外部样式表文件 (linking to a style sheet)[/p] [p]1,内联定义 (inline styles) ;[b]4、[/b]联合使用样式表(@import 导入函数)。下面详细说明:[/p] [p][/p] [p][b]1,内联定义 (inline styles)[/b][/p] [p]内联定义也就是在对象的标记内直接使用style属性定义样式,是最简单的样式调用方法,可灵巧地把样式应用到各标签对象中,使用简单、显示直观。但无法完全发挥出样式表“表现与内容分离”的优势,所以在设计过程中并不常用。[/p] [p]举个简单的例子说明:对于同样的p标签属性应用不同的样式[/p] [p] 显示为红色12像素的字体 [/p] 显示为蓝色12像素的字体 [/p] [p]< head>[br]< style type=”text/css”>[br]< !– 样式表的具体内容 –>[br]< /style>[br]< /head>[/p] [p]style的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单,帮助这类浏览器过滤掉css代码,避免在浏览器里直接以源代码的方式显示这个样式表。[/p] [p][b]3,链入外部样式表文件 (linking to a style sheet)[/b][/p] [p]首先,要建立单独的外部样式表文件(后缀名为.css),然后也是在html文档的和标记之间插入link对象,格式如下:[/p] [p]< head>[br]< link rel=”stylesheet” href=”*.css” type=”text/css” >[br]< /head>[/p] [p][b]4、联合使用样式表(@import 导入函数)[/b][/p] [p]使用@import联合样式表的方法和链接外部样式表的方法一致,也是在html文档的和标记之间插入;但这种方式可以在链接外部样式表的同时,针对该网页的具体情况,做出别的网页不需要的样式规则,更有优势。格式如下:[/p] [p]< head>[br]< style type=”text/css”>[br]< !–[br]@import “*.css”[br]其他样式表的声明[br]–>[br]< /style>[br]< /head>[/p] [p]需要注意的是:[/p] [p]·联合法输入样式表必须以@import开头,结尾”;”结束;[/p] [p]·如果同时输入的多个样式表产生冲突时,则按照第一个输入的样式表有效处理;[/p] [p]·如果输入的样式表和网页中的样式(内联定义)规则产生冲突时,则使用外部的样式表。[/p] 该文章在 2010/4/27 2:51:51 编辑过 |
关键字查询
相关文章
正在查询... |