CSS 名称是叫层叠样式表，主要是用来控制网页中元素的显示样式的，一般都是可以将多个表现样式加在一个元素上，这就是 层叠 的含义了，这篇文章主要想简单地记录一下 CSS 的使用吧，可能一些很细节的东西自己也还不是很懂，还需要学习，先把自己懂了的东西整理一下写出来吧。其实以人来类比的话， HTMl 就相当于人的骨架，而 CSS 则相当于人穿的衣服，只有当人的身材好，而且穿的衣服合适的时候，这个人才会好看嘛。
1.CSS中的选择器
CSS 中有多种选择器，主要的就有元素选择器、类选择器、id选择器以及将前面几种选择器组合起来使用的组合方式，最重要的还是要灵活运用，在具体的使用环境中使用最恰当的选择器去选中元素，那样才是最好的。
选择器：
元素选择器
类选择器
id选择器
组合方式选择
选择器其实都是用在 style 标签之中的，用于对页面中的标签元素进行选择。
1.1 元素选择器
元素选择器就是直接以网页之中的标签名进行选择，比如 font,这是字体标签，如果直接以这一个标签名进行选择的话，那就说明选择所有的字体标签，以及使用这个选择器大括号之中的属性和属性值来修饰选中的标签元素。
span {
font-size: 80px;
color: #77dd44;
}
上面的示例是一个 span 标签选择器，代表的意思就是所有的 span 都会被选中，而且所有被选中元素的内容都会使用该选择器之中的属性进行修饰。
1.2 类选择器
使用类选择器则需要一个属性的配合，那就是 class 属性，这个属性在每一个标签中都有，属性值可以根据自己的需要进行设置，多个标签的 class 属性值可以相同，如果有针对该属性值的类选择器的话，那就代表所有 class 属性为该值的标签都会被选中，类选择器同样也是写在 style 标签之中，只不过在使用的时候，会在 class 的属性值之前加一个点号 .,这就代表是类选择器了，样例如下：
<style>
.redF {
color: red;
}
.greenF {
color: green;
}
</style>
<div class="redF">I am div1</div>
<div class="greenF">I am div2</div>
<span class="redF">I am span1</span>
<span class="greenF">I am span2</span>
1.3 id选择器
id选择器其实和类选择器相类似，首先也是要在想要选择的标签之中加一个 id 属性，这个属性一般对于一个元素来说都是唯一的，不会让多个元素具有相同的 id 属性值，然后在 style 标签之中进行选择的时候，也是在属性值之前加一个 # 号，这就组成了 id 选择器了。
#redF {
color: red;
}
1.4 组合选择器
组合选择就是多种选择器组合起来使用，举一个简单的例子，如果想选择 div 里面的 font 标签，那应该怎么做，当然可以在每一个身处 div 标签之中的 font 标签之中都加上一个 class 属性，然后赋予同样的属性值，就可以使用类选择器进行选择了，不过这样做的话，需要在每一个符合条件的标签之中都加上相同属性值的 class 属性，如果标签个数比较多的话，那肯定是不理想的做法，有没有别的想法呢？要选择在 div 标签之中的所有 font 标签，也就是说这两个标签存在一个层级关系，就是 font 标签在 div 标签里面，刚好组合选择方式中，就有一种做法可以满足需求，在标签之间使用空格也可以表示层级关系，那上面的问题就可以使用 div font 这样的选择器了。
其实组合方式除了在两个标签之间使用空格表示层级关系以外，还有另外一种常见的，那就是在标签之间使用逗号 , 相隔，这是表示什么呢？这个就是表示的并列关系，通常可以用于多个标签需要修饰的样式是一样的，那就可以用这种方式，而不需要分开写，修改时也容易出错。
2.CSS的常用样式
在这里介绍一些 CSS 中的常见属性吧。
2.1 边框
任何标签元素都是有边框的，只是一般默认都是不可见的，因此还是要在这里说明一下。
边框元素是用 border 来表示的，常见的有如下设置：
border:1px solid red;
表示的意思就是边框宽 1px,并且是实线，边框颜色为红色。其实在设置边框的时候如果直接使用的 border ,那就表示一次性设置上下左右四边的边框，当然也就可以分开设置了，border-bottom 、border-left 、border-right 、border-top。
2.2 背景
背景属性的设置的话最常见的就是背景颜色和背景图片了
background-color
background-image
2.3 行级元素和块级元素的转换
其实之前写 HTML 之前说到过，它们二者是可以相互转化的，先看一下常见的行级元素和块级元素:
见的块级元素：h标签、p标签、ul标签、div标签、table标签
常见的行内元素：span标签、a标签、img标签、td标签
行级元素的特点是默认不换行，标签之中有多少内容它就占据多大的地方，而块级元素则是默认便占满一行，而不管里面的内容有多少，不过这二者的表现样式确实可以相互转换的，主要原因就在于它们都有一个 dispaly 属性，而该属性的取值有三个，inline、block和none，inline则是表示该元素是行级元素，所以它会表现出行级元素的表现形式，同理，如果该属性的取值是 block 的话，那就表明该元素是一个块级元素，但是如果该属性值为 none 的话，就代表该元素不显示，而且也不会占用页面上的空间。
2.4 字体
字体算是非常常见的元素了，因为我们要表达我们想说的意思，在网页上文字是最直接的，看一下关于字体的属性吧。
font-family 字体类型：微软雅黑、宋体、楷体
font-size 字体大小
font-style 字体风格，可设置斜体之类的
font-weight 可设置字体的粗细
其实关于常见的属性样式，在使用 IDE 工具进行开发的时候都会有很方便的关联提示，因此不必刻意去记忆，只要当自己使用多了，对经常使用的熟悉就好了。
3.盒子模型
盒子模型是以一个元素为单位的，主要由 元素内容、内边距、边框 和 外边距 这几个部分组成，下面进行讲解。
还是以文字进行说明吧，这是最简单的，元素内容 当然就是指的文字本身了，这个是最好理解的，再一个就是 边框，上面也说过关于它的属性设置，边框 就相当于将其中的 元素内容 包起来一样，并且它们两者之间是有空隙的，那这个空隙就是 内边距 了，因为 元素内容 和 边框 都是四面的，因此 内边距 也是四面的，最后一个那就是 外边距 了， 外边距 指的就是元素的 边框 到相邻元素之间的距离，依之前的说法，这个当然也是四面的，因此在设置内边距、边框 和 外边距 的时候，都需要注意的一点就是，它们都是四面的，因此要根据自己的需要，很可能只需要设置某些面就可以了。
4.CSS与HTML结合方式
两者的结合方式一种有三种：第一种，每一个元素标签之中都有一个 style 属性，使用这一个属性就可以设置当前元素的表现样式了，当然因为这是一个属性，也就只能设置这一个标签元素了；第二种，就是在 head 标签之中使用 style 标签来设置样式，通过之前我们介绍的几种选择器，将各种元素设置为我们想要的表现形式，当然这种方式只能作用于当前页面了；第三种就是外部样式表方式了，将样式表抽取为一个独立的文件，然后在需要设置样式的页面去引用该外部样式表。
行内样式表：<a style=”font-size:120px;color:red;”>hello</a>
内部样式表：
<head>
<style>
a {
font-size:120px;
}
</style>
</head>
外部样式表：<link rel="stylesheet" type="text/css" href="外部样式表的路径" />
5.总结
对于 CSS 样式表来修饰页面元素的表现样式的话，感觉想要灵活运用还需要大量的打磨，现在还只是一个简单的了解吧，以后在实际的开发过程中再去加深理解吧。
