关于我对CSS的爱恨情仇

（我背了三次还是忘了，我又来了）

认识CSS

CSS（Cascading Style Sheets）中文全称叫层叠样式表，用于美化网页使用的。其核心是html搭建框架，css添加样式，实现样式与结构的分离。

CSS的几种样式

1.行内样式

写在标签里面的，用style属性style=""

<h2 style="color:red">我与CSS的爱恨情仇</h2>

值得注意的是style里面的属性值不能随便的写出来，必须符合css的书写规范，否则无法显示效果的。同时也是有一些缺点数据冗余过高，只能同时控制一个标签。

2.内部样式

把style从标签里面分离出来，写在head标签里面，style标签其实是可以写在网页的任何一个位置，但是为了维护和查看，还是写在head标签里面最规范的，其格式为

  <style>
     p{
        color: red;
        font-size:40px;
     }
    </style>

同时也有一些缺点，样式和结构并没有完全的分离，多个网页并不能同时使用一个CSS样式，需要重新写。

3.外部样式表

单独的一个CSS样式文件，实现了结构与样式的完全分离通过link标签的方式进行一个链接

具体代码<link rel="stylesheet href=""XX.css">link标签写在head标签里面，同时这个外部样式表是最推荐一种方式。

样式的优先级别

优先级为行类样式>内联样式=外部样式，这里内联和外部是同等级的，用后来者居上原则，后面的样式会把前面的样式给覆盖掉。

CSS的写法规范

   CSS由选择器和声明块组成，选择器{声明块}，其中声明块由两部分属性和属性值组成，具体如下：

选择器{属性:属性值}，可以有多个属性和属性值，但是必须用分号（;）(英文状态)，

例如：

p{
   color:red;
   font-size:40px;
}

采用层叠的样式，来编写CSS最简洁，最方便维护，后期上线的时候可以通过工具压缩的方式把段落符、空格之类的给删除掉。

CSS选择器

CSS选择器有以下几种：

1.通配选择器

2.元素选择器

3.类选择器

4.id选择器

第一种通配选择器：（*）代码为

*{
        color: red;
     }

*代表着这个网页所有的元素都为红色。

第二种元素选择器：又称标签选择器具体代码如下：

 p{
        color: red;
     }

上面代码表示的是所有的p元素的文字都为红色。

第三种类元素选择器：在标签里面使用class属性，属性值自己定义，最好能够一眼能表达出这个意思，（英文开头，中间可以有数字但是数字不能开头，不能有中文，可以有下划线）具体代码如下：

<style>
     .computer{
        color: red;
        font-size: 40px;
     }
    </style>
     

    <span class="computer">计算机</span>

（注意：类选择器前面必须添加英文状态下的点(.)）

第四种id选择器：在标签里面使用id属性，属性值任意，但是属性值同时也必须遵守元素选择器的原则。在写选择器的时候必须加上井号（#），具体代码如下：

<style>
     #computer{
        color: red;
        font-size: 40px;
     }
    </style>

    <span id="computer">计算机</span>

（注意：id选择器具有唯一性）

CSS基本选择器

复合选择器：

1.交集选择器

2并集选择器

3.id选择器

4.通配选择器

第一种交集选择器：其格式为选择器1选择器2选择器3......选择器n{}具体代码样式如下：

span.a{
        color: red;
        font-size: 40px;
     }

（每一个选择器都要遵守相应规则，有标签选择器必须把标签选择器写在前面，id选择器和通配选择器在平时的开发过程中使用很少，局限性比较大）（个人理解）

第二种并集选择器：我的个人理解是or的意思（要么......要么.....）,要么他有，要么我有。格式为

选择器1,选择器2,选择器3,......,选择器n{}中间使用英文状态下的逗号隔开例如：

.a,
.b,
.c{
        color: red;
        font-size: 40px;
     }

（最好是这样竖着写，便于后期的维护）

HTML元素之间的关系

分为父元素、子元素、后代元素、兄弟元素、祖先元素。

1.父元素是把某一个元素包裹住，就叫父元素。

<span>
        <p>html+css</p>
</span>

此处的span标签就是父元素。

2.子元素：被父元素所包裹的就是子元素，如上图所示此时的p标签就是子元素。

3.祖先元素：相当于就是父亲的父亲的...........，这种就是祖先元素。代码所示：

<div>
    <ul>
        <li></li>
        <li>
            <span></span>
        </li>
    </ul>
 </div>

4.后代元素：儿子的儿子的......，如此往复下去，就是后代元素。合法的标签里面还有标签。（个人理解）。

5.兄弟元素：两个标签处于同一级，就是兄弟元素

<div>1</div>
 <p>2</p>

这里的div和p就是兄弟元素。

以上的均为个人理解。