CSS 03 整理

最新推荐文章于 2024-11-06 20:56:04 发布

天珩

最新推荐文章于 2024-11-06 20:56:04 发布

阅读量161

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_41705396/article/details/103743034

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.结构伪类选择器

定义：:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>nth-of-type(n)</title>
		
		<style type="text/css">
			/* odd 奇数 */
			/* even 奇数 */
			div:nth-of-type(even){
				color: blue;
			}
		</style>
		
		<style type="text/css">
			li:nth-of-type(2){
				color: red;
			}
		</style>
	</head>
	<body>
		
		<div>测试的div01</div>
		<div>测试的div02</div>
		<div>测试的div03</div>
		<div>测试的div04</div>
		<div>测试的div05</div>
		
		
		<ol>
			<li>li01</li>
			<li>li02</li>
			<li>li03</li>
			<li>li04</li>
		</ol>
	</body>
</html>

效果展示
在这里插入图片描述
div:nth-of-type(even) 控制所以的奇数
div:nth-of-type(odd) 控制所以的偶数

2.伪类超链接
a:hover 定义：选择鼠标指针浮动在其上的元素
html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			a:hover{
				color: chartreuse;
			}
		</style>
	</head>
	<body>
		<a href="#">test link01</a>
		<a href="#">test link02</a>
		<a href="#">test link03</a>
		<a href="#">test link04</a>
		
	</body>
</html>

效果展示
在这里插入图片描述

a:link{
				background: #7FFF00;
			}

链接在点击之前的样式

正确的顺序：a:link、a:visited、a:hover、a:active

但是本人经常使用的是

a{
/*设置超链接本来的颜色是 黑色  */
color:black;
/*去除超链接文字的样式，   去除下划线  */
text-decoration: none;
}

2.盒子模型

边界 border、外边距 margin、内边距 padding

1）边界这是边界线的一些属性

border: 2px red solid;

在这里插入图片描述

2）外边距margin

#content{
				border: 2px red solid;
				
			}

在这里插入图片描述

#content{
				border: 2px red solid;
				margin: 20px;
				
			}

在这里插入图片描述
上下左右都是 20px

margin: 20px 50px;

上下 20px
左右 50px
在这里插入图片描述

margin: 20px 50px 30px;

在这里插入图片描述
上是20
左右是 50
下是30

3）padding 内边距

控制元素里面的内容在元素内部的边距

#content{
				border: 2px red solid;
				
				margin: 20px 50px 30px;
				
				padding: 30px;
				
			}

在这里插入图片描述

只设置一个 padding表示上下左右都是相同的数值

				padding-top: 20px;
				padding-right: 10px;
				padding-bottom: 30px;
				padding-left:100px ;

设置距离上边 20px；距离右边 10px；距离底部 30px；左边 100px
在这里插入图片描述

3.画圆

div.div01{
				width: 150px;
				height: 150px;
				border-radius:50%;
				border: 1px red solid;
				
			}

在这里插入图片描述
正方形

div.div02{
				width: 150px;
				height: 150px;
				border-radius:0%;
				border: 1px red solid;
			}

在这里插入图片描述
半圆
上半圆

div.div03{
				width: 150px;
				height: 75px;
				border-radius:75px 75px 0 0;
				border: 1px red solid;
			}

下半圆

				/* 下半圆 */
				width: 150px;
				height: 75px;
				border-radius:0px 0px 75px 75px;
				border: 1px red solid;
			}

左半圆

div.div05{
				/* 左半圆 */
				width: 75px;
				height: 150px;
				border-radius:75px 0px 0px 75px;
				border: 1px red solid;
			}

右半圆

div.div06{
				/* 右半圆 */
				width: 75px;
				height: 150px;
				border-radius:0px 75px 75px 0px;
				border: 1px red solid;
			}

4.display 属性

种类:
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block 行内块元素
none 此元素不会被显示。

可以实现块元素和行内元素互相转化

天珩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录