CSS基础（一）

说到CSS就不得不提一提HTML，HTML基本是给我们搭建了一个框架，CSS就相当于对这个框架进行了美容。
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中。

其实CSS就是通过对选中的HTML标签进行各种改变，改变到我们想要的样式，那么他是什么样的结构，又是怎么进行选择的呢？下面先通过一张图片来了解下CSS是怎么的结构：

 

了解了CSS的基本结构，接下来我们在来对选择器进行了解，那么什么是选择器呢？

CSS选择器： 每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

下面我就简单的罗列一些常用到的选择器：

1、id选择器：

在HTML中具有id属性的情况下，选择id进行样式设计的过程。举例：id=“part1”

part1{
      width: 100px;
      height: 100px;
      background-color: #ff0;
      }

2、类选择器：

在标签中用class属性进行样式设计的过程 

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

3、属性选择器：

[] ([type=text]修饰属性为type=text的模块)

4、子元素选择器：

以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)

5、相邻兄弟选择器：

以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)

6、伪类选择器：

 (1) li:first-child{} (修饰第一个li)

修饰第一个li元素
    (2) li:last-child{} (修饰最后一个li)

修饰最后一个li元素
    (3) li:nth-child{} (修饰第()个li)

修饰第二个li元素
    (4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)