网页——CSS选择器&自定义动画

一、选择器
（一）类选择器：一次可以控制多个标签 将多个标签的共性属性，抽取到类选择器中将个性属性，放到id选择器中。

	
		
		
		
	
	
		

		
		
asdfsadf 
		

		
		

		
		

		
	

（二）标签名选择器：可以根据标签名称，选择多个标签

	
		
		
		
	
	
		

			divddfd
		
		

			divddfd
		
		
asdfsadf
		
asdfsadf
		

			
asdfsadf
			
asdfsadf
			
asdfsadf
		
		

			
asdfsadf
			
asdfsadf
			
asdfsadf
		
	

（三）选择器优先级：
当多个选择器在控制同一个标签时，如果属性不冲突，多个属性叠加在一起生效
如果多个选择器，控制的属性有冲突那么就根据选择器的优先级来区分
内联样式>id选择器>class选择器>标签名选择器

（四）包含选择器

	
		
		
		
	
	
		

			
asdfasfd
			
asdfasfd
			
asdfasfd
		
		

			
asdfasfd
			
asdfasfd
			
asdfasfd
		
		

			
asdfasfd
			
asdfasfd
			
asdfasfd
		
	

（五）并列选择器

	
		
		
		
	
	
		

			
abc
			
abc
		
		

			
asdfsadf
		
		

			
asdfsadf
		
		
asdfdsaf
		asdfasfadfa
	

（六）通配符选择器

	
		
		
		
	
	
		

			

				
asdfasf
			
			
abc
			
				asdfdsaf
			
		
		

			
第二个
		
	

（七）伪类选择器
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中 hover active 这两种状态对其他标签也生效

	
		
		
		
	
	
		百度一下
		百度一下
		百度一下
		百度一下
		百度一下
		百度一下
	

（八）相邻选择器&相邻所有选择器

（九）子选择器

	
		
		
		
	
	
		
agbc
		
agbc
		
agbc
		
agbc
		
agbc
		asdfsaf
		asdfsaf
		asdfsaf
		asdfsaf
	

（十）属性选择器

	
		
		
		
	
	
		

			adsfasf
		
		

			 bbbbbbbbbb
		
		
asfasdfasfdasdfasdfsad
		
asfasdfasfdasdfasdfsad
		

			
asdfasfd
		
		

			
asdfasfd
		
	
	

（十一）hover和active选择器

（十二）针对input标签的选择器

	
		
		
		
	
	
		
		听音乐
		
	

（十三）鼠标选中文本的选择器

	
		
		
		
	
	
		士大夫士大夫
		士大夫士大夫
		
	

（十四）鼠标悬浮的效果

（十五）鼠标移动上外层控制内层

（十六）下拉菜单

	
		
		
		
	
	
		

			下拉菜单
			

				菜鸟教程 1
				菜鸟教程 2
				菜鸟教程 3
			
		
	

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
二、样式
（一）关于背景的CSS样式

（二）背景图片位置

（三）边框属性

（四）轮廓

（五）内间距

	
		
		
		
	
	
		

			
内间距
		
		这是一个按钮
	

（六）按钮文字居中的技巧

	
		
		
		
	
	
		

			这是一个按钮
		
	

（七）照片的感觉

（八）鼠标的样式

	
		
		
		
	
	
		一个链接
		

			一行文字
		
	

（九）段落缩进

	
		
		
		
	
	
		

			
为全人类健康福祉作出贡献。
		
	

（十）列表属性

	
		
		
		
	
	
	

		
我的家园
		
关于本站
		
联系本人
		
本站声明
	
	

（十一）行高的设置

	
		
		
		
	
	
		

			为青少年犯罪嫌疑人辩护是续辉的工作重点之一，在办案过程中，续辉给失足者以慈母般的关怀，唤醒他们沉睡的理性和良知，帮助他们迷途知返。
续辉认为，未成年人犯罪，大多与缺乏家庭关爱有关。作为一个法律援助工作者，不仅要依法维护他们的权益，更应用母爱温暖他们受伤的心，让他们重新做人。就这样，续辉用伟大的母爱，温暖了60多颗受伤的心，让这些失足青少年成为金不换的回头浪子。
		
	

（十二）旋转动画

（十三）过渡动画

（十四）旋转360

（十五）关于字体的CSS样式

	
		
		
		
	
	
		abcde关于字体的CSS样式
		

			abcde关于字体的CSS样式
		
	

（十六）动画

三、自定义动画
（一）自定义动画

（二）自定义动画的拆解属性

（三）自定义动画2

（四）漂浮广告

	
		
		
		
		
	
	
		

			

				关闭
			
		
	

（五）透明度

	
		
		
		
	
	
		

			abcdefg