CSS基础

1.全称：Cascading Style Sheets，中文名，层叠样式表，级联样式表。能做到网页表现和内容的一种分离设计的语言。能对对象的位置有像素级的精确控制。拥有对对向和模型模式样式编辑的能力，并且能进行初步的交互设计。

CSS的加载

• 浏览器默认样式
• 用户自定义样式
• 作者定义样式

选择器

• id选择器
  1. #+id名称
  2. id 是唯一的
• 类选择器
  1. .+class名称
  2. class 不唯一，可以有多个
• 元素选择器
  1. 元素：值
• 属性选择器
  1. 元素名称+[属性名称：值]：值
• 伪类选择器
  1. 获取选择器无法获取的信息，给其他选择器添加效果用
  2. a标签的 :link（访问前）,:visited（访问过后）,
  3. ：hover（鼠标的悬停和移入），：nth-child(),:nth-last-child(),:active(点击时),:nth-child(odd)（奇数）,nth-child(even)（偶数），nth-child(可以添加n的公式给元素添加效果，eg:2n+1),

• 伪元素（伪元素不是选择器）

  1. 虚拟的元素，在dom树内不真实存在，但是能保存dom的内容
  2. ::before(在某元素之前加入类容) 和 :after（在某元素之后加入类容）;
  3. ::first-letter(特殊样式加入文本首字母)；
  4. ::first-line(特殊的样式加入文本的首行);
• 后代
  1. 父级[空格]子级:父级添加效果时 后代所有级都会添加上效果。
• 子级
  1. 父级 >（大于符号）子级：父级添加效果时，只对子级产生影响。
• 并级
  1. 选择器，选择器，。。。

权重

• 外联和内联的权重是后面覆盖前面的
• 优先级：!important > 内嵌 > id> class > 元素 > 通配符（*）

继承

• 一般文本类型会继承父级。继承以后也可以自己单独设置样式。

基本的属性值

font-weight: 400 700 900() ; /*文字粗细*/
font-style: italic;    /*如果字体里有斜体直接调用斜体*/
            obligne； /* 强制倾斜*/
text-indent:             /*首行文字缩进既可以正值也可以为负数*/
text-shadow:2px 2px 2px 2px #ccc;     /*阴影：第一个值为横向偏移，第二个是纵向偏移，第三个值为模糊值，第四个值为外延值，第五个是颜色*/
background-image: url("");          /*背景插入图片  */  
background-repeat: repeat-x;       /* 向x轴移动*/
background-repeat:repeat-y;         /*向y轴移动*/
background-position: center/right/bottom/ x px或者y px 
background-attachment:fixed;        /*脱离文档流固定在屏幕上*/
background-size: 100%/cover;        /*背景图覆盖在整个框*/
background: red url("") no-repeat center; /*所有属性都可以在这里写除了background-size*/
background-size: 100% 50%
border-radius:50%;                  /*百分之五十为圆形*/

background:linear-gradient（角度（或者to right,to left...），颜色，颜色）;            /*颜色渲染*/
transform:scale(.5,2); (宽度和高度)
-webkit-   谷歌苹果
-moz-      火狐
-ms-       微软
-o-        欧鹏

在hover里：width:150px;
          height: 150px;
          background: red;
          transiton:all/width/height linear(渐变的方式) 1s(时间);          /*渐变*/

animation: xyy(名称) 3s（时间） 2（次数，值为infinite时就无限循环）;               /*自动播放动画*/
@keyframe xyy{                                                                  /*写在函数外面*/
    from(
        background:-color:red;
        )
    to(
        background-color: yellow;
        )
}
或者
0%｛
        样式
｝
20%｛
        样式
｝
40%｛
        样式
｝
60%｛
        样式
｝
80%｛
        样式
｝
100%｛

｝

雪碧图

• 作用：获取图片时，减少向服务器请求的次数，提高代码的性能

  .box{
      width: 140px;                               定视口
      height: 65px;                               定视口
      background: url("image/index_01.png"); 
      background-position:-140px -70px;           X轴朝右为正，Y轴朝下为正
  }