一、为什么需要CSS样式表

HTML标签的外观样式比较单一,页面色彩不生动 ,样式修改不方便，仅有HTML是不能做出多姿多彩的网站的，样式表的作用相当于华丽的衣服，它可以修饰HTML，是我们的网页更加漂亮，样式表还能实现内容与样式的分离，方便团队开发等。

二、css的基础知识

要使用css可以在html的head标签中嵌入样式的定义，语法如下：

<!--文档样式表开始，类型为CSS样式-->

<style type="text/css">

P {color:red; font-size:30px; font-family:隶书;}/*样式规则*/

……

</style>

所有的样式规则的格式都是:

属性名:属性值;

1、css的选择器

（1）元素选择器，这样页面上面所有的同类元素都会使用统一的样式了。

元素名{样式规则定义}

如果希望其他的标签也能采用P标签的样式，怎么办？

P{
        color: green;
        font-size: 18px;
    }

在html中定义两个p元素，它们的样式就会一样的了。

<p>此生此夜不长好</p>

<p>人生天地间</p>

效果如下：

（2）id选择器，id选择器是作用于html中的某个id，格式是

#id名称{样式规则定义}

例如页面上面有一个id是sige得div

<div id="sige">
   hello
<div>

定义器对应的样式如下：

#sige{
        font-weight: bold;

        color: #C13133;

        border: 5px solid;

        border-color: blue;

        width: 200px;

        height: 200px;
    }

效果如下：

（3）类选择器，这是很常用，也是最灵活的方式，你可以预先定义一类的样式，任何一个html的元素都可以使用class属性来使用这个样式效果，定义格式如下：

.类名{样式规则定义}

例如：

<div class="hi">使用类选择器</div>

/* style中的代码 */

.hi{
        font-size: 30px;
        color: #009999;
    }

效果如下：

（4）选择器的其他用法。为了更好的支持html的树形结构，css也支持这种写法，比如：

#sige p {

font-weight: bold;

color: #FF0055;

}

上面这样写法就是指id为sige的p元素的样式，还有类似这样的写法

#sige .first p{

  font-size: 100px;

}

上面这样写法就是指id为sige的应用了类选择器first的p元素

2、选择器的优先级

如果使用了id选择器，类选择器和元素选择器都重复定义了同一个属性，那么谁的优先级最高呢？这三种优先级的顺序是：id选择器，类选择器和元素选择器

3、css的书写位置

上面的例子我们都是把style写在head的标签里面，事实上我们还可以在每一个html的元素中使用style属性来定义样式，如下面这个例子：

 <div style="background-color: gray;border: 1px solid;"></div>

有的时候我们还会在其他页面用到这些定义的样式，那么我们可以把样式都写在一个外部文件中，然后通过导入的方式给所有的页面素偶共享，这样就可以统一所有页面的效果了。

比如新建一个style.css的文件，把所有的样式定义在这个文件中，然后在html的head元素中引用这个样式，代码如下：

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

三、基本的css的属性

认识上面css的写法后，就进入一个比较无聊的阶段了，就是熟记一下css的一些基本的常用的样式属性属性值，然后知道一下它们的效果，css也就掌握得差不多了。

font-size：字体大小

font-family：字体类型

font-style：字体样式

text-align：文本对齐

background-color：设置背景颜色

background-image：设置背景图像

background-repeat：设置一个指定的图像如何被重复。可取值repeat-x、 repeat、 no-repeat、repeat-y

margin-top：设置对象的上边距

margin-right：设置对象的右边距

margin-bottom：设置对象的下边距

margin-left：设置对象的左边距

border-style：设置边框的样式

border-width：设置边框的宽度

border-color：设置边框的颜色

padding-top：设置内容与上边框之间的距离

padding-right：设置内容与右边框之间的距离

padding-bottom：设置内容与下边框之间的距离

padding-left：设置内容与左边框之间的距离