在一个网页中，最终展示给我们所看到的画面，其实是由很多因素决定的，包括：
CSS
在目前内容和样式分离为主流的前提下，页面绝大部分的显示属性由CSS来决定，但是一个网页引入CSS的方法有多种，
内联引用 (Inline Styles)
内联引用就是把CSS样式直接加到需要作用的HTML标签中。内联定义也就是在对象的标记内直接使用style属性定义样式，是最简单的样式调用方法，可灵巧地把样式应用到各标签对象中，使用简单、显示直观。但无法完全发挥出样式表“表现与内容分离”的优势，所以在设计过程中并不常用。
如：
<p style="font-size: 18px">18px的文字</p>
<p style="font-size: 12px">12px的文字</p>
如果要修改字体大小的话就要分别修改了。对于上面的例子来说只需要修改两处，分别修改也不会花费多少时间。但是大型的网站或复杂的网页来说，成百上千个的属性是不可能去手动修改的。所以此方法绝对不推荐。
此方式也与直接使用HTML的样式表现标签及属性有相似的地方。
定义内部样式块对象 (Embedding a Style Block)
此方式是使用style标签直接把CSS文件中的内容加载到HTML文档内部，一般放置于<head> <tilte>CSS</title> </head>结构的</head>前。
如:
<head>
<tilte>CSS</title>
<style type="text/css">
p { color: red }
</style>
</head>
style的type属性设置为”text/css”，是允许不支持这类型的浏览器忽略样式表单，帮助这类浏览器过滤掉CSS代码，避免在浏览器里直接以源代码的方式显示这个样式表。
链入外部样式表文件 (Linking to a Style Sheet)
此种方式是W3C推荐的方式，真正做到了内容和样式分离。
要建立单独的外部样式表文件（后缀名为.css），使用<link>标签引入外部css文件，<link>标签放置位置与<style>标签位置一致。
如：
<head>
<tilte>CSS</title>
<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />
</head>
联合使用样式表（@import 导入函数）
使用@import联合样式表的方法和链接外部样式表的方法一致，也是在HTML文档的<head>和</head>标记之间插入；但这种方式可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则，更有优势。
<head>
<tilte>CSS</title>
<style type="text/css">@import url(/style.css);</style>
</head>
需要注意的是:
·联合法输入样式表必须以@import开头，结尾”；”结束；
·如果同时输入的多个样式表产生冲突时，则按照第一个输入的样式表有效处理；
·如果输入的样式表和网页中的样式（内联引用）规则产生冲突时，则使用外部的样式表。
HTML
HTML中还保留有一部分表现样式的标签及属性，如：
<font size="+3" color="#003366">CSS</font>
<p align="center">CSS</p>
此方式与CSS内联方式一样不被推荐使用。
浏览器设置
浏览器设置可以分为浏览器默认设置和用户定义两部分；
浏览器默认
各个浏览器对同一网页的同一元素会有不同的默认样式，比如：IE和FireFox默认的显示字体，页边距、段间距、标题样式、列表样式、元素居中、超链接样式、鼠标样式、图片链接样式等。
详细的区别可以参考：浏览器默认样式 http://www.tansea.cn/article.asp?id=94
用户定义
还有部分样式用户可以自定义，比如：网页显示的字体种类、字体大小，甚至使用自定义的样式表等来显示网页。
没有评论:
发表评论