第01步:编写第01个css样式:div.css
@charset "utf-8"; /*第01步:定义div:背景色、字体颜色*/ div{ background-color:#99C; color:#006 }
第02步:编写02个css样式:p.css
@charset "utf-8"; /*第02步:定义p:背景色、字体颜色*/ p{ background-color:#600; color:#0F0 }
第03步:编写03个css样式:span.css
@charset "utf-8"; /*第03步:定义span:背景色、颜色*/ span{ background-color:#0F0; color:#C00 }
第04步:编写04个css样式:all.css(引入前面的css)
@charset "utf-8"; /* 所有的css文件引入 */ @import url(div.css); @import url(span.css); @import url(p.css);
第05步:编写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=utf-8" /> <title>CSS样式学习</title> <link href="all.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- --> <div> 这是用引入的css样式实现的效div层果 </div> <span> 这是用引入的css样式实现的效div层果 </span> <p> 这是用引入的css样式实现的效div层果 </p> </body> </html>