【前端学习笔记】css学习笔记之背景background

写在前面

常用的快捷点 shift+alt 托动鼠标成直线，可以快速填充多行标签内容

1.样式表

行内样式表

1. 适合于修改简单的样式,没有实现结构和样式的分离
2. 修改的样式比较少,使用较少
3. 案例

<p style="color:red"></p>

内部样式表

1. 部分结构和层次分离，控制一个页面
2. 用style标签声明一个样式，在标签内部加上多个样式

外部样式表

1. 结构和层次完全分离，控制多个页面

2. 适合于样式比较多的情况，在外部新建一个css文件，将所有的样式全部放置外部的css文件中，页面通过引用外部的css实现样式的修改.

2.emmet语法快速生成css样式

1. div +tab键 直接生成div标签

2. .demo +tab键直接生成 <div class="demo"></div>>

3. #index+tab键直接生成<div id="index"></div>>

4. div>p+tab键直接生成互为父子结点的 <div> <p></p> </div>

5. div+p +tab键直接生成互为兄弟结点的 <div></div><p></p>

6. .demo*5可以生成五个类名为demo的div标签

7. 采取每个单词的第一个字母简写样式：

   tac按tab键直接生成 text-align:center;

8. div{你好}*5 会创建五个内容为你好的div标签

3.多个类名的使用

1. 直接给标签加上class属性，属性值写上类名，类名之间用空格隔开
2. 多个类名的应用场景 比如创建两个红色的盒子和一个绿色的盒子，我们可以创建一个红色的样式 一个绿色的样式和一个盒子大小的样式 接着按自己的要求去选择要使用的类就行

4.选择器

4.1基本选择器：

id选择器 标签选择器 类选择器

4.2复合选择器：

1. 后代选择器 （所有的后代儿子孙子等元素都可以选择）

   格式 ： 选择器一空格选择器二

2. 子元素选择器（只能选择亲儿子元素）

   格式：选择器一>选择器二

3. 并集选择器

   格式：中间用逗号分隔，用于同时修改多个选择器的样式

   选择器一，

   选择器二，

   选择器三{

   }

4. 伪类选择器（用于给某些选择器添加特殊的效果）

   ​ 1.链接伪类选择器

   ​ lvha顺序，在开发中通常先设置a的样式，再通过伪类选择器修改链接的特殊效果

   ​ 2.a:link{} 用于给未点击之前的链接添加样式

   ​ 3.a:visite{} 用于给点击但没松开的链接添加样式

   ​ 4.a:hover{} 用于给经过链接添加样式

   ​ 5.a:active{}用于给访问过的链接添加样式

   2.焦点选择器

   一般用于表单 选择出获取光标的表单

   input:focus{

   }

5.好用的小工具snipaste

1. f1打开snipaste选择要截图的区域
2. f3截图区域可以拖动
3. 按住alt加鼠标左键可以吸取颜色
4. wasd可以满满移动去吸取颜色
5. 双击或点击esc可退出snipaste

6.css元素的显示模式

6.1块级元素

1. 特别霸道，独占一行
2. 可以设置自己的宽度和高度，如果宽度没有设置，默认就是父元素的宽度
3. 可以在块内元素中放其他的块内元素或者是行内元素
4. 但是文字类的元素 里面不能放块内元素 ，例如p标签 h1标签等

6.2行内元素

常见的行内元素有span a em i strong等

1. 可以在一行内显示多个行内元素
2. 不能直接设置自己的宽度和高度
3. 默认宽度就是它本身内容的宽高
4. 行内元素里面只能放其他的行内元素或者文字
5. 链接里面不能放链接
6. 特殊的行内元素 链接a 它里面可以放一个块内元素

6.3行内块模式

常见的行内块元素img td 等

1. 既具有块级元素和行内元素的特点
2. 可以在一行内显示多个行内块元素 ，但是他们中间会有空隙留白
3. 可以设置自身的宽度和高度，默认宽度是它本身内容的宽度

6.4显示模式的转换

display: block;

display:inline;

display:inline-block;

6.5单行文字垂直居中的原理

设置文字的行高等于容器的高度，则就会刚好居中；如果行高大于容器的高度，上边距就会偏大，文字就会挤到下面，如果行高小于容器的高度，上边距就会偏小，文字就会挤到上面去

7.背景

7.1背景颜色

语法 background-color: #fff;或者是rgb函数或者是预定义的单词

7.2背景图片

用于网页logo，或大的背景图片，或精灵图的设置，原因是其控制位置非常方便

7.2.1设置背景图片语法

 background-image : url("相对地址或者是绝对地址")

7.2.2背景图片平铺

background-repeat : repeat(平铺)/no-repeat（不平铺）/repeat-x（水平平铺）/repeat-y（水平不平铺）;

7.2.3同时设置背景颜色和背景图片

如果同时设置了背景颜色和背景图片，只不过背景图片会压住背景颜色

7.3背景位置

background-position：如果写的是两个值，和顺序没有关系，如果只写了一个方位名词，则第二个方位名词一定是省略的center ，到底是水平居中还是垂直居中，就要依前一个参数而定

**背景水平和垂直居中的设置 **

background-position: center center;

7.3.1方位名词:

top bottom left right center

7.3.2绝对位置：

background-position :x坐标  y坐标

如果只写了一个坐标那么那个坐标一定是x坐标，y坐标默认居中

7.3.3如果背景位置用的是混合位置

那么第一个参数一定是x坐标，第二个参数一定是y坐标

例如 background-position: center 40px ;值得是水平居中，但y轴上离顶部 40px 的距离

7.4背景固定–视差滚动

添加下面的属性值就能让背景图片保持固定，营造视差滚动的效果

语法 background-attach:fixed;  scroll  滚动

7.5背景属性的复合写法

和字体一样，背景也能将它的多个属性统一写成一条语句，但是字体属性有顺序要求，而背景复合就方便多了，它没有顺序要求，只要你属性值写对，随便你怎么排顺序

7.6背景色实现半透明

语法： background: rgba(0,0,0,0.3);

设置了背景颜色为黑色，不透明程度是0.3;

颜色透明，但是文字内容不受任何影响