css层叠样式表(三)

最新推荐文章于 2024-01-09 20:49:39 发布

zxl2029

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量78

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zxl2029/article/details/117963630

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css的三大特性

概述
层叠(覆盖)性、继承性、优先级
层叠性
相同的选择器设置相同的属性但值不同时，离结构近的样式会覆盖离结构远的样式（就近原则）。相同选择器设置不同样式不会重叠覆盖。
```
<style>
	div {
		font-size: 28px;
		color: yellow;
	}
	div {
		color: teal; /*该颜色样式会覆盖上面的颜色样式*/
	}
</style>
```

继承性
子标签会继承父标签的有关文字的（font- , text- , line- , color）样式。

<head>
	<title>标题</title>
	<style>
		.nav {
			font-size: 28px;
			color: rgb(13, 102, 90);
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div class="nav">
		<p>小盒子</p> /*p元素标签继承了，.nav的样式*/
	</div>
</body>

优先级
选择器是有优先级的，当两个不同选择器设置同一个元素的时候根据优先级应用样式。

选择器	权重
继承或 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	最高级

注意：权重从左到右依次比较，权重可以叠加但是不会进位，所以类选择器永远大于元素选择器。

<head>
	<title>标题</title>
	<style>
		.nav {
			color: red;
		}
		p {
			color: #333!important;
		}

	</style>
</head>
<body>
		<p class="nav">小盒子</p> /*颜色为黑色，因为类选择器的权重高于元素选择器*/
</body>

权重叠加： 使用复合选择器时，权重会进行叠加。

<head>
	<title>标题</title>
	<style>
		p {
			color: #333!;
		}
		div p {
			color: red;
		}
	</style>
</head>

<body>
		<div>
			<p>小盒子</p>  /* 小盒子的颜色是红色，因为该样式是复合标签设置的。权重为0,0,0,2 */ 
		</div>
</body>

盒子模型

概述
网页元素基本都是盒子，由边框、内外边距和实际内容组成。我们利用css进行布局和样式设置，再往盒子里面装内容。这也就是网页布局的本质。

盒子模型：边框 border
边框由宽度，颜色和类型样式组成。

<style type="text/css">
	p {
		border: #838bff 5px;/*边框颜色*/
		border-style: solid;/*边框类型：solid实线、dashnd虚线、dotted点线*/
		border-width: 20px; /*边框宽度*/
		height: 100px; 		/*盒子设置一个高度*/
	}
	
	/*复合写法 border: 边框宽度、类型、颜色; 无顺序要求 */
	p {
		border: 5px #FFC0CB dotted;
		height: 100px; 
	}
	/*设置单独一边的边框样式：border-bottom: 1px solid red*/
	p {
		border-top: 5px solod antiquewhite;
		border-bottom: 5px dashed #333333;
		border-left: 3px dotted beige;
		border-right: 5px dotted #FFC0CB;
	}
</style>

设置表格边框
单元格的边框不会重叠，可以使用合并单元格边框：border-collapse: collapse; ，来控制单元格边框。
```
table,
th,
td {
	border: 3px solid #a181ff;
	border-collapse: collapse;  /*合并相邻单元格边框*/
}
```
注意：边框会改变盒子的实际大小。原始盒子不变，增加了边框的宽度

内边距 padding
控制和子内容到边框之间的距离

div {
	width: 100px;
	height: 100px;
	background-color: #FFC0CB;
	/* 设置内边距 */
	padding-top: 10px;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 25px; 
}

复合写法

值的个数	描述
padding: 5px;	1个值，代表上下左右内边距5像素
padding:5px 10px;	2个值，代表上下内边距5像素左右内边距10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素左右内边距10像素下内边距20像素
padding: 5px 10px 20px 30px;	4个值，上右下左内边距分别是5 10 20 30 像素(顺时针)

div {
	width: 100px;
	height: 100px;
	background-color: #FFC0CB;
	/* 设置盒子内边距 */
	padding: 5px;
}

注意：内边距会改变盒子的实际大小。原始盒子不变，增加了盒子到边框的距离。但是，当标签宽度为父标签宽度时，设置内边距不会撑开盒子宽度(前提是不设置盒子宽度)。

外边距 margin
控制盒子与盒子之间的距离。

p {
	height: 60px;
	border: 5px solid red;
	background-color: #33931e;
	padding: 20px;
	/*设置盒子外边距*/
	margin-top: 10px;
	margin-bottom:10px;
	margin-left: 50px;
	margin-right: 100px;
}

复合写法与内边距完全一样

p {
	height: 60px;
	border: 5px solid red;
	background-color: #33931e;
	padding: 20px;
	/*设置盒子外边距上下左右5像素*/
	margin: 5px;	
}

外边距设置块级元素水平居中
盒子必须设置宽度，然后将左右外边距设置为auto

p {
	height: 60px;
	width: 400px;
	background-color: #33931e;
	/*设置盒子左右外边距auto*/
	margin: 0 auto;
}

行内/行内块元素设置水平居中
给行内/行内块元素添加 text-align: center; 属性

<head>
	<style type="text/css">
		div {
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<a href="#">一</a>
	</div>
</body>

相邻块元素垂直外边距合并问题
上下两个相邻的块元素，上面块设置下边距，下面块设置上边距，则他们之间的垂直间距为两者较大的值。相邻块元素垂直外边距取大值,建议只给一个盒子添加margin值

<head>
	<style type="text/css">
	div {
		width: 100px;
		height: 100px;
		background-color: #b2d5ff;
	}
	.nav1 {
		margin-bottom: 20px;
	}
	.nav2 {
		margin-top: 40px;
	}
	</style>
</head>
<body>
	<div class="nav1">1</div>
	<div class="nav2">2</div>
</body>

嵌套块元素上边距不以父元素上边距为基准
当div1嵌套一个div2，设置div2的上边距需要先将div2与div1盒子分离，否则设置div2的上边距将会带着div1一起向下移动。解决方案：1.给父元素定义上边框，2.给父元素定义上内边距，3.添加overflow:hidden

<head>
	<style type="text/css">
	.fs {
		width: 200px;
		height: 200px;
		background-color: antiquewhite;
		margin-top: 50px;
		/* border-top: 1px solid transparent;  */
		/* padding-top: 1px; */
		/*overflow: hidden; /*推荐使用，不改变盒子大小*/
	}
	.sn {
		width: 100px;
		height: 100px;
		background-color: #ffd8f8;
		margin-top: 100px;
	}
	</style>
</head>
<body>
	<div class="fs">
		<div class="sn"></div>
	</div>
</body>

布局前先清除内外边距
注意：行内元素为了考虑兼容性，尽量只设置左右内外边距，不设置下上内外边距。如果确实需要就转为行内块元素。
```
* {
	padding: 0px;
	margin: 0px;
}
```
去掉 li 前面的项目符号（小圆点）
```
li {
	list-style: none;
}
```

圆角边框

概述
给盒子设置圆角边框，border-radius: 半径;。半径为圆，以圆切角，

div {
	width: 300px;
	height: 120px;
	background-color: #395d93;
	margin: 100px auto;
	
	border-radius: 60px;/* 设置圆角边框*/
	/* border-radius: 50%; */
	border-radius: 60px 70px 80px 90px;/*左上角开始顺时针分别设置圆角 */
	border-top-left-radius: 50px;/*单独设置一个角*/
}

盒子阴影

设置盒子阴影，box-shadow: X Y 模糊大小颜色内外；

div {
	width: 300px;
	height: 120px;
	background-color: #395d93;
	margin: 100px auto;
	/*设置盒子阴影*/
	box-shadow: 3px 5px 10px 3px #666666; 
}
/*鼠标经过有阴影*/
div:hover {
    box-shadow: 3px 5px 10px 3px #666666; 
}

文字阴影

p {
	/* X Y 模糊 颜色 */
	text-shadow: 5px 5px 3px #FFC0CB;
}

zxl2029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css层叠样式表(三)

css的三大特性概述层叠(覆盖)性、继承性、优先级层叠性相同的选择器设置相同的属性但值不同时，离结构近的样式会覆盖离结构远的样式（就近原则）。相同选择器设置不同样式不会重叠覆盖。<style> div { font-size: 28px; color: yellow; } div { color: teal; /*该颜色样式会覆盖上面的颜色样式*/ }</style>继承性子标签会继承父标签的有关文字的（font- , text- ,
复制链接

扫一扫