CSS中的继承与图片整合技术（内附字体和背景颜色设置）

1、什么是继承？

继承（inherit），指子元素会自动拥有父元素的某些css属性；但并不是所有css属性都可以被子元素继承

可被继承的属性：color、font-size、font-weight、text-align

不能被继承的属性：background-color，width，height

元素背景色的默认值是透明色 transparent

 

2、什么是图片整合技术？

图片整合技术又叫雪碧图

功能：
把多张icon（小图），整合到一张大图以减少加载次数

步骤：（所有操作都是在css里面）

1、设置尺寸（测量雪碧图的尺寸） ：就是开辟一个空间，这个空间的左上角是原点

2、引用图片（设置背景图）： background-image：url(“图片地址”)；

3、设置背景位置：background-position：x轴 y轴 注:两个值之间的分隔符是空格

例：

//html里：
<div></div>

div{
    background-image: url("./../IMG/button.jpg"); //step1:引用图片
    width: 180px; //测量雪碧图的尺寸）
    height: 180px;
    background-position: -818px -268px;//设置背景位置
    border:1px solid red;
    margin: 30px auto;
}
div:hover{
    background-position: 0 0;//实现交互效果（假）
}

 

3、字体类样式设置

字体大小：font-size:20px;

字体粗细：font-weight:bold;

取值：1、数值100-300（正常normal） 400-600（加粗bold）700-900（更粗border）；lighter更细
2、关键词（单词normal/bold/border/lighter）

字体样式：font-style:italic(斜体);
字体类型：font-family:“heiti” ;
 

3.1如何引用字体？

1、下载字体，并存入项目中
2、使用关键词@font-face，引用字体
3、给引用的字体进行命名

例：

div{font-size:20px;font-family:"F68";}
@font-face{font-family:"F68";src: url("字体地址");}

注：font-family一定要一样
@font-face放在最外面才能被引用

 

4、如何设置背景图？

 
设置背景图尺寸：background-size：100% 100%；
第一个值是宽度，第二个值是高度；

设置背景图位置：background-position：100% 100%；

第一个值是x轴：关键字（left、center、right），数值
第二个值是y轴：关键字（left、center、right），数值
当两个关键字一样时，可简写只写一个

背景色剪切：border-clip：content-box；

功能：背景色和背景图位置不发生变化；
会剪切掉border和padding区域的内容，即在页面上只显示content的内容。默认值：border-box

背景图的起始位置：background-origin：border-box；

border-box；默认是边框盒的左上角
padding-box；填充盒的左上角；
content-box；内容盒的左上角

背景图平铺：background-repeat:no-repeat;

默认值平铺repeat ;
no-repeat;不平铺，即只显示一张图片
repeat-x/y；只平铺x轴/y轴方向

固定背景图的位置：background-attachment：fixed；

多张背景图缩写：

background：url("地址")no-reapeat，url("地址")no-reapeat bottom right；

背景缩写：url，position，attachment，
唯一background-size不能写

 

4.1背景颜色线性渐变

 
背景颜色线性渐变：

background-image：linear-gradient(to right,pink,seagreen,orange);

平铺整个区域：

background-image：repeating-linear-gradient(to right,pink,seagreen,orange);

半径渐变：

background-image: repeating-radial-gradient(circle at 50px 50px,red,red 20px,transparent 20px,transparent 40px,green 40px,green 60px);

 

5、display/visibility/opacity隐藏元素有什么区别？

display：none；不生成盒子，就不占用尺寸，隐藏元素

visibility: hidden；隐藏元素，依然占尺寸;但隐藏后不能被选中，transition无效

opacity：0；隐藏元素，依然占用尺寸;但隐藏后还是能被选中，transition有效

 

6、颜色的取值

（1）关键字：red;blue,green;

color:red;

（2）十六进制：#123456；每2位代表一个颜色
1-2位：红色；3-4位：绿色；5-6位：蓝色

color:#FFC0CB;

（3）rgb(1,2,3);
1位代表红色，2位代表绿色，3位代表蓝色
注：每位的取值范围0-255

color:rgb(255,255,255);

（4）设置透明度，rgba(1,2,3,4);
1位代表红色，2位代表绿色，3位代表蓝色，4位代表透明度
注：前3位的取值范围0-255，第4位取值范围0-1

background:rgba(255,0,0,0.5);

（5）opacity和rgba的区别？

opacity会把当前元素，以及后代元素都覆盖。即：具有继承性

rgba只对当前元素进行透明度的设置

 
 
 

完。
更多资料请微信搜索公众号「 夜来妖风起」第一时间阅读。