CSS样式控制详解-优快云博客

CSS控制页面样式共有四种方式：行内样式、内嵌式、链接式、导入样式。

【行内样式】

【内嵌式】

<!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:63px;height:63px;float:left;} #div1 img{width:63px;height:63px;} </style> </head> <body> <div id="div1"><img src="http://www.cssxuexi.cn/index/images/ico/2days.gif"/></div> </body> </html>

【链接式】

链接式是使用频率最高，最实用的方式，只需在<head></head>之间加上如下代码。
<link href="style.css" type="text/css" rel="stylesheet"/>
这种方式将HTML文件和CSS文件彻底分成两个或多个文件，实现了页面与CSS代码的完全分离。

【导入样式】

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import。

【四种样式的优先级】

从高至低：行内样式、内嵌样式、链接样式、导入样式。