选择器以及网页动画的相关

Hgrtea

于 2019-06-16 23:20:29 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/Hgrtea/article/details/92120971

版权

本文介绍了CSS选择器的使用，包括包含选择器、并列选择器、属性选择器、伪类选择器等，以及如何通过选择器实现网页动画效果，如过渡动画。同时，文章还讲解了 rgba() 颜色透明度、line-height 文本居中、background-repeat 背景不重复等常见CSS指令的用途。

摘要由CSDN通过智能技术生成

前面已经说过，CSS 跟HTMl 代码的结合，有三种方式
1.内联样式：将CSS 直接写在标签上，一次只能控制一个标签的展示样式，缺点复用性差，书写凌乱，不推荐使用
2.内部样式：将CSS代码分类出来，通过选择器，可以选择一个或多个标签，进行样式的控制，复用性好。
3.外联样式：将CSS代码单独写在一个文件中，可以控制多个页面，复用性好。开发中常用

如果标签适中的第二种也比较常用，因此先来学习一波选择器。

选择器

选择器通俗一点就是我们平时在练习时每个标签的style都要写在标签上，这样一旦标签较多时整个书写页面就会不堪入目，所以就需要向上抽取一片区域内的标签共性将其写在代码的head部分，这样看起来能稍微好点。

包含选择器

body #aa li{
				color: yellow;
			}
			<body>
		<ul id="aa">
			<li>asdfasfd</li>
			<li>asdfasfd</li>
			<li>asdfasfd</li>
			<li id="last">asdfasfd</li>
		</ul>
	</body>

就像上面代码一样，包含选择器就是我们可以通过指定某一区域内的某个父标签的子标签这样的形式来规定它们的形式。

并列选择器

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ol,#one,h1,b{
				color: red;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>abc</li>
			<li>abc</li>
		</ol>
		<ul id="one">
			<li>asdfsadf</li>
		</ul>
		<ul>
			<li>asdfsadf</li>
		</ul>
		<h1>asdfdsaf</h1>
		<b>asdfasfadfa</b>
	</body>
</html>

像上面代码一样，如果有好几个标签的CS属性值一样那么就可以将它们几个并列在一块进行规定。

属性选择器

就是通过它们几个的属性来控制它们的cs值。

伪类选择器

	<style type="text/css">
			a:link {
				text-decoration: none;/* 去掉超链接的下划线 */
			}
			a:hover {
			}
			a:active {
			}
			a:visited {
			}
		</style>

如上面的代码所示，伪类选择器共有4种状态：
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中 hover active 这两种状态对其他标签也生效

通配符选择器

通配符选择器就是在cs代码的大括号外加* 号，意思是所有成员都具有这些属性，它一般是用于规定网页中的某几个共性时才用。

相邻选择器

相邻选择器的写法如下：

		#div1:hover ~div{
				background: yellow;             《《《相邻所有选择器》》》》
			}
			#div1:hover +#div2{
				background: #00FFFF;        《《《《相邻选择器》》》
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="">
			
		</div>
		<div id="">
			
		</div>
	</body>

当鼠标移动到div1时相邻的块发生改变，但如果相邻的那个标签用的类标签，那么就会变成相邻div1的所有块标签都会发生变化，就变成相邻所有选择器了，

子选择器

body>b{
				color: green;
			}

写法如上。

鼠标选中文本以及鼠标外层控制内层的选择器

	::selection  {
				background: #008000;
				color: #FF0000;
			}
上面代码作用是当你鼠标选中某一段时背景色和字体颜色不一样
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				width: 400px;
				height: 400px;
				background: #008000;
			}

			#nei {
				width: 200px;
				height: 200px;
				background: red;
			}
			#wai:hover>div{
				background:yellow;
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">

			</div>
		</div>
	</body>
</html>
上面代码就是当鼠标指示到外层时内层会发生变化

此外还有很多选择器，这里就不一一列举了。
下面就直接解释一些指令的意思了
rgba(0,0,0,0.1) ：可以调节背景颜色的透明度，前面3个数代表三基色，用于混合后指定某中颜色，最后一个的代表透明度，0—1之间，越小越透明。
span： 我一般习惯性用它装字体，因为它是一个纯净的行标签。
line-height: 这个一般用于将框中的字体居正，首先调用text-align: center; 让其左右居中，然后再让line-height: 的高度和框的高度一样，这样字体就能全方位居中。
background-repeat: no-repeat; 我们在选用背景图片时往往会偏大或偏小，当偏小时图片会重复充满整个屏幕，次指令会让图片不重复。
** border-bottom-width:** 边框属性，也就是会让面框的各个边的宽度不一样，非常适合做相片框的样式。
box-shadow: 10px 10px 30px brown; 可以让边框周围有阴影效果‘
text-indent:2em; 就是段落开头空两个子的空格
background-attachment: fixed; 这个指令就是如果我们设定的背景框太高会把背景图片上下拉升，而此指令则可以固定住图片不让其拉升，效果很好。
line-height:2em 设置行高，也就是文本各行之间的距离。
outline: #0000FF 50px solid; 轮廓，它跟边框border:50px black solid; 的区别在于轮廓是背景的一部风，也就是轮廓部分别的部分占不到，而边框则会被别的部分占到。
cursor:pointer; 此指令可以让鼠标移到该位置时变成手的样子，此外还可以让鼠标变成其它样子，又兴趣的可以到网上查一下。
transform: rotate(360deg); 让内容旋转多少度
transition:transform 1s; 让其在几秒内完成旋转。
box-shadow: 图片中的阴影

简单动画的一些指令

	#div1:hover{
				/*位移动画*/
				transform: translate(100px,30px);      移动的高度和向右距离
			}
			div:first-child{
				background: red;
				
			}
			div:nth-child(2){
				
				background: #0000FF;
				/*旋转动画 deg角度 取负数值 逆时针转*/
				transform: rotate(-30deg);
				
			}
			div:nth-child(3){
				background: palegreen;
				/*缩放动画*/
				transform: scale(0.5);
				
			}
			div:last-of-type{
				
				background:yellow;
				transform: skew(0deg,20deg);   向左右和上下拉伸
			}

过渡动画

transition:width 2s 1s linear;

transition-property:all;
transition-duration:3s;
transition-delay: 0s;
transition-timing-function:linear;

上面代码就是过渡命令的简写形式和完整形式，完整形式从上到下个属性值依次是：要过渡属性过渡时长，延时多少开始过渡过渡的速率

列表属性

可以做出下面的效果
在这里插入图片描述

		ul{
				list-style:none;/*去掉列表前面的图标*/
			}
			/*可以让每个li 浮动做出按钮来*/
			li{
				margin: 20px;
				float:left;
				border:1px black solid;
				padding: 10px 10px;
				border-radius:10px ;
			}
		</style>
	</head>
	<body>
	<ul>
		<li>我的家园</li>
		<li>关于本站</li>
		<li>联系本人</li>
		<li>本站声明</li>
		
	</ul>

内间距

	<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				border: 1px black solid;
				padding-left: 20px;
				padding-top: 50px;
				/*我们在设置内间距时，会撑大外框，
				如果你不想撑大外框，还想让内容 在外框中移动 
				可以配合box-sizing:border-box属性来用*/
				box-sizing: border-box;	
			}
			/* h1{
				margin-left: 20px;
			} */
			button {
				height: 100px;
				width: 200px;
				letter-spacing: 20px; /*设置字符间距*/
			}
		</style>
	</head>
	<body>
		<div id="">
			<h1>内间距</h1>
		</div>
		<button type="button">这是一个按钮</button>
	</body>

像上面代码所示，当我们在设置一个整体中既有按钮又有div时（也就是大框里面套了好几个小框时），如果我们此时再设置小框内的内容距离时，它就会自动撑大外框，这样我们往往就会导致大框内的小框溢出，此时**box-sizing: border-box; **可以限制让小框撑不大外框，非常实用。

Hgrtea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器以及网页动画的相关

前面已经说过，CSS 跟HTMl 代码的结合，有三种方式1.内联样式：将CSS 直接写在标签上，一次只能控制一个标签的展示样式，缺点复用性差，书写凌乱，不推荐使用2.内部样式：将CSS代码分类出来，通过选择器，可以选择一个或多个标签，进行样式的控制，复用性好。3.外联样式：将CSS代码单独写在一个文件中，可以控制多个页面，复用性好。开发中常用如果标签适中的第二种也比较常用，因此先来学习一波...
复制链接

扫一扫