外部样式表

源码下载

  学习外部样式表，可以对比《内部样式表》这一节课， 通过前面课程学习可以知道，行内样式是把style属性写在要定义标签里面，内部样式表是把定义的style属性用style包裹写在head标签里面，外部样式表 顾名思义是要把样式编写在一个.css格式的文件里面，然后再把这个文件引入.html文件中，如果你正式做网站，每一个页面都是一个独立的html文档， 每一张网页都有共同的样式，比如背景颜色是蓝色、字体是宋体，你需要在每一个html文档里都要编写一次，不仅编写麻烦，代码重复文件偏大影响网络传输。 这时候引入外部样式表的模式势在必行。为了大家能够感受到外部样式表的作用， 下面通过为《图片自适应布局》这一节课的多个html文件批量 添加样式为例展示操作过程。

批量添加CSS样式

  给每个html文档批量添加下面CSS样式属性

<style>
        /*图片添加样式*/
        .img{
            border-bottom: 20px solid #555555;
            border-top: 20px solid #555555;
            border-right: 20px solid #333333;
            border-left: 20px solid #333333;;
            position: absolute;
            left: 100px;
            top: 100px;
            transform: rotate(-12deg);
        }
</style>

1.创建.css文件

  给10个html文件批量添加下面的CSS样式，肯定不能在每个html文档里面去复制粘贴，这里只是授课，使用的样式很少，大的网站可能有几千条样式属性语句，都这么复制肯定不行。

  创建一个style.css文件，把上面的代码直接复制进去就行，注意<style>标签不用复制，直接写属性名、id或class即可，事实上 一般都是使用类选择器，等你做一个完整的网站就会明白。

2.HTML引入css文件

  要想使用CSS文件里面定义的属性，要把.css文件的路径复制到html文件中，html提供了一个功能标签<link>可以用来引入css文件。

  引入语句

  link标签的href属性和超链接的herf的属性一样，属性值都是表示一个文件的地址，可以放在本地测试，也可以部署到服务器，放在本地使用文件路径访问，放在服务器上要加上网站域名，关于通信的内容这里不细说。 一般浏览器加载完html文件后，初始化的时候解析到代码link会通过http请求下载herf属性值URL指向的css文件，然后初始化css定义的样式语句，关于html元素和css样式的解析执行原理和流程这里不详细解释，这牵扯到浏览器 、HTML超文本文本语言、CSS样式语言的设计原理，如果仅仅是设计一个静态网页大可不必关心这些问题，更不用去了解link和href属性和img的src属性有啥区别，想了解的可以关注专门总结URL、http的课程。link的属性比较多 本节课仅仅需要知道href的使用，对于rel、type属性先不用管，使用的时候直接复制这些代码，然后修改href的路径属性值即可。 

<!--基本格式<link href="文件地址(本地地址或网址URL)">-->
    <link href="style.css" rel="stylesheet" type="text/css" >

  完整展示 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--基本格式<link href="文件地址(本地地址或网址URL)">-->
    <link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
<!--引用style.css文件中的类定义的样式.clsss-->
<img src="../picture/2.jpg" class="img">
</body>
</html>

总结