今天小编跟大家讲解下有关CSS 控制页面样式的4种方式和优先级问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 控制页面样式的4种方式和优先级问题 的相关资料，希望小伙伴们看了有所帮助。
本节主要讲解 两个内容 第一：CSS如何控制页面样式 有几种方式； 第二：这些方式出现在同一个页面时的优先级。 使用xHTML+CSS布局页面 其中有个很重要的特点就是内容与表象相分离 内容指HTML页面代码 表象就是CSS代码了 如果把页面看成穿着衣服的人的话 人就是HTML 是内容 而衣服呢就是CSS 是表 象 现在出现的问题是 如何让CSS去控制页面 或者说 如何让衣服穿在人身上 好体现出人得风格特点；不同的CSS就可以使页面出现不同的风格适用不同的网站 而不同的衣服 人穿上后就会体现 出不同的职业。 第一：如何让CSS去控制HTML页面效果呢 有这么4种方式 行内方式、内嵌方式、链接方式、导入方式 1）行内方式 行内方式是4种样式中最直接最简单的一种 直接对HTML标签适用style="" 例如： <p style="color:#F00; background:#CCC; font-size:12px;"></p> 虽然这种方法比较直接 在制作页面的时候需要为很多的标签设置style属性 所以会导致HTML页面不够纯净 文件体积过大 不利于搜索蜘蛛爬行 从而导致后期维护成本高。 2）内嵌方式 内嵌方式就是将CSS代码写在<head></head>之间 并且用<style></style>进行声明 例如： <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>无标题文档</title> <style type="text/css"> <!-- #div1{width:64px; height:64px; float:left;} #div1 img{width:64px; height:64px;} --> </style> </head> <body> <div id="div1"><img src="https:///images/logo.gif"/></div> 全国的CSS爱好者汇聚于此 如果不来 你就OUT喽~我们的口号是： “分享自己的欢乐与痛苦 分享自己的经验与心得 分享自己的资料与资源” 如果您也愿意 就加入我们吧~ </body> </html> 提示：您可以先修改部分代码再运行内嵌方式 大家应该也能意识到 即使有公共CSS代码 也是每个页面都要定义的 如果一个网站有很多页面 每个文件都会变大 后期维护也大 如果文件很少 CSS代码也不多 这种方式还是很不错 的。 3）链接方式 链接方式是使用频率最高 最实用的方式 只需要在<head></head>之间加上 复制代码代码如下: <link href="https://www.aidi.net.cn//css/style.css"type="text/css"rel="stylesheet"/> 就可以了 这种方式将HTML文件和CSS文件彻底分成两个 或者多个文件 实现了页面框架HTML代码与美工CSS代码的完全分离 使得前期制作和后期维护都十分方便 并且如果要保持页面风格统一 只需要把这些公共的CSS文件单独保存成一个文件 其他的页 面就可以分别调用自身的CSS文件 如果需要改变网站风格 只需要修改公共CSS文件就OK了 相当的方便 这才是我们xHTML+CSS制作页面提倡的方式。 HTML代码 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>无标题文档</title> <link href="https://www.aidi.net.cn//css/style.css"type="text/css"rel="stylesheet"/> </head> <body> <div id="div1"><img src="https:///images/logo.gif"/></div> 全国的CSS爱好者汇聚于此 如果不来 你就OUT喽~我们的口号是： “分享自己的欢乐与痛苦 分享自己的经验与心得 分享自己的资料与资源” 如果您也愿意 就加入我们吧~ </body> </html> CSS代码 复制代码代码如下: #div1{width:64px; height:64px; float:left;} #div1 img{width:64px; height:64px;} 4)导入方式 导入样式和链接样式比较相似 采用import方式导入CSS样式表 在HTML初始化时 会被导入到HTML文件中 成为文件的一部分 类似第二种内嵌方式。 具体导入样式和链接样式有什么区别 可以参看这篇文章《CSS:@import与link的具体区别》 不过我还是建议大家用链接方式！ 第二：四种样式的优先级 如果这上面的四种方式中的两种用于同一个页面后 就会出现优先级的问题 这里我就不再举例子来说明了 大家在下面自己证明一下下面的结论 四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。
来源：爱蒂网
