CSS完整版教程（2）持续更新中~

Random_ _

已于 2022-01-22 23:02:39 修改

阅读量388

点赞数 1

分类专栏： HTML + CSS + JavaScript 专栏文章标签： css 前端 css3

于 2022-01-22 22:59:00 首次发布

本文链接：https://blog.csdn.net/m0_59086897/article/details/122643658

版权

HTML + CSS + JavaScript 专栏专栏收录该内容

4 篇文章 1 订阅

订阅专栏

五、行高：

语法：line-height:数字px;
总结：

1、文字在行高中是垂直居中的。
2、行高通常用于让文字在盒子中垂直居中。

<style>
	div {
		width:100px;
		line-height:30px; /*语法*/
	}
</style>

六、背景：

1、背景颜色、宽高；
background-color:#F00;
width:200px;
height:200px;
2、背景图片：
background-image:url(相对路径) /*导入背景图，图片默认平铺*/
background-repeat:repeat、no-repeat、repeat-x、repeat-y;/*设置平铺方式：平铺、不平铺、仅横向平铺、仅纵向平铺*/
background-size:200px 200px;/*设置背景图片的大小，前一个值为宽度，后一个值为高度*/
background-position：npx npx;/*背景图片定位，第一个值代表水平距离，第二个值代表垂直距离，值一般用像素，但也可以用top、bottom、left、center、right*/
3、背景综合写法：
background:背景颜色用路径导入图片图片是否平铺图片位置 / 图片大小；

eg：background:#F00 url(1.png) no-repeat right bottom / 200px 200px
4、设置背景不受到滚动条的影响：
background-attachment:fixed;
5、透明背景：
background:rgba(255,255,255,a),a代表不透明透明度，取0-1。一般不用这个，有兼容性问题。
6、背景图片和标签图片的区别：
1、img标签图片不需要专门写宽高就能够显示在页面上，而背景图片默认是撑不开容器的，需要专门写宽高。
2、一般产品图插入都推荐使用img，而一些小的icon或者很少更新的图片或者超大图片推荐使用背景图。
3、背景图片可以让内部文字显示在其上方，而标签图片不行，除非后期用定位。

7、线性渐变：

语法：
background:linear-gradient(to 方向，颜色渐变节点,颜色渐变节点);

background:linear-gradient(to right，red 30% , blue 70%);
   /*线性变化，默认从上到下。
   左右下角也可以设置eg：right bottom）。
   方向也可以写为角度，按顺势正算，eg：45deg*/

<style>
	.box{
		width:200px;
		height:200px;
		background:linear-gradient(to right,red 30%,green 80%);/*线性变化，默认从上到下*/
	}
</style>

8、径向渐变：

语法：

background:radial-gradient(circle,red 20%,green 50%);

<style>
	div{
		width:200px;
		height:200px;
		background:radial-gradient(circle,red 20%,green 50%);	
	}
</style>

七、列表属性：

1、设置列表前面的符号
list-style-type:none; /*去符号*/
list-style-image:url(1.jpj); /*自定义符号*/
2、应用场景：修饰列表的三个步骤。
去横向边距、去纵向边距、修饰列表前符号。

<style>
	ul {
		list-style-type:none;
		padding:0;
		margin:0;
	}
</style>

八、内容溢出：

1、内容溢出处理：
   overflow:auto;自动生成右侧滚动条
   overflow:hidden;超出部分隐藏（最常用）
   overflow:scroll;自动生成右、下侧滚动条。
2、处理横向溢出：overflow-x：仅处理横向。
3、处理纵向溢出：overflow-y：仅处理纵向。

<style>
	div {
		width:100px;
		height:100px;
		background:#0f0;
		overflow:hidden;
	}		
</style>

九、CSS样式的三种分类：

1、行内样式：（优先级高）后期做修饰时使用，写在html文件中的标签里。
2、内联样式：写在html文件中的head部分
3、外联样式：

常用方式：<link rel="stylesheet" type="text/css" href="-16、demo.css">
不常用方式：<style>@import url(相对路径)</style>

4、三种样式表的总结：

样式表：	优点：	缺点：	使用情况：	控制范围：
行内样式表	书写方便权值高	没有实现样式和结构相分离	较少	控制一个标签
内联样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外联样式表	完全实现结构和样式相分离	需要引入	最多	控制一个站点

<head>
<meta charset="utf-8">
<title>CSS样式的三种分类</title>
<link rel="stylesheet" type="text/css" href="-16、demo.css"> /*外联样式表引入常用方式*/
<style>
@import url(16、demo路径.css) /*外联样式表引不常用方式*/
</style>
</head>

十、样式的继承和覆盖：

1、子元素会继承父元素的样式。
2、父元素样式和子元素样式冲突时，显示子元素样式。

十一、样式的优先级：

1、样式分类的优先级：
行内样式> 内联样式/外联样式
注意：内联样式和外联样式不存在优先级差，后渲染者生效。
2、强制优先设置：
!important:使得一个css属性强制优先。
3、选择器优先级：
伪对象-首字 > 伪对象-首行

> !important > id选择器 > class选择器/属性选择器(后渲染者生效) > 标签选择器 > 通配选择器
所以注意：在用选择器的时候，先用优先级低的选择器。

十二、样式权重的叠加：

1、样式叠加中的权重：

选择器	权重
继承或*通配选择器	0,0,0,0
组合选择器中的每个标签选择器	0,0,0,1
组合选择器中的每个类、伪类选择器	0,0,1,0
组合选择器中的每个id选择器	0,1,0,0
每个行内样式	1,0,0,0
每个!important	无穷大