应用方式

内嵌样式表

语法

内嵌样式表使用格式如下：

<HEAD>
  <STYLE type="text/css">
    样式规则
  </ STYLE>
</HEAD>

示例

效果

源代码

<STYLE type="text/css">
  P {
    font-family: "隶书";
    font-size: 18px;
    color: #FF0000;
    text-align: left;
  }
</STYLE>

源代码

css_app_inner_css.html
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>内嵌样式表</TITLE>
  <STYLE type="text/css">
    P {
      font-family: "隶书";
      font-size: 18px;
      color: #FF0000;
      text-align: left;
    }
  </STYLE>
</HEAD>

<BODY>
  <H2>静夜思</H2>
  <H3>作者：李四</H3>
  <P>床前明月光，</P>
  <P>疑是地上霜。</P>
  <P>我是郭德刚，</P>
  <P>低头思故乡。</P>
</BODY>

</HTML>

行内（嵌入）样式表

语法

<P style = "color:red;font-size:30px;font-family:隶书;">这个段落应用了样式<P>

示例

效果

源代码

<P style="color:#FF0000; font-size:18px; font-family:隶书; border-bottom-style:dashed ">床前明月光，<BR>
  疑是地上霜。<BR>
  我是郭德刚，<BR>
  低头思故乡。</P>

源代码

css_app_lineinner_css.html
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>行内样式表</TITLE>
</HEAD>

<BODY style=" background-color:#CCCCCC">
  <P><IMG src="libai.jpg" width="140" height="170" align="left"></P>
  <H2>静夜思</H2>
  <H3>作者：李白</H3>
<P style="color:#FF0000; font-size:18px; font-family:隶书; border-bottom-style:dashed ">床前明月光，<BR>
  疑是地上霜。<BR>
  我是郭德刚，<BR>
  低头思故乡。</P>
  <P>注释：
    静夜思：宁静的夜晚所引起的乡思。
    疑：怀疑，以为。
    举：抬、仰。</P>
</BODY>

</HTML>

外部样式表文件

根据样式文件与网页的关联方式又分为：

链接（LINK ）外部样式表
导入（@import）外部样式表

语法

使用LINK（链接）标签 :

<HEAD>
  <LINK href="newsyle.css" rel="stylesheet" type="text/css">
</HEAD>

使用@import导入，语法：

<HEAD>
  <STYLE TYPE="text/css">
    @import newstyle.css;
  </STYLE>
</HEAD>

link示例

效果

源代码

css_app_newstyle.csscss_app_Link_Outcss1.htmlcss_app_Link_Outcss2.html

P {
  /*设置段落<P>的样式：字体和背景色*/
  font-family: System;
  font-size: 18px;
  color: #FF00CC;
}

H2 {
  /*设置<H2>的样式：背景色和对齐方式*/
  background-color: #CCFF33;
  text-align: center;
}

A {
  /*设置超链接不带下划线，text-decoration 表示文本修饰*/
  color: blue;
  text-decoration: none;
}

A:hover {
  /*鼠标在超链接上悬停，带下划线*/
  color: red;
  text-decoration: underline;
}

<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>链接外部样式</TITLE>
  <LINK href="css_app_newstyle.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
  <P><IMG src="libai.jpg" width="140" height="170" align="left"></P>
  <H2>静夜思</H2>
  <H3><A href="#">作者：李白</A></H3>
  <P>床前明月光，<BR>
    疑是地上霜。<BR>
    我是郭德刚，<BR>
    低头思故乡。</P>
  <P>注释：
    静夜思：宁静的夜晚所引起的乡思。
    疑：怀疑，以为。
    举：抬、仰。</P>
</BODY>

</HTML>

<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>链接外部样式</TITLE>
  <LINK href="css_app_newstyle.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
  <P><IMG src="dufu.jpg" width="140" height="170" align="left"></P>
  <H2>春望</H2>
  <H3><A href="#">作者：杜甫</A></H3>
  <P>国破山河在，<BR>
    城春草木深。<BR>
    感时花溅泪，<BR>
    恨别鸟惊心。</P>
  <P>注释：
    诗的这四句，都统在“望”字中。诗人俯仰瞻视，视线由近而远，又由远而近，视野从城到山河，再由满城到花鸟。</P>
</BODY>

</HTML>

@import示例

效果

源代码

css_app_import_Outcss1.htmlcss_app_import_Outcss2.html

<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>链接外部样式</TITLE>
  <STYLE type="text/css">
    @import css_app_newstyle.css;
  </STYLE>
</HEAD>

<BODY>
  <P><IMG src="libai.jpg" width="140" height="170" align="left"></P>
  <H2>静夜思</H2>
  <H3><A href="#">作者：李白</A></H3>
  <P>床前明月光，<BR>
    疑是地上霜。<BR>
    我是郭德刚，<BR>
    低头思故乡。</P>
  <P>注释：
    静夜思：宁静的夜晚所引起的乡思。
    疑：怀疑，以为。
    举：抬、仰。</P>
</BODY>

</HTML>

<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>链接外部样式</TITLE>
  <STYLE type="text/css">
    @import css_app_newstyle.css;
  </STYLE>
</HEAD>

<BODY>
  <P><IMG src="dufu.jpg" width="140" height="170" align="left"></P>
  <H2>春望</H2>
  <H3><A href="#">作者：杜甫</A></H3>
  <P>国破山河在，<BR>
    城春草木深。<BR>
    感时花溅泪，<BR>
    恨别鸟惊心。</P>
  <P>注释：
    诗的这四句，都统在“望”字中。
    诗人俯仰瞻视，视线由近而远，又由远而近，视野从城到山河，再由满城到花鸟。</P>
</BODY>

</HTML>

link与@import的区别

两种方法的区别：

本质的差别

link属于HTML标签，而@import完全是CSS提供的一种方式

加载顺序的差别

当一个页面被加载时（或者被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会很明显。

兼容性的差别

@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题

使用dom

当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。