CSS层叠样式表

什么是CSS

Cascading  Style  Sheet (层叠样式表、级联样式表)的简称

CSS的引入方式

   1.行内式  直接在行内写

   2. 内嵌式

 3. 外联式  在外面写一个CSS 样式文件然后引入

4. 导入式

5.CSS中的常用选择器

1. 标签选择器，标记选择器，直接用标签名操作选择器

缺点：同名标签会被一起修改

2.  ID选择器，给标签起一个ID，在style中引用 需要时用  #开头

虽然ID在新版的浏览器可以重复，但不建议这么写，在其他浏览器可能不识别

命名建议 数字，字母，下划线，中划线，不能是 数字开头，可以是中文

3.  类选择器，在标签中起一个类名，使用类名对标签操作，名称可重复

4. CSS中的选择器的优先级 

1.ID选择器，权重：100  2.类选择器，权重 ：10   3.标签选择器  权重：1  0/52.3

5. 包含选择器

一个 标签在另外一个标签中间，包含选择器，在style中用 空格隔开

6.  子选择器

7.属性选择器

      8. 伪类选择器

一般针对 鼠标放置的悬浮效果操作

9. 分组选择器

6. 盒子模型

    1.margin(外边距/边界)  2.padding (内边距/填充)  3.border(边框)  每个属性都可以设置各自的方向

          margin: 0px  auto  块元素会自动居中

4个方向是顺时针方向，用,隔开

border有3个修饰属性， color,   width  ,  style 

  2.DIV 盒子模型，

background-image : rul(img/5b3b570dNd5ac6d3b.jpg); 引入图片

background-repeat: no-repeat:  设置图片是否重复

background-size : size: 1300px,480px 设置图片的大小

*{margin:0px; padding: 0px;} 清除所有元素的内外边距

7.CSS中的定位

1.绝对定位 position  : absolute;

   是基于父级元素的定位，定位离开之后，之前的位置会释放

2.相对定位 position : relative

   是基于原来的位置的定位，定位离开之后，位置不会释放

3. 相对浏览器定位  position : fixed

           是基于浏览器的定位，可以实现广告的效果

8. CSS中的浮动

1.行内元素：不会换行的元素，行内元素无法指定宽和高    小标签 、input  \   图片（行内块元素）\  超链接

2.块元素：书写元素会自动换行的元素，可以指定宽高  h1-h6 \   p  \  div   \   ul   \  ol 等

3.应用方法：

1. list - style : none  设置风格不显示,列表的风格

2. line-height: 40px  设置字体的行高

3. text - decoration:none 设置超链接的下滑线不显示

4. transition : all   .5s  调整C3动画的播放时间

5. border - radius: 100px  将一个正方形的div 调整成为一个圆形的div

6. transform : rotate(45deg) 调整正方形的角度

7.  动画如图，执行动画：     animation :  aj  1s  infinite;