在此篇文章中会先介绍CSS基础语法，然后再简单讲述CSS的概念和工作原理，各种CSS选择器以及盒模型和常用布局方式

一_CSS 基础

1_引入CSS

• 在下面的代码段中，简述了CSS的书写规则和引入方法，在接下来的文章中就不会再将整篇代码全部展示出。

  引入css h2{ color: red; }

  尊嘟假嘟o.O?

  妈妈生的

  雪豹闭嘴

  吹啊吹～～～

  吹啊吹～～～

  吹啊吹～～～

• 文件名为myCSS.css 专门将css样式代码写在.css文件中

  h3{ color: blue; }

2_选择器

• html：

  点击一下

  我是d1下的p标签

  我是d2下的p标签

  我是d3下的p标签

  喜羊羊

  美羊羊

  灰太狼

• 标签选择器，直接写标签名称，格式：标签名{样式}即: #id{样式}

  #i1 { color: red; }

  #i2 { color: blue; }

  #i3 { color: gray; }

• 类选择器,使用最多 ;格式：.类名{样式}

  .c1 { color: red; }

• 组合选择器，同时选择多个中间用，隔开

  #i1,i2 { color: yellow; }

• 子元素选择器（有继承关系）,只选中d1下面的p标签，中间>隔开

  .d1>p { color: green; }

• 子孙后代选择器，选中d1下的所有p标签，中间用 空格隔开

  .d1 p { color: pink; }

• 伪类选择器 a:link未访问 / visited访问过 / hover悬浮 / active点击 / focus针对input点击

  a:hover{ color: green; } a:active{ color: red; } a{ color: gray; }

3_颜色

• RGB ： red green blue

• 颜色5种赋值方式:

1. 颜色单词 yellow/green/black...很少

2. 3位16进制赋值：4千多种 

   #fff

   3. 6位16进制赋值：

#ffffff

  4. 3位10进制赋值:

rgb(0,122,204)

  5. 4位10进制赋值，a代表的是alpha透明度，0-1区间

rgba(0,122,204,0.5)

4_div与span

• div用来装元素，本质上没有大小，占据整行，会随着内容增多而变大,div独占一行

• span装文字，共占一行

5_CSS三大特性

• 层叠性

  html:

  我是检测层叠性的h1标签

  CSS: h1{ color: pink; } .c1{ font-size: 32px; } #i1{ font-weight: bold; }

• 优先级

  html:

  我没k

  CSS: h1{ color: red; } .c1{ color: green; } #i1{ color: yellow; }

• 继承性

  html:

  我是d2里面的p标签

  我是d3里面的h1标签

  CSS: .d1{ background-color: black; color: beige; }

6_图片

CSS:
body{
    /* 设置背景图片路径 */
    background-image: url("img/backgroun3.jpg");
    /* 设置不重复 */
    background-repeat: no-repeat;
    /* 设置背景图片大小，设置两个值，一个位高一个为宽
    覆盖整个页面：100% / cover */
    background-size: cover;
    /* 设置背景位置，横向偏移，纵向偏移，正右上，负左下
    background-position: ...px ...px;
    */
    /*  
    上列语句可以变为两句：
    background: url("img/backgroun3.jpg") no-repeat;
    background-size: cover;
    */
    }
.d1{
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.3);
    background: url("img/aaa.jpeg") no-repeat;
    background-size: cover;
}