WEB_02_CSS_第三讲

1、引入CSS样式

css使用非常灵活，及可以嵌入在HTML文档中，也可以是一个单独的文件，如果是单独的文件，则必须以 .css为扩展名。css和HTML的结合3种常用方式： 

（1）、行内样式：是通过标签的style属性来设置元素的样式。行内样式通过标签的属性来控制样式，这样并没有做到结构与表现（HTML展示结构、css显示效果）相分离，所以一般很少使用。学习阶段有时候为了快速编程，偶有使用。

<!-- 方式1：行内样式

 color：表示字体颜色

font-size：表示字体大小

-->

<a style="color：#f00；font-size：30px；"></a>

（2）、内部样式：又称为内嵌式，是将css代码集中卸载HTML文档的< head >头部标签体中，并且使用
<style>标签定义。

1）、给当前htm |文件中的多个标签设置样式。在html的< head >标签中使用<style>标签来定义css：

<!-- 方式2：内部样式

 background-color：表示背景色

-->

<style type="text/css">

body{

background-color：#ddd;

}

</style>

2）、内嵌式css样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为他不能充分发挥css代码的重用优势。

（3）、外部样式：外部样式又称为链入式，是将所有的样式放在一个或多个以 .css为扩展名的外部样式表文件中，通过<link>标签将样式连接到HTML文档中。

<！--方式3：外部样式

rel="stylesheet' ，固定值，表示样式表 

type="text/css'， 固定值，表示css类型 

href，表示css文件位置

font-family表示使用的字体系列，多个字体使用逗号分隔。例如：“字体1，字体2，字体3 "，此时优先使用“字体1 ”，如果“字体1 ”系统不存在，再使用“字体2 ”，以此类推。

-->

<link rel="stylesheet" type="text/css" href="css/demo.css"/>

1）、链入式最大的好处是同一个css样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个< link>标记链接多个css样式表。