js及jQuery总结（二）

03.01_css选择器-属性选择器

选择器[属性名]{
	属性名称1：值1；
	属性名称2：值2；
	....
	}

选择器[属性名="属性值"]{
	属性名称1：值1；
	属性名称2：值2；
	....
	}

03.02_css选择器-包含选择器：

父子标签 先辈和后辈标签
先辈选择器 后辈选择器{
	属性名称1：值1；
	属性名称2：值2；
	....
	}

查找直接子标签
父标签选择器>子标签选择器{
	属性名称1：值1；
	属性名称2：值2；
	....
	}

03.03_css选择器-组合选择器：

选择器1，选择器2，。。。。{
	属性名称1：值1；
	属性名称2：值2；
	....
	}

03.04_css选择器-伪类选择器

类选择器：特定的设置{
	属性名称1：值1；
	属性名称2：值2；
	....
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*全局选择器
			*{
				background-color: lightgray;
			}
			*/
			
			/*标签名称选择器*/
			/*所有的段落首行缩进*/
			p{
				text-indent: 2em; 
			}
			
			/*id选择器*/
			#first{
				background-color: yellow;
				text-indent: 2em;
			}
			
			/*类选择器*/
			.little{
				font-weight: 900;
			}
			.pink{
				color: pink;
			}
			
			/*属性选择器------了解*/
			/*name是p标签中的一个属性*/
			p[name]{
				/*font-family可以书写多种字体，适配到哪个就使用哪个，如果都没有，则直接使用默认字体*/
				/*font-family: "微软雅黑" arial "arial black";*/
				text-decoration: overline;
			}
			
			/*类似于类选择器或者id选择器*/
			p[name="good"]{
				
				text-decoration: underline;
			}
			
			/*包含选择器 ------了解*/
			/*父标签的id值>子标签的标签名称*/
			#box>span{
				border: dashed 5px blue;
			}
			
		</style>
		
	</head>
	<body>
		<p id="first">盼望着，盼望着，东风来了，春天的脚步近了。 </p>

		<p class="little pink">一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p> 

		<p class="little">小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。</p> 

		<p>桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。</p>
 
		<p name="good">“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你，风里带着些心翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。</p>

 		
		<p name="bbbb">雨是最寻常的，一下就是三两天。可别恼。看，像牛牦，像花针，像细丝，密密的斜织着，人家屋顶上全笼着一层薄烟。。</p>

		<p name="aaa">天上的风筝渐渐多了，地上的孩子也多了。城里乡下，家家户户，老老小小，也赶趟似的，一个个都出来了。</p>
 		
 			

		<div id="box">
			<span>春天像刚落地的娃娃，从头到脚都是新的，它生长着。</span> 
			<p>春天像小姑娘，花枝招展的笑着走着。</p>
			<p>春天像健壮的青年，有铁一般的胳膊和腰脚，领着我们向前去。</p>
		</div>
 			
	</body>
</html>


说明：特定的设置：
	hover【鼠标悬浮】
	before
	after
	first-letter
	first-line

03.05_CSS和html的结合方式–行内样式

html标签都有一个属性style，可以直接对html进行设置，style的值其实就是css代码

行内样式案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--行内样式-->
		<p style="color:#800080;font-size: 20px; text-decoration: underline;">hello</p>
		<p style="font-style: italic;"></p>
	</body>
</html>

03.06_CSS和html的结合方式–内嵌样式

内嵌样式就是在标签中使用

代码演示：选择器的使用全部使用的内嵌样式

03.07_CSS和html的结合方式–链接样式

<link  href="外部css文件的路径" type="MIME类型" rel="文本类型">
	href:css文件的路径，一般使用相对路径
	rel:stylesheet
	MIME类型：就是标记文档的类型，格式：大类型/小类型
		css:text/css
		js:text/javascript
		图片：image/jpg
		所有图片：image/*

link案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--链接样式引入css文件-->
		<link href="css/css1.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
		<h2>hello</h2>
		<p>fhajhgkagjalkgjak</p>
		
	</body>
</html>

03.08_CSS和html的结合方式–导入样式

导入样式和链接样式基本相同
语法：
- 在

import案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--导入样式-->
		<!--在同一个html文件中可以同时导入多个css文件-->
		<style>
			@import url("css/css1.css");
			@import url("css/blue.css");
		</style>
	</head>
	<body>
		
		<h2>hello</h2>
		<p>fhajhgkagjalkgjak</p>
		<h3>css文件</h3>
	</body>
</html>

03.09_CSS和html的结合方式–各种样式的优先级问题

总结：
- 作用范围：
  - 行内样式：只作用于当前标签【行内引用】
  - 内嵌样式：只作用于当前页面【内部引用】
  - 链接样式和导入样式：可以同时作用与多个页面【外部引用】
- 优先级：
- 行内样式的优先级是最高的
- 内部引用和外部引用：谁后写则采用谁的方式【以body为参照物，就近原则】
注意：在同一个页面中最多选用1-2种

优先级案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--链接样式
		<link href="css/green.css" type="text/css" rel="stylesheet" />
		-->
		
		<style>
			/*导入样式*/
			@import url("css/red.css");
		</style>
		
		<!--内嵌样式-->
		<style>
			p{
				color: blue;
			}	
		</style>
		
	</head>
	<body>
		<!--行内样式
		<p style="color: purple;">hello</p>
		-->
		<p>hello</p>
		
		
	</body>
</html>

03.10_css中的属性–字体属性

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				/*字体*/
				font-family:arial;
				
				/*字体类型
				 * oblique:真正的倾斜
				 * italic：意大利体
				 * normal:
				 */
				font-style: italic;
				
				/*字体加粗
				 * 取值范围100~900之间，数值越大，字体越粗
				 * normal:正常
				 * bold：加粗
				 * bolder：比bold还加粗
				 * lighter:比normal更细
				 */
				font-weight:100 ;
				
				/*字体大小*/
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<p>字体属性</p>
		
		<!--
			补充：
			1.px和em：文字大小单位
			px：像素,与分辨率有关
			em:自动使用尺寸，方便字体的放大和缩小
			1em = 16px
			2.oblique和italic
			italic：只是一种字体风格，对每个字母进行一定的小的改动，达到倾斜的效果
			oblique：则是将正常文字倾斜一定的角度
		-->
	</body>
</html>

03.11_css中的属性–文本属性

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				/*文本装饰
				 * none:正常
				 * underline:下划线
				 * line-through:删除线
				 * overline:顶线
				 * blink:文字闪烁【不是所有的浏览器都支持】
				 */
				text-decoration:underline;
				
				/*段落缩进，中文常用2em*/
				text-indent: 2em;
				
				/*对齐方式
				 * left
				 * right
				 * center
				 * justify:两端对齐
				 */
				
				text-align:left;
				
				/*设置单词之间的间距*/
				word-spacing:50px;
				
				/*设置字符之间的间距*/
				letter-spacing: 30px;
				
				/*字母大小写转换
				 * none；正常显示
				 * uppercase:转换成大写
				 * lowercase；转换为小写
				 * capitalize:单词首字母大写
				 */
				
				text-transform: capitalize;
				
				/*文本方向
				 * ltr:文本方向从左到右【默认】
				 * rtl:文本方向从右向左
				 */
				direction: rtl;
			}
		</style>
	</head>
	<body>
		<p>today is a good day中文中文中文 </p>
	</body>
</html>

03.12_css中的属性–盒子属性

div img
边框属性
- boder：统一设置，参数：边框宽度，边框样式，边框颜色
  - border-top:
  - border-bottom:
  - border-left:
  - border-right:
  - border-width:边框的宽度
  - border-style:边框样式，实线，虚线
    - dotted：点画线
    - dashed:虚线
    - solid:实线
    - double：双画线
  - border-color:边框的颜色
- 内边距
  - padding:值为距离【类似于border】
    - padding-left:
    - padding-right:
    - padding-top:
    - padding-bottom:

padding案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*标签名称选择器*/
			div{
				width: 200px;
				height: 100px;
				border: 2px dashed blue;
			}
			
			/*id选择器*/
			#div1{
				/*统一设置：设置上下左右的内边距*/
				padding: 20px;
			}
			
			#div2{
				/*单独设置：设置左边的内边距*/
				padding-left: 40px;
			}
			
		</style>
	</head>
	<body>
		<div>AAAAAAAAAAAA</div>
		<div id="div1">BBBBBBBBBBBB</div>
		<div id="div2">CCCCCCCCCCCC</div>
	</body>
</html>

margin
- 外边距
  - margin:外边距
    - margin-left:
    - margin-right:
    - margin-top:
    - margin-bottom:
- 设置图片边框
  - border-left-color:
  - border-top-width:

margin案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*标签名称选择器*/
			div{
				width: 200px;
				height: 100px;
				border: 2px dashed blue;
			}
			
			/*id选择器*/
			#div1{
				/*统一设置：设置上下左右的外边距*/
				margin: 20px;
			}
			
			#div2{
				/*单独设置：设置左边的外边距*/
				margin-left: 40px;
			}
			
		</style>
	</head>
	<body>
		<div>AAAAAAAAAAAA</div>
		<div id="div1">BBBBBBBBBBBB</div>
		<div id="div2">CCCCCCCCCCCC</div>
	</body>
</html>

03.12_css中的属性–尺寸属性

height:设置元素的高度
width；设置元素的宽度
line-height:设置行高

size案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.middle{
				/*
				 * 如果文本内容有多行的时候，如果height==line-height,则只显示一行
				 * 如果文本内容只有一行的时候，如果height==line-height，则文本在垂直方向上居中显示
				 */
				height: 100px;
				line-height: 100px;
				border: 1px dashed black;
			}
		</style>
	</head>
	<body>
		<div class="middle">
			尺寸属性  this is a text
			尺寸属性  this is a text
			尺寸属性  this is a text
			
		</div>
	</body>
</html>

03.13_css中的属性–背景属性

常用背景属性
- background:背景色/图
- background-color；背景色
- background-image:背景图
- background-repeat；背景样式平铺效果
- background: linear-gradient(to bottom right,red,blue)颜色渐变
  - repeat:整体平铺
  - no-repeat：不平铺
  - reapeat-x:只沿着水平方向平铺
  - reapeat-y:只沿着垂直方向平铺
- background-position：背景图像的位置
  - left\right\top\bottom\center
- background-attachment:设置背景图是否随着网页内容一起滚动
  - srcoll:随着滚动
  - fixed:固定的，不随着滚动

background案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				
				width: 100%;
				height: 5000px;
				
				/*背景颜色*/
				/*background-color: cyan;*/
				
				/*背景图*/
				/*格式：url(图片的相对路径)*/
				/*默认情况整体平铺*/
				/*background-image: url(img/pic20.jpg);*/
				
				/**/
				/*background-repeat: no-repeat;*/
				
				/*background-attachment: fixed;*/
				
				/*背景产生一个颜色渐变的效果*/
				/*background,默认在垂直方向上线性渐变*/
				/*background: linear-gradient(red,blue);*/
				
				/*从左到右的渐变*/
				/*background: linear-gradient(to right,red,blue);*/
				
				/*对角线的渐变*/
				background: linear-gradient(to bottom right,red,blue);		
			}
		</style>
	</head>
	<body>
	</body>
</html>

03.14_css中的属性–列表相关的属性

列表相关的属性
- backgroud-color:设置列表的背景颜色
- line-style-image；将项目符号设置为自定义的图片
- line-style-position:设置项目符号的位置
- list-style:设置整个列表的样式
  - 参数1：设置的样式
  - 参数2：样式设置的位置

list案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			li{
				background-color: orange;
				
				/*将项目符号设置为自定义的图片,项目符号默认为一个小圆点*/
				/*list-style-image:url(img/pic20.jpg);*/
				
				/*设置项目符号的位置,默认值为outside*/
				/*list-style-position: inside;*/
				
				
				/*将上面的两项合并，参数：图片  位置*/
				list-style: inside url(img/pic20.jpg);	
			}
		</style>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>菠萝</li>
			<li>芒果</li>
			<li>西瓜</li>
			<li>樱桃</li>
		</ul>
	</body>
</html>

03.15_css中的属性–浮动属性

div是块标签，在页面中独占一行，从上向下依次排列，这种排列方式称为流
- 标签浮动之前，称为标准流，是竖向排列
- 将标签浮动之后，可以达到横向排列的效果
float：浮动标签【实现文字环绕】
- none:默认值，不浮动
- left:文字漂浮在右边
- right:文字漂浮在左边

float案例01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*标签名称选择器*/
			div{
				width: 200px;
				height: 100px;
				border: 2px dashed blue;
			}
			
			/*id选择器*/
			#div1{
				float:left;
			}
			
			#div2{
				float: left;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">BBBBBBBBBBBB</div>
		<div id="div2">CCCCCCCCCCCC</div>
	</body>
</html>

float案例02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*背景色，取消默认的内边距和外边距*/
			body{
				background-color: lightgray;
				margin: 0px;
				padding: 0px;
			}
			
			/*图片*/
			img{
				float: left;
				width:150px;
				height: 150px;
			}
			
			/*段落*/
			p{
				color: black;
				margin: 0px;
				padding-left: 5px;
				padding-top: 10px;
				padding-right: 5px;
				text-indent: 2em;
			}
			
			/*设置第一个中文*/
			span{
				float: left;
				font-size: 60px;
				font-family: "黑体";
				padding-right:5px;
			}
			
		</style>
	</head>
	<body>
		
		<img src="img/zuchongzhi.png" />
		
		<p>
			<span>祖</span>冲之，429年（南朝宋元嘉六年）出生于建康（今南京），祖籍范阳郡遒县（今河北涞水县）。西晋末期，北方发生大规模战乱，祖冲之的先辈从河北迁徙到江南，并在江南定居下来。祖冲之就出生在江南，其祖父祖昌任刘宋朝大匠卿，是朝廷管理土木工程的官吏，父亲祖朔之做“奉朝请”，学识渊博，常被邀请参加皇室的典礼、宴会。
		</p>
		
		<p>
			祖冲之从小就受到很好的家庭教育。爷爷给他讲“斗转星移”，父亲领他读经书典籍，家庭的熏陶，耳濡目染，加之自己的勤奋，使他对自然科学和文学、哲学，特别是天文学产生了浓厚的兴趣，在青年时代就有了博学的名声
		</p>
		
		<p>
			由于祖冲之博学多才的名声，被南朝宋孝武帝派至当时朝廷的学术研究机关华林学省做研究工作，后来又到总明观任职。当时的总明观是全国最高的科研学术机构，相当于现在的中国科学院。总明观内分设文、史、儒、道、阴阳5门学科，实行分科教授制度，请来各地有名望的学者任教，祖冲之就是其一。在这里，祖冲之接触了大量国家藏书，包括天文、历法、术算方面的书籍，具备了借鉴与拓展的先决条件。
		</p>
	</body>
</html>

03.16_css中的属性–定位属性

absolute
- absolute:绝对定位，将对象从文档流中拖出，可以使用top，bottom等属性设置定位【会脱离文档流，不会保留位置】
  - 参照物：
  - a.如果该标签的父标签设置有效的定位属性，就以父标签为参照物
  - b.如果没有设置，会查找所有的先辈标签，如果有先辈标签设置了有效定位，则以先辈标签为参照物
  - c.如果先辈标签有没有设置有效定位，则以body为参照物

absolute案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位</title>
		<style>
			body{
				height: 9999px;
			}
			
			.pos_abs{
				position: absolute;
				left:100px;
				top: 150px;
			}
		</style>
	</head>
	<body>
		<!--参照物：父标签【先辈标签】-->
		<h2 class="pos_abs">这是一个带有绝对定位的标题</h2>
	</body>
</html>

relative
- relative:相对定位，不会将对象从文档流中拖出，可以使用top，bottom等属性设置定位【不会脱离文档流，会保留原来的位置，达到了灵魂脱壳的效果】
  - 参照物：该标签自身原来的位置
fixed
- fixed:固定定位，脱离文档流
  - 一般应用在广告中，参照物为窗体
  - 有效的定位属性；可以设置距离参照物的top,bottom,left,right,如果该标签在参照物的内部，这些属性值为正数，一旦出界则这些属性值为负数

fixed案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
		<style>
			body{
				height: 9999px;
			}
			
			.one{
				position: fixed;
				left: 5px;
				top: 5px;
			}
			.two{
				position: fixed;
				left: 30px;
				top: 30px;
			}
		</style>
	</head>
	<body>
		<!--参照物：当前显示的窗体，一般应用在广告-->
		<p class="one">hello</p>
		<p class="two">today</p>
	</body>
</html>

z-index
- z-index:用于在一个元素的上面放置另一个元素【叠加】

z-index案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1{
				color: red;
			}
			.x{
				position: absolute;
				left:0px;
				top:0px;
				
				/*
				 * 根据z-index的值来决定谁存在于最上层
				 * 此属性的值越大，则被层叠在最上层
				 * 如果没有设置z-index的值，默认为0
				 */
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<h1>标题</h1>
		
		<img class="x" src="img/pic20.jpg" />
	</body>
</html>

03.17_形变和过渡

transfrom:旋转，按比例放大或者缩小

transform案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#transform{
				width: 200px;
				height: 200px;
				background-color: orange;
				
				margin: 0px;
				color: white;
				
				/*设置旋转点*/
				transform-origin: center bottom;
				
				/*
				 * 旋转 立体旋转x,y,z三个轴
				 * degree；度
				 * rotate(30deg)：默认沿着z轴旋转
				 * rotateX(30deg):沿着X轴旋转
				 * rotateY(30deg):沿着Y轴旋转
				 * */
				/*transform: rotate(-30deg);*/
				
				/*放大*/
				/*transform: scale(2);*/
				/*注意：rotate和scale使用transform不能两个同时设置*/
				
				/*合并*/
				transform: rotate(-30deg) scale(1.5);
			}
		</style>
	</head>
	<body>
		<div id="transform">演示形变</div>
	</body>
</html>

03.18_动画animation

animation

animation案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.transform{
				position: absolute;
				width: 150px;
				height: 150px;
				background: red;
				
				margin: 50px;
				
				transform-origin: center;
				transform: rotate(30deg) scale(1.5);
				
				animation: animation 5s linear;
				
			}
			
			@keyframes animation{
				from{
					margin-left: 100px;
					transform: rotate(0deg) scale(1);
				}
				to{
					margin-left: 500px;
					transform: rotate(200deg) scale(1.5);
				}
			}
		</style>
	</head>
	<body>
		<div class="transform">旋转动画</div>
	</body>
</html>

如有错误，请在下面评论。好及时更正，谢谢！

js及jQuery总结（二）

03.01_css选择器-属性选择器

03.02_css选择器-包含选择器：

03.03_css选择器-组合选择器：

03.04_css选择器-伪类选择器

03.05_CSS和html的结合方式–行内样式

行内样式案例

03.06_CSS和html的结合方式–内嵌样式

代码演示：选择器的使用全部使用的内嵌样式

03.07_CSS和html的结合方式–链接样式

link案例

03.08_CSS和html的结合方式–导入样式

import案例

03.09_CSS和html的结合方式–各种样式的优先级问题

优先级案例

03.10_css中的属性–字体属性

03.11_css中的属性–文本属性

03.12_css中的属性–盒子属性

padding案例

margin案例

03.12_css中的属性–尺寸属性

size案例

03.13_css中的属性–背景属性

background案例

03.14_css中的属性–列表相关的属性

list案例

03.15_css中的属性–浮动属性

float案例01

float案例02

03.16_css中的属性–定位属性

absolute案例

fixed案例

z-index案例

03.17_形变和过渡

transform案例

03.18_动画animation

animation案例

猜你喜欢