第二章：第1节 CSS简述

从这节课开始，带领朋友们开始学习CSS(层叠样式表)的一些基础知识。如果只是用HTML标记制作页面，这个页面并不是很美观的，比方说你写了一个超链接的代码 <a href="https://www.phpnanshen.com">PHP楠神</a>，浏览器会这样显示：

我们可以用<font size="" color=""></font>标记设置文字大小、颜色，却没有哪个HTML标记能把“PHP楠神”下面的下划线去掉，CSS不仅可以设置文字大小、颜色，还可以去掉下划线，不同状态的超链接（未访问的、已访问的、鼠标放在上面的）可以设置不同的颜色。所以，HTML标记并不强大，有了CSS的帮忙，HTML才会变得强大，让页面显示更漂亮的效果。

CSS和HTML一样有浏览器去解析，所以想看CSS的效果直接用浏览器打开看。CSS相对HTML标记，知识要增多了不少，楠神只是带大家学习基础的，不会在CSS花费太多时间，学过CSS必须达到一个基础的CSS标记会看得懂、会修改的水平，所以想学好CSS，除了楠神会带领大家写一些简单的CSS标记，其余的CSS标记就要多去看手册学习。

CSS提前了解：

CSS有三种方式写入HTML文件修饰HTML标记，可以直接以属性的形式写入HTML标记里，比如<div style="width:300px;height:300px;border:solid red"></div>，<div></div>标记有个style属性，它的值就是CSS代码。

也可以单独写到页面一个地方，看图：

这是一个网站的源代码，<style type="text/css"></style>里的代码就是CSS代码。

第三种方式是最常用的一种方式，也符合“内容与表现分离”原则，就是把CSS代码单独写到一个.css文件里，然后用<link href="xxx.css" rel="stylesheet" type="text/css">引入。这样多个页面的HTML标记可以共用一个css文件，你在CSS文件里写的一行CSS代码会影响到很多页面。这样的好处是通过仅仅编辑一个简单的 CSS 文档，使你有能力同时改变站点中所有页面的布局和外观，网站可维护性变高了。代码的共用性提高了，也会减少网站整体页面的大小。

从CSS学习开始，楠神会把每节课的代码文件分享出来供大家下载。