前文提到，Web前端设计除了学HTML这样一门标记语言，还涉及到了CSS，那CSS到底是什么呢？它是做什么的呢？以及怎么用？这一篇文章，我们只做简单的介绍，以及演示比较基础的使用方式，让大家有个直观的了解并入个门就达到本文的目的了，而更多更复杂的知识点如果读者感兴趣的话可以自行到网上找相关资料进行学习。
什么是CSS？经过前文的学习，大家知道了HTML能够承载大量的资源类型，包括文本、图片、视频等等，但是HTML的格式都是很单一和枯燥的，这跟我们平时看到的丰富多彩的网页页面还存在很大的差距。于是，这就需要CSS的帮助，那CSS是什么呢？
CSS是层叠样式表(CascadingStyleSheets)的简称，它本身也是一种标记语言，它跟HTML也是一种规范语言。浏览器会识别后自动对要展示的内容进行渲染。它通过对选择器添加声明的形式，来设置HTML页面中内容的的显示样式，如此能够使我们的页面更加丰富多彩，布局更加灵活。
怎么用CSS？我们直接来看一个例子。
!DOCTYPEhtmlhtmlheadmetacharset="utf-8"title网页标题/titlestylebody{background-color:#d0e4fe;}p{font-family:"TimesNewRoman";font-size:20px;}/style/headbodyp这是一个段落。/p/body/html
显示的页面样式如下：
上述的代码中的style/style，就是CSS样式表，它的结构很简单清晰：
style选择器{属性:值;}/style
这样就完成了对选择器这个对象的样式进行设置，注意CSS也是写在head标签里面，不是正文内容，但是却会影响正文内容的显示。上述代码我们对body和p进行了设置。
不同选择器有不同的属性，每个属性也可以设置不同的属性值。更多的设置内容读者可以到网上去寻阅资料。这里我们就补充多两个知识点。
1.CSS的id和Class选择器
像刚才说的，我们通过指定选择器（元素），配置选择器属性和属性值，来对HTML元素的样式进行配置。
但是如果有多个元素，他们的标签都是一样，但是我只想改变其中某个元素的样式，怎么办呢？
这就用到id选择器，它通过元素的标签属性，来给每一个元素都起了个名字，这样我们就能根据这个“名字”来进行针对性的样式设计。
举例如下：
!DOCTYPEhtmlhtmlheadmetacharset="utf-8"title网页标题/titlestyle#paral1{color:red;}/style/headbodypid="paral1"这是一个段落。/ppid="paral2"这是另一个段落。/p/body/html
如上面，有两个段落标签，但是标签内定义了属性id的值，相当于给两个段落元素命名了，而#paral1就是id选择器的调用方式，跟在#后面的就是元素的id属性的值，选择器定义哪个，则后面的声明就是对哪个的声明。
如果不是一个元素一个元素地配置样式的话，而是需要对某一类的全部元素都进行同样的渲染的话，则可以考虑用class选择器。
用法和id选择器的差不多，只是设置的标签属性和定义方式不同而已。举例如下：
!DOCTYPEhtmlhtmlheadmetacharset="utf-8"title网页标题/titlestyle.paral{color:red;}/style/headbodyh3class="paral"这是一个标题/h3pclass="paral"这是另一个段落/p/body/html
结果如下：通过class属性将这些元素都定义为同一类，然后根据.属性值的形式，定义class选择器。
如果是要定义相同类型且具有相同class属性值的元素的话，可以采用标签.属性值，举个例子，我要定义所有的属性值为paral的段落元素的样式表，则选择器可以写为：p.paral。
2.外部样式表（css文件）
有时候我们希望，我们所设计的网页都是同一种风格，也就是用同样的渲染格式，但是直接在每个html文件中重复写一遍这个样式表，会显得冗余，而且我们又更简便的方式去实现这个功能。
购买专栏解锁剩余30%