前端基础总结(一)

点击

前端总结(一)

前端总结(二)

前端总结(三)

目录

1.简介

2.注释,标签的属性

3. 文档声明

 4.乱码问题

 5.常用标签

 6.实体

 7.图片标签

8.相对路径,图片格式

 9.meta标签

10.xHtml语法规范

11.内联框架

12.超链接

13.练习

14. 内部样式,外部样式

15.CSS语法

16.内联和块元素

17.常用选择器

18.子孙和后代选择器

19.伪类选择器

20.伪元素 

21.属性选择器

22.子元素的伪类

23.兄弟元素选择器

24.否定伪类

25.样式继承

26.选择器的优先级

27.伪类的顺序

28.文本标签

29.无序列表,有序列表

30.定义列表

31.长度单位

32.十六进制RGB

33.字体样式

34.RGB值

35.字体分类

36.字体其他样式

37.行间距

38.文本样式

39.盒子模型

40.边框,边框简写属性

41.内边距

42.外边距,垂直外边距

43.浏览器默认样式

44.内联元素的盒子

 


1.简介

<!DOCTYPE html>
<html lang="en">

	<head>
		<title>这是一个非常好的网页</title>
	</head>

	<body>
		<h1>这是我的第一个网页</h1>
	</body>
</html>

2.注释,标签的属性

 1.html根标签,一个页面中有且只有一个根标签,网页中的所有内容都应该写在html根标签中

2.head标签,该标签中的内容,不会在网页中直接显示,它用来帮助浏览器解析页面的 

3.title网页的标题标签,默认会显示在浏览器的标题栏中

                搜索引擎在检索页面时,会首先检索title标签中的内容

                它是网页中对于搜索引擎来说最重要的内容,会影响到网页在搜索引擎中的排名

4.body标签用来设置网页的主体内容,网页中所有可见的内容,都应该在body中编写

5.<!-- 

             在这个结构中,可以来编写HTML的注释

             注释中的内容,不会在页面中显示,但是可以在源码中查看

             我们可以通过编写注释来对代码进行描述,从而帮助其他的开发人员工作    

            一定要养成良好的编写注释的习惯,但是注释一定要简单明了        

         -->        

6.属性:

                可以通过属性来设置标签如果处理标签中的内容

                可以在开始标签中添加属性

                属性需要写在开始标签中,实际上就是一个名值对的结构

                属性名 = "属性值",一个标签中可以同时设置多个属性,属性之间需要使用空格隔开

3. 文档声明

h5的文档声明,声明当前的网页是按照HTML5标准编写的
 编写网页时一定要将h5的文档声明写在网页的最上边
 如果不写文档声明,则会导致有些浏览器会进入一个怪异模式,
        进入怪异模式以后,浏览器解析页面会导致页面无法正常显示,所以为了避免进入该模式,一定要写文档声明 

 4.乱码问题

 需要来告诉浏览器,网页所采用的编码字符集
            meta标签用来设置网页的一些元数据,比如网页的字符集,关键字、简介
            meta是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加 一个/ 

<!doctype html>
<html>
	<head>
		<!-- 需要来告诉浏览器,网页所采用的编码字符集
			meta标签用来设置网页的一些元数据,比如网页的字符集,关键字、简介
			meta是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加 一个/
		-->
		<meta charset="utf-8" />
		<title>网页的标题</title>
	</head>
	<body>
		<h1>这是一个非常漂亮的网页</h1>
	</body>
</html>

 5.常用标签

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>常用的标签</title>
	</head>
	<body>
		
		<!-- 
			标题标签
				-在HTML中,一共有六级标题标签
				h1 ~ h6
				在显示效果上h1最大,h6最小,但是文字的大小我们并不关心
				使用HTML标签时,关心的是标签的语义,我们使用的标签都是语义化标签
				6级标题中,h1的最重要,表示一个网页中的主要内容,h2 ~ h6重要性依次降低
					对于搜索引擎来说,h1的重要性仅次于title,搜索引擎检索完title,会立即查看h1中的内容
						h1标签非常重要,它会影响到页面在搜索引擎中的排名,页面只能写一个h1
						
				一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用		
		-->
		<h1>一级标题</h1>
		<h2>一级标题</h2>
		<h3>一级标题</h3>
		<h4>一级标题</h4>
		<h5>一级标题</h5>
		<h6>一级标题</h6>
		
		<!-- 
			段落标签,段落标签用于表示内容中的一个自然段
			使用p标签来表示一个段落
			
			p标签中的文字,默认会独占一行,并且段与段之间会有一个间距
		-->
		<p>我是一个p标签,我用来表示一个段落</p>
		<p>我是一个p标签,我用来表示一个段落</p>
		
		<!-- 
			在HTML中,字符之间写再多的空格,浏览器也会当成一个空格解析,
				换行也会当成一个空格解析。
			在页面中可以使用br标签来表示一个换行,br标签是一个自结束标签	
		-->
		<p>
			锄禾日当午,<br />
			汗滴禾下土,<br />
			谁知盘中餐,<br />
			粒粒皆辛苦。<br />
		</p>
		
		<!--
			hr标签也是一个自结束标签,可以在页面中生成一条水平线
		-->
		<hr />
		
	
	</body>
</html>

 6.实体

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>实体</title>
	</head>
	<body>
		<!-- 
			在HTML中,一些如< >这种特殊字符是不能直接使用,
				需要使用一些特殊的符号来表示这些特殊字符,这些特殊符号我们称为实体(转义字符串)
				浏览器解析到实体时,会自动将实体转换为其对应的字符
			实体的语法:
				&实体的名字;
					<  &lt;
					>  &gt;
					空格  &nbsp;
					版权符号 &copy;
		-->
		a&lt;b&gt;c
		<p>&copy;&divide;今天天气&nbsp;&nbsp;&nbsp;好晴朗,处处好风光</p>
	</body>
</html>

 7.图片标签

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片标签</title>
	</head>
	<body>
		
		<!-- 
			使用img标签来向网页中引入一个外部图片,
				img标签也是一个自结束标签
			属性:
				src:设置一个外部图片的路径
				alt:可以用来设置在图片不能显示时,对图片的描述
						搜索引擎可以通过alt属性来识别不同的图片
						如果不写alt属性,则搜索引擎不会对img中的图片进行收录
				width:可以用来修改图片的宽度,一般使用px作为单位
				height	:可以用来修改图片的高度,一般使用px作为单位
				
				宽度和高度两个属性如果指设置一个,另一个也会同时等比例调整大小
					如果两个值同时指定则按照你指定的值来设置
				一般开发中除了自适应的页面,不建议设置width和height	
		-->	
		<img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px"  />
		
	</body>
</html>

8.相对路径,图片格式

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片标签</title>
	</head>
	<body>
		
		
		<!--
			src属性配置的是图片的路径,目前我们所要使用的路径全都是相对路径。
			相对路径:
				相对路径指相对于当前资源所在目录的位置
				<img src="abc/bcd/2.gif" alt="这是一个大松鼠"/>
				
			可以使用../来返回一级目录,返回几级目录就写几个../	
			<img src="../../img/2.gif" alt="这是一个大松鼠"/>
		-->
		<img src="../img/2.gif" alt="这是一个大松鼠"/>
		
		<!--
			图片的格式
				JPEG(JPG)
					- JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明
					- 一般使用JPEG来保存照片等颜色丰富的图片
					
				GIF
					- GIF支持的颜色少,只支持简单的透明,支持动态图
					- 图片颜色单一或者是动态图时可以使用gif
				
				PNG
					- PNG支持的颜色多,并且支持复杂的透明
					- 可以用来显示颜色复杂的透明的图片

			图片的使用原则:
				效果不一致,使用效果好的
				效果一致,使用小的
		-->
		
	</body>
</html>

 9.meta标签

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 
			使用meta标签还可以用来设置网页的关键字
		-->
		<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
		
		<!-- 
			还可以用来指定网页的描述
			搜索引擎在检索页面时,会同时检索页面中的关键词和描述,但是这两个值不会影响页面在搜索引擎中的排名
		-->
		<meta name="description" content="发布h5、js等前端相关的信息" />
		
		
		<!-- 
			使用meta可以用来做请求的重定向
			<meta http-equiv="refresh" content="秒数;url=目标路径" />
		-->
		<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
		
	</head>
	<body>
	<!-- 我是一个注释
		<h1>这是一个标题</h1>
	-->
		<h1>5秒以后跳转页面</h1>
		
	</body>
</html>

10.xHtml语法规范

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>xHtml的语法规范</title>
	</head>
	<body>
		<!--
			1.HTML中不区分大小写,但是我们一般都使用小写
		-->
		
		<!-- 
			2.HTML中的注释不能嵌套
		-->
		
		<!-- 
			3.HTML标签必须结构完整,要么成对出现,要么自结束标签
		-->
		<!-- 正确 -->
		<p>我是一个p标签</p>
		<!-- 错误 -->
		<p>我是一个p标签
		
		<!-- 
			浏览器尽最大的努力正确的解析页面,你所有的不符合语法规范的内容,
				浏览器都会为你自动修正,但是有些情况会修正错误
		-->
		<!-- 自结束标签 -->
		abc
		<br />
		bcd
		<br>
		efg
		
		<!-- 
			4.HTML标签可以嵌套,但是不能交叉嵌套
		-->
		<p>今天天气<font color="red">真不错</font><p>
		
		<p>今天天气<font color="red">真不错<p></font>
		<hr />
		<!-- 
			5.HTML标签中的属性必须有值,且值必须加引号(双引号单引号都可以)
		-->
		
		<p>今天天气<font color>真不错</font><p>
		<p>今天天气<font color='red'>真不错</font><p>
		
		
		
		
	</body>
</html>

11.内联框架

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内联框架</title>
	</head>
	<body>
		<h1>我是demo03</h1>
		<!-- 
			使用内联框架可以引入一个外部的页面
				使用iframe来创建一个内联框架
				属性:
					src :指向一个外部页面的路径,可以使用相对路径
					width:
					height:
					name :可以为内联框架指定一个name属性
					
			在现实开发中不推荐使用内联框架,因为内联框架中的内容不会被搜索引擎所检索		
		-->
		<iframe src="demo02.html" name="tom"></iframe>
		
	</body>
</html>

12.超链接

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>超链接</title>
	</head>
	<body>
		<h1>我是demo04</h1>
		<!-- 
			使用超链接可以让我们从一个页面跳转到另一个页面
			使用a标签来创建一个超链接	
			属性:
				href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
		-->
		
		<a href="http://www.baidu.com">我是一个超链接</a> <br /><br />
		
		<a href="http://www.baidu1234567.com">我是一个超链接</a> <br /><br />
		
		<!-- 
			a标签中的target属性可以用来指定打开链接的位置
				可选值:
					_self,表示在当前窗口中打开(默认值)
					_blank,在新的窗口中打开链接
					可以设置一个内联框架的name属性值,链接将会在指定的内联框架中打开
		-->
		<a href="demo03.html" target="tom">我是一个超链接</a>
		<br /> <br />
		<iframe src="demo02.html" name="tom"></iframe>
		
		<!-- center标签中的内容,会默认在页面中居中显示 
				我们可以将要居中的元素,全都放到center中
		-->
		
		<center>
			<p>我是一个p标签</p>
		</center>
		
	</body>
</html>

13.练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<center>
        <!--
            跳转到id为bottom 的元素所在位置
            直接在href中写#id属性值
        -->
        <a href="#bottom">去底部</a>
		<h1>这是我的个人博客</h1>
		<hr />
		<h2>题目</h2>
        <!--
            创建超链接时,如果地址不能确定可以直接写一个#作为占位符   
        -->
		<a href="#">作者</a> 
		<p>
			段落1--------<br/>
			<img src="1.jpg" alt="mv图片" width="300px"><br />
			段落2--------<br/>
			<img src="2.jpg" alt="mv图片" width="300px"><br />
			段落3---------<br/>
		</p>
		<hr /> 
		友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a>  
        <!--
            如果将链接地址设置为#,则点击超链接后,会自动跳转到当前页面的底部

            html中有一个属性,每个元素可以设置,该属性可以作为标签的唯一标识
            这个属性就是id,id属性在同一个页面只能有一个,不能重复。
        -->
		<br /> <br />
		<a id="bottom" href="#top">回到顶部</a> |
        <!--
            发送电子邮件的超链接,点击链接以后可以自动打开计算机中默认的邮件客户端
            href="mailto:邮件地址"
        -->
        <a href="mailto:aaa@aaa.com">联系我们</a>
	</center>
</body>
</html>

14. 内部样式,外部样式

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS</title>
		<!--
			内部样式表
			也可以将CSS样式编写到head中的style标签里
				将样式表编写的style标签中,然后通过CSS选择器选中指定元素
					然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用
				将样式表编写到style标签中,也可以使表现和结构进一步分离它也是我们推荐的使用方式	
				<style type="text/css">
			p{
				color:red;
				font-size:40px;
			}
		
		</style>
		-->
		
		<!--
			还可以将样式表编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入到当前页面中,
			这样外部文件中的css样式表将会应用到当前页面中。
			
			将CSS样式统一编写到外部的样式表中,完全使结构和表现分离,可以是样式表可以在不同的页面中使用,
			最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存
			加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件
		-->
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		
	</head>
	<body>
		<!-- 
			可以将CSS样式编写到元素的style属性当中
				将样式直接编写到style属性中,这种样式我们称为内联样式
				内联样式只对当前的元素中的内容起作用,内联样式不方便复用
				内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用的
				<p style="color:red;font-size:40px;">锄禾日当午,汗滴禾下土</p>
				<p style="color:red;font-size:40px;">谁知盘中餐,粒粒皆辛苦</p>
		-->
		
		<p>谁知盘中餐,粒粒皆辛苦</p>
		<p>谁知盘中餐,粒粒皆辛苦</p>
		<p>谁知盘中餐,粒粒皆辛苦</p>
		<p>谁知盘中餐,粒粒皆辛苦</p>
		<p>谁知盘中餐,粒粒皆辛苦</p>
		<p>谁知盘中餐,粒粒皆辛苦</p>
	</body>
</html>

15.CSS语法

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS</title>	
		<style type="text/css">
			
			/*
				CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中
				
				CSS的语法:
				
					选择器 声明块
					
				选择器:
					- 通过选择器可以选中页面中指定的元素,
						并且将声明块中的样式应用到选择器对应的元素上
						
						
				声明块:
					- 声明块紧跟在选择器的后边,使用一对{}括起来,
						声明块中实际上就是一组一组的名值对结构,
							这一组一组的名值对我们称为声明,
						在一个声明块中可以写多个声明,多个声明之间使用;隔开,
						声明的样式名和样式值之间使用:来连接
					
			*/
			
				
			p{
				color:red;
				font-size:50px;
			}
		
		</style>
		
	</head>
	<body>
			
		<p style="color:red">今天天气真不错,PM2.5也就500</p>
		
	</body>
</html>

16.内联和块元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			块元素和内联元素
			
			div就是一个块元素,
				所谓的块元素就是会独占一行的的元素,无论他的内容有多少
					他都会独占一整行。
				p h1 h2 h3 ... 
				div这个标签没有任何语义,就是一个纯粹的块元素,
					并且不会为它里边的元素设置任何的默认样式,
				div元素主要用来对页面进行布局的	
				
			span是一个内联元素(行内元素)	
				所谓的行内元素,指的是只占自身大小的元素,不会占用一行
				常见的内联元素:
					a img iframe span
				span没有任何的语义,span标签专门用来选中文字,
				然后为文字来设置样式	
				
			块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式,
				一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素
				a元素可以包含任意元素,除了他本身
				p元素不可以包含任何块元素
				
		-->
		
		<p><div>我是一个span</div></p>
		
		<a href="#"><a href="#">我是一个超链接</a></a>
		
		
		<a href="#">
			<div style="background-color:red ; width: 200px;">
				我是一个div
			</div>
		</a>
		<div style="background-color:yellow ; width: 200px;">
			我是一个div
		</div>
		
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		
		<hr />
		
		<span>我是一个span</span>
		<span>我是一个span</span>
		
		<span>我是一段文字</span>
	
		
		
		
	</body>
</html>

17.常用选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用选择器</title>
		<style type="text/css">
			
			/*为页面中的所有的p元素,设置一个字体颜色为红色*/
			/*
			 * 元素选择器
			 * 	作用:通过元素选择器可以选则页面中的所有指定元素
			 *  语法:标签名 {}
			 */
			
			/*p{
				color: red;
			}
			
			h1{
				color: red;
			}*/
			
			/*
			 * id选择器
			 * 	- 通过元素的id属性值选中唯一的一个元素
			 *  - 语法:
			 * 		#id属性值 {}
			 */
			/*#p1{
				font-size: 20px;
			}*/
			
			/*
			 * 类选择器
			 * 	- 通过元素的class属性值选中一组元素
			 *  - 语法:
			 * 		.class属性值{}
			 */
			/*.p2{
				color: red;
			}
			
			.hello{
				font-size: 50px;
			}*/
			
			/*
			 * 为id为p1的元素,class为p2的元素,还有h1,同时设置一个背景颜色为黄色
			 */
			
			/*
			 * 选择器分组(并集选择器)
			 * 	- 通过选择器分组可以同时选中多个选择器对应的元素
			 * 	- 语法:选择器1,选择器2,选择器N{}
			 */
			/*#p1 , .p2 , h1{
				background-color: yellow;
			}*/
			
			/*
			 * 通配选择器
			 * 	- 他可以用来选中页面中的所有的元素
			 * 	语法:*{}
			 */
			
			/**{
				color: red;
			}*/
			
			/*
			 * 为拥有class p3 span元素设置一个背景颜色为黄色
			 * 
			 * 复合选择器(交集选择器)
			 * 	- 作用:
			 * 		- 可以选中同时满足多个选择器的元素
			 *  - 语法:
			 * 		- 选择器1选择器2选择器N{}
			 */
			span.p3{
				background-color: yellow;
			}
			
			/*
			 * 对于id选择器来说,不建议使用复合选择器
			 * p#p1{
				background-color: red;
			}*/
			
			
		
			
		</style>
	</head>
	<body>
		<h1>悯农</h1>
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		<p id="p1">锄禾日当午</p>
		
		<!-- 
			我们可以为元素设置class属性,
				class属性和id属性类似,只不过class属性可以重复
				拥有相同class属性值的元素,我们说他们是一组元素
				可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开
		-->
		<p class="p2 hello">锄禾日当午</p>
		<p class="p2">锄禾日当午</p>
		<p class="p2">锄禾日当午</p>
		
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		<p>锄禾日当午</p>
		
		<p class="p3">锄禾日当午</p>
		<span class="p3">汗滴禾下土</span>
		
	</body>
</html>

18.子孙和后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 为div中的span设置一个颜色为绿色
			 * 后代元素选择器
			 * 	- 作用:
			 * 		- 选中指定元素的指定后代元素
			 * 	- 语法:
			 * 		祖先元素 后代元素{}	
			 */
			#d1 span{
				color: greenyellow;
			}
			
			/*
			 * 选中id为d1的div中的p元素中的span元素
			 */
			#d1 p span{
				font-size: 50px;
			}
			
			/*
			 * 为div的子元素span设置一个背景颜色为黄色
			 * 子元素选择器
			 * 	- 作用:
			 * 		- 选中指定父元素的指定子元素
			 * 	- 语法:
			 * 		父元素 > 子元素
			 * 
			 * IE6及以下的浏览器不支持子元素选择器
			 */
			div > span{
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		<!--
			元素之间的关系
				父元素:直接包含子元素的元素
				子元素:直接被父元素包含的元素
				祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
				后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
				兄弟元素:拥有相同父元素的元素叫做兄弟元素			
		-->
		<div id="d1">
			<span>我是div标签中的span</span>
			<p><span>我是p标签中的span</span></p>
		</div>
		
		<div>
			<span>我是body中的span元素</span>
		</div>
		
		
	</body>
</html>

19.伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 伪类专门用来表示元素的一种的特殊的状态,
			 * 	比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框
			 * 当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类
			 */
			
			/*
			 * 为没访问过的链接设置一个颜色为绿色
			 * 	:link
			 * 		- 表示普通的链接(没访问过的链接)
			 */
			a:link{
				color: yellowgreen;
			}
			
			/*
			 * 为访问过的链接设置一个颜色为红色
			 * 	:visited
			 * 		- 表示访问过的链接
			 * 
			 * 浏览器是通过历史记录来判断一个链接是否访问过,
			 * 	由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色
			 * 
			 */
			a:visited{
				color: red;
			}
			
			/*
			 * :hover伪类表示鼠标移入的状态
			 */
			a:hover{
				color: skyblue;
			}
			
			/*
			 * :active表示的是超链接被点击的状态
			 */
			a:active{
				color: black;
			}
			
			/*
			 * :hover和:active也可以为其他元素设置
			 * IE6中,不支持对超链接以外的元素设置:hover和:active
			 */
			/*p:hover{
				background-color: yellow;
			}
			
			p:active{
				background-color: orange;
			}*/
			
			/*
			 * 文本框获取焦点以后,修改背景颜色为黄色
			 */
			input:focus{
				background-color: yellow;
			}
			
			/**
			 * 为p标签中选中的内容使用样式
			 * 	可以使用::selection为类
			 * 	注意:这个伪类在火狐中需要采用另一种方式编写::-moz-selection
			 */
			
			/**
			 * 兼容火狐的
			 */
			p::-moz-selection{
				background-color: orange;
			}
			
			/**
			 * 兼容大部分浏览器的
			 */
			p::selection{
				background-color: orange;
			}
			
		</style>
	</head>
	<body>
		
		
		<a href="http://www.baidu.com">访问过的链接</a>
		<br /><br />
		<a href="http://www.baidu123456.com">没访问过的链接</a>
		
		<p>我是一个段落</p>
		
		<!-- 使用input可以创建一个文本输入框 -->
		<input type="text" />
		
	</body>
</html>

20.伪元素 

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 使用伪元素来表示元素中的一些特殊的位置
			 */
			/*
			 * 为p中第一个字符来设置一个特殊的样式
			 */
			
			/*p:first-letter {
				color: red;
				font-size: 20px;
			}*/
			/*
			 * 为p中的第一行设置一个背景颜色为黄色
			 */
			
			/*p:first-line {
				background-color: yellow;
			}*/
			
			/*
			 * :before表示元素最前边的部分
			 * 	一般before都需要结合content这个样式一起使用,
			 * 	通过content可以向before或after的位置添加一些内容
			 * 
			 * :after表示元素的最后边的部分
			 */
			p:before{
				content: "我会出现在整个段落的最前边";
				color: red;
			}
			
			p:after{
				content: "我会出现在整个段落的最后边";
				color: orange;
			}
		</style>
	</head>

	<body>
		<p>
			在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
		</p>
	</body>

</html>

21.属性选择器

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 为所有具有title属性的p元素,设置一个背景颜色为黄色
			 * 属性选择器
			 * 	- 作用:可以根据元素中的属性或属性值来选取指定元素
			 * 	- 语法:
			 * 		[属性名] 选取含有指定属性的元素
			 * 		[属性名="属性值"] 选取含有指定属性值的元素
			 * 		[属性名^="属性值"] 选取属性值以指定内容开头的元素
			 * 		[属性名$="属性值"] 选取属性值以指定内容结尾的元素
			 * 		[属性名*="属性值"] 选取属性值以包含指定内容的元素
			 */
			/*p[title]{
				background-color: yellow;
			}*/
			
			/*
			 * 为title属性值是hello的元素设置一个背景颜色为黄色
			 */
			/*p[title="hello"]{
				background-color: yellow;
			}*/
			
			/*
			 * 为title属性值以ab开头的元素设置一个背景颜色为黄色
			 */
			/*p[title^="ab"]{
				background-color: yellow;
			}*/
			
			/*
			 * 为title属性值以c结尾的元素设置一个背景颜色
			 */
			/*p[title$="c"]{
				background-color: yellow;
			}*/
			
			p[title*="c"]{
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		
		<!--
			title属性,这个属性可以给任何标签指定
				当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示
		-->
		<p title="hello">我是一个段落</p>
		<p>我是一个段落</p>
		<p title="hello">我是一个段落</p>
		<p title="abbc">我是一个段落</p>
		<p title="abccd">我是一个段落</p>
		<p title="abc">我是一个段落</p>
		
	</body>
</html>

22.子元素的伪类

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 为第一个p标签设置一个背景颜色为黄色
			 * 	:first-child 可以选中第一个子元素
			 *  :last-child 可以选中最后一个子元素
			 */
			/*body > p:first-child{
				background-color: yellow;
			}*/
			
			/*p:last-child{
				background-color: yellow;
			}*/
			
			/*
			 * :nth-child 可以选中任意位置的子元素
			 * 		该选择器后边可以指定一个参数,指定要选中第几个子元素
			 * 		even 表示偶数位置的子元素
			 * 		odd 表示奇数位置的子元素
			 * 		
			 */
			/*p:nth-child(odd){
				background-color: yellow;
			}*/
			
			/*
			 * :first-of-type
			 * :last-of-type
			 * :nth-of-type
			 * 		和:first-child这些非常的类似,
			 * 		只不过child,是在所有的子元素中排列
			 * 		而type,是在当前类型的子元素中排列
			 */
			/*p:first-of-type{
				background-color: yellow;
			}*/
			p:last-of-type{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<span>我是span</span>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<span>hello</span>
		
		<!--<div>
			<p>我是DIV中的p标签</p>
		</div>-->
		
	</body>
</html>

23.兄弟元素选择器

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 为span后的一个p元素设置一个背景颜色为黄色
			 * 后一个兄弟元素选择器
			 * 	作用:可以选中一个元素后紧挨着的指定的兄弟元素
			 * 	语法:前一个 + 后一个
			 * 
			 */
			
			/*span + p{
				background-color: yellow;
			}*/
			
			/*
			 * 选中后边的所有兄弟元素
			 * 	语法:前一个 ~ 后边所有	
			 */
			span ~ p{
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<span>我是一个span</span>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
	</body>
</html>

24.否定伪类

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 为所有的p元素设置一个背景颜色为黄色,除了class值为hello的
			 * 
			 * 否定伪类:
			 * 	作用:可以从已选中的元素中剔除出某些元素
			 * 	语法:
			 * 		:not(选择器)
			 */
			p:not(.hello){
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
		<p class="hello">我是一个p标签</p>
		<p>我是一个p标签</p>
		<p>我是一个p标签</p>
	</body>
</html>

25.样式继承

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 
			像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承,
			利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式。
			
			但是并不是所有的样式都会被子元素所继承,比如:背景相关的样式都不会被继承 边框相关的样式 定位相关的
		-->
		
		<div style="background-color: yellow;">
			<p>
				我是p标签中的文字
				<span>我是span中的文字</span>
			</p>
		</div>
		
		
		<span>我是p元素外的span</span>
		
	</body>
</html>

26.选择器的优先级

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.p1{
				background-color: yellow;
			}
			
			p{
				background-color: red;
			}
			
			
			
			/*
			 * 当使用不同的选择器,选中同一个元素时并且设置相同的样式时,
			 * 	这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定
			 *  优先级高的优先显示。
			 * 
			 * 优先级的规则
			 * 		内联样式 , 优先级  1000
			 * 		id选择器,优先级   100
			 * 		类和伪类, 优先级   10
			 * 		元素选择器,优先级 1 
			 * 		通配* ,    优先级 0
			 * 		继承的样式,没有优先级
			 * 
			 * 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,
			 * 	但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,
			 * 	则使用靠后的样式。
			 * 
			 *  并集选择器的优先级是单独计算
			 * 	div , p , #p1 , .hello{}	
			 * 
			 *  可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,
			 * 	将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important
			 * 
			 */
			
			*{
				font-size: 50px;
			}
			
			p{
				font-size: 30px;
			}
			
			#p2{
				background-color: yellowgreen;
			}
			
			p#p2{
				background-color: red;
			}
			
			
			.p3{
				color: green;
			}
			
			.p1{
				color: yellow;
				background-color: greenyellow !important;
			}
			
			
			
		</style>
	</head>
	<body>
		
		<p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落
			<span>我是p标签中的span</span>
		</p>
		
	</body>
</html>

27.伪类的顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			/*
			 * 涉及到a的伪类一共有四个:
			 * 	:link
			 *  :visited
			 * 	:hover
			 * 	:active
			 * 而这四个选择器的优先级是一样的。
			 */
			
			a:link{
				color: yellowgreen;
			}
			a:visited{
				color: red;
			}
			
			/*
			 * 鼠标移入
			 */
			a:hover{
				color: orange;
			}
			
			/*
			 * 正在点击
			 */
			a:active{
				color: cornflowerblue;
			}
			
		</style>
	</head>
	<body>
		
		<a href="http://www.baidu.com">访问过的链接</a>
		<br /><br />
		<a href="http://www.baidu123456.com">未访问过的链接</a>
		
	</body>
</html>

28.文本标签

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 
			em和strong
			- 这两个标签都表示一个强调的内容,
				em主要表示语气上的强调,em在浏览器中默认使用斜体显示
				strong表示强调的内容,比em更强烈,默认使用粗体显示
		-->
		<p>
			今天天气<em>真不错</em>!
		</p>
		
		<p>
			<strong>
				注意:如果你不认真上课,你就找不到好工作!
			</strong>
		</p>
		
		<!-- 
			i标签中的内容会以斜体显示
			b标签中的内容会以加粗显示
			
			h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,
				就可以使用b和i标签
		-->
		<p>
			<i>我是i标签中的内容</i>
			<b>我是b标签中的内容</b>
		</p>
		
		<!--
			small标签中的内容会比他的父元素中的文字要小一些
				在h5中使用small标签来表示一些细则一类的内容
				比如:合同中小字,网站的版权声明都可以放到small
		-->
		<p>
			我是p标签中的内容<small>我是small标签中的内容</small>
		</p>
	
		<!-- 
			网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容,
				比如:书名 歌名 话剧名 电影名 。。。
		-->
		<p>
			<cite>《论语》</cite>是最喜欢的一般的书
		</p>
		
		<!--
			q标签表示一个短的引用(行内引用)
				q标签引用的内容,浏览器会默认加上引号
			
			blockquote标签表示一个长引用(块级引用)
		-->
		<p>
			子曰:<q>学而时习之不亦说乎!</q>
		</p>
		
		<div>
			子曰:
			<blockquote>
				有朋自远方来,乐呵乐呵!
			</blockquote>
		</div>
		
		<!-- 
			使用sup标签来设置一个上标
		-->
		<p>2<sup>2</sup></p>
		<p>赵薇<sup><a href="#">[1]</a></sup></p>
		
		<!--
			sub标签用来表示一个下标
		-->
		<p>H<sub>2</sub>O</p>
		
		<!--
			使用del标签来表示一个删除的内容
				del标签中的内容,会自动添加删除线
		-->
		<p>
			<del>17.75</del> <br />
			15.54 <br />
		</p>
		
		
		<!-- 
			ins表示一个插入的内容
				ins中的的内容,会自动添加下划线
		-->
		<p>
			我们的老师真<ins>好啊</ins>!
		</p>
		
		
		<!--
			需要页面中直接编写一些代码
			pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
			code专门用来表示代码
			
			我们一般结合使用pre和code来表示一段代码
		-->
		
		<pre>
			<code>
				window.onload = function(){
					alert("Hello World");
				};
			</code>
		</pre>
		
		
	</body>
</html>

29.无序列表,有序列表

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 	去掉项目符号
			 * */
			/*ul{
				list-style: none;
			}*/
			
		</style>
	</head>
	<body>
		
		<!-- 
			列表就相当于去超市购物时的那个购物清单,
				在HTML也可以创建列表,在网页中一共有三种列表:
					1.无序列表
					2.有序列表
					3.定义列表
		-->
		
		<!--
			无序列表
				- 使用ul标签来创建一个无序列表
				- 使用li在ul中创建一个一个的列表项,
					一个li就是一个列表项
					
			通过type属性可以修改无序列表的项目符号
				可选值:
					disc,默认值,实心的圆点
					square,实心的方块
					circle,空心的圆
					
			注意:默认的项目符号我们一般都不使用!!
				如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置
				
			ul和li都是块元素	
		-->
		<ul>
			<li>西门大官人</li>
			<li>柴大官人</li>
			<li>许大官人</li>
			<li>唐僧大官人</li>
		</ul>
		
		<!-- 
			有序列表和无序列表类似,只不过它使用ol来代替ul
			有序列表使用有序的序号作为项目符号
			type属性,可以指定序号的类型
				可选值:1,默认值,使用阿拉伯数字
						a/A 采用小写或大写字母作为序号
						i/I 采用小写或大写的罗马数字作为序号
						
			ol也是块元素			
		-->
		<ol type="I">
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ol>
		
		<!-- 
			列表之间都是可以互相嵌套,可以在无序列表中放个有序列表
				也可以在有序列表中放一个无序列表
		-->
		
		<p>菜谱</p>
		<ul>
			<li>
				鱼香肉丝
				<ol>
					<li>鱼</li>
					<li>香</li>
					<li>肉丝</li>
				</ol>
			</li>
			<li>
				宫保鸡丁
				<ul>
					<li>宫保</li>
					<li>鸡丁</li>
				</ul>
			</li>
			<li>青椒肉丝</li>
		</ul>
		
	</body>
</html>

30.定义列表

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<!--
			定义列表用来对一些词汇或内容进行定义
			使用dl来创建一个定义列表
				dl中有两个子标签
					dt : 被定义的内容
					dd : 对定义内容的描述
			同样dl和ul和ol之间都可以互相嵌套		
		-->
		<dl>
			<dt>武松</dt>
			<dd>景阳冈打虎英雄,战斗力99</dd>
			<dd>后打死西门庆,投奔梁山</dd>
			<dt>武大</dt>
			<dd>著名餐饮企业家,战斗力0</dd>
		</dl>
	</body>
</html>

31.长度单位

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 长度单位
			 * 		像素 px
			 * 			- 像素是我们在网页中使用的最多的一个单位,
			 * 				一个像素就相当于我们屏幕中的一个小点,
			 * 				我们的屏幕实际上就是由这些像素点构成的
			 * 				但是这些像素点,是不能直接看见。
			 * 			- 不同显示器一个像素的大小也不相同,
			 * 				显示效果越好越清晰,像素就越小,反之像素越大。
			 * 
			 * 		百分比 %
			 * 			- 也可以将单位设置为一个百分比的形式,
			 * 				这样浏览器将会根据其父元素的样式来计算该值
			 * 			- 使用百分比的好处是,当父元素的属性值发生变化时,
			 * 				子元素也会按照比例发生改变
			 * 			- 在我们创建一个自适应的页面时,经常使用百分比作为单位
			 * 
			 * 		em
			 * 			- em和百分比类似,它是相对于当前元素的字体大小来计算的
			 * 			- 1em = 1font-size
			 * 			- 使用em时,当字体大小发生改变时,em也会随之改变
			 * 			- 当设置字体相关的样式时,经常会使用em
			 * 			
			 */
			.box{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			
			.box1{
				font-size: 20px;
				width: 2em;
				height: 50%;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box">
			
			<div class="box1"></div>
			
		</div>
		
	</body>
</html>

32.十六进制RGB

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				
				/*
				 * 颜色单位:
				 * 	 在CSS可以直接使用颜色的单词来表示不同的颜色
				 * 		红色:red
				 * 		蓝色:blue
				 * 		绿色:green	
				 *   也可以使用RGB值来表示不同的颜色
				 * 		- 所谓的RGB值指的是通过Red Green Blue三元色,
				 * 			通过这三种颜色的不同的浓度,来表示出不同的颜色
				 * 		- 例子:rgb(红色的浓度,绿色的浓度,蓝色的浓度);
				 * 			- 颜色的浓度需要一个0-255之间的值,255表示最大,0表示没有
				 * 			- 浓度也可以采用一个百分数来设置,需要一个0% - 100%之间的数字
				 * 				使用百分数最终也会转换为0-255之间的数
				 * 				0%表示0
				 * 				100%表示255
				 *   也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样,
				 * 		只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色
				 * 		每组表示一个颜色	,第一组表示红色的浓度,范围00-ff
				 * 					第二组表示绿色的浓度,范围是00-ff
				 * 					第三组表示蓝色的浓度,范围00-ff
				 * 		语法:#红色绿色蓝色
				 * 		十六进制:
				 * 		0 1 2 3 4 5 6 7 8 9 a b c d e f
				 * 		00 - ff
				 * 		00表示没有,相当于rgb中的0
				 * 		ff表示最大,相当于rgb中255
				 * 		红色:
				 * 			#ff0000
				 * 		像这种两位两位重复的颜色,可以简写
				 * 			比如:#ff0000 可以写成 #f00
				 * 			#abc  #aabbcc		
				 * 			
				 */
				/*background-color: rgb(161,187,215);*/
				
				/*background-color: rgb(100%,50%,50%);*/
				
				/*background-color: #00f;*/
				
				/*background-color: #abc;*/ /*#aabbcc*/
				
				background-color: #084098;
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

33.字体样式

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.p1{
				/*设置字体颜色,使用color来设置文字的颜色*/
				color: red;
				/*
				 * 设置文字的大小,浏览器中一般默认的文字大小都是16px
				 	font-size设置的并不是文字本身的大小,
				 		在页面中,每个文字都是处在一个看不见的框中的
				 		我们设置的font-size实际上是设置格的高度,并不是字体的大小
				 		一般情况下文字都要比这个格要小一些,也有时会比格大,
				 		根据字体的不同,显示效果也不能	
				 * */
				font-size: 30px;
				
				/*
				 * 通过font-family可以指定文字的字体
				 * 	当采用某种字体时,如果浏览器支持则使用该字体,
				 * 		如果字体不支持,则使用默认字体
				 * 该样式可以同时指定多个字体,多个字体之间使用,分开
				 * 	当采用多个字体时,浏览器会优先使用前边的字体,
				 * 		如果前边没有在尝试下一个
				 */
				/*font-family: arial , 微软雅黑;*/
				
				/*
				 * 浏览器使用的字体默认就是计算机中的字体,
				 * 	如果计算机中有,则使用,如果没有就不用
				 * 
				 * 在开发中,如果字体太奇怪,用的太少了,尽量不要使用,
				 * 	有可能用户的电脑没有,就不能达到想要的效果。
				 */
				/*font-family: 华文彩云 , arial , 微软雅黑;*/
				
				font-family: "curlz mt";
				
			}
			
		</style>
	</head>
	<body>
		
		<p class="p1">
			我是一个p标签,ABCDEFGabcdefg
		</p>
		
	</body>
</html>

34.RGB值

 

35.字体分类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				font-family: arial , 微软雅黑 , 华文彩云 , serif;
			}
		</style>
	</head>
	<body>
		<!-- 
			在网页中将字体分成5大类:
				serif(衬线字体)
				sans-serif(非衬线字体)
				monospace (等宽字体)
				cursive (草书字体)
				fantasy (虚幻字体)
			可以将字体设置为这些大的分类,当设置为大的分类以后,
				浏览器会自动选择指定的字体并应用样式
			一般会将字体的大分类,指定为font-family中的最后一个字体	
		-->
		<p style="font-size: 50px; font-family: serif;">衬线字体:我是一段文字,ABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: sans-serif;">非衬线字体:我是一段文字,ABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: monospace;">等宽字体:我是一段文字,IHABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: cursive;">草书字体:我是一段文字,ABCDEFGabcdefg</p>
		<p style="font-size: 50px; font-family: fantasy;">虚幻字体:我是一段文字,ABCDEFGabcdefg</p>
	</body>
</html>

 

36.字体其他样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.p1{
				color: red;
				font-size: 30px;
				font-family: "微软雅黑";
				/*
				 * font-style可以用来设置文字的斜体
				 * 	- 可选值:
				 * 		normal,默认值,文字正常显示
				 * 		italic 文字会以斜体显示
				 * 		oblique 文字会以倾斜的效果显示
				 * 	- 大部分浏览器都不会对倾斜和斜体做区分,
				 * 		也就是说我们设置italic和oblique它们的效果往往是一样的
				 *  - 一般我们只会使用italic
				 */
				font-style: italic;
				
				/*
				 * font-weight可以用来设置文本的加粗效果:
				 * 		可选值:
				 * 			normal,默认值,文字正常显示
				 * 			bold,文字加粗显示
				 * 
				 * 	该样式也可以指定100-900之间的9个值,
				 * 		但是由于用户的计算机往往没有这么多级别的字体,所以达到我们想要的效果
				 * 		也就是200有可能比100粗,300有可能比200粗,但是也可能是一样的
				 */
				font-weight: bold;
				
				/*
				 * font-variant可以用来设置小型大写字母
				 * 		可选值:
				 * 			normal,默认值,文字正常显示
				 * 			small-caps 文本以小型大写字母显示
				 * 
				 * 小型大写字母:
				 * 		将所有的字母都以大写形式显示,但是小写字母的大写,
				 * 			要比大写字母的大小小一些。
				 */
				font-variant: small-caps ;
			}
			
			.p2{
				/*设置一个文字大小*/
				font-size: 50px;
				/*设置一个字体*/
				font-family: 华文彩云;
				/*设置文字斜体*/
				font-style: italic;
				/*设置文字的加粗*/
				font-weight: bold;
				/*设置一个小型大写字母*/
				font-variant: small-caps;
			}
			
			.p3{
				/*
				 * 在CSS中还为我们提供了一个样式叫font,
				 * 	使用该样式可以同时设置字体相关的所有样式,
				 * 	可以将字体的样式的值,统一写在font样式中,不同的值之间使用空格隔开
				 * 
				 * 使用font设置字体样式时,斜体 加粗 小大字母,没有顺序要求,甚至可写可不写,
				 * 	如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式
				 * 	大小必须是倒数第二个样式
				 * 
				 * 实际上使用简写属性也会有一个比较好的性能
				 */
				font: small-caps bold italic 60px "微软雅黑";
			}
			
			
		</style>
	</head>
	<body>
		
		<p class="p3">我是一段文字,ABCDEFGabcdefg</p>
		
		<p class="p1">我是一段文字,ABCDEFGabcdefg</p>
		
		<p class="p2">我是一段文字,ABCDEFGabcdefg</p>
	</body>
</html>

 

37.行间距

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 在CSS并没有为我们提供一个直接设置行间距的方式,
			 * 	我们只能通过设置行高来间接的设置行间距,行高越大行间距越大
			 * 使用line-height来设置行高 
			 * 	行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,
			 * 	网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示
			 * 
			 * 行间距 = 行高 - 字体大小
			 */
			.p1{
				font-size: 20px;
				
				/*
				 * 通过设置line-height可以间接的设置行高,
				 * 	可以接收的值:
				 * 		1.直接就收一个大小
				 * 		2.可以指定一个百分数,则会相对于字体去计算行高
				 * 		3.可以直接传一个数值,则行高会设置字体大小相应的倍数
				 */
				/*line-height: 200%;*/
				
				line-height: 2;
			}
			
			.box{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/*
				 * 对于单行文本来说,可以将行高设置为和父元素的高度一致,
				 * 	这样可以是单行文本在父元素中垂直居中
				 */
				line-height: 200px;
			}
			
			.p2{
				
				
				/*
				 * 在font中也可以指定行高
				 * 	在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
				 */
				font: 30px "微软雅黑";
				line-height: 50px;
			}
			
		</style>
	</head>

	<body>
		
		<p class="p2">
			在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
		</p>
		
		<div class="box">
			
			<a href="#">我是一个超链接</a>
			
		</div>
		

		<p class="p1">
			在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
		</p>

	</body>

</html>

 

38.文本样式

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.p1 {
				/*
				 * text-transform可以用来设置文本的大小写
				 * 	可选值:
				 * 		none 默认值,该怎么显示就怎么显示,不做任何处理
				 * 		capitalize 单词的首字母大写,通过空格来识别单词
				 * 		uppercase 所有的字母都大写
				 * 		lowercase 所有的字母都小写
				 */
				text-transform: lowercase;
			}
			
			.p2 {
				/*
				 * text-decoration可以用来设置文本的修饰
				 * 		可选值:
				 * 			none:默认值,不添加任何修饰,正常显示
				 * 			underline 为文本添加下划线
				 * 			overline 为文本添加上划线
				 * 			line-through 为文本添加删除线
				 */
				text-decoration: line-through;
			}
			
			a {
				/*超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline
				 	如果需要去除超链接的下划线则需要将该样式设置为none
				 * */
				text-decoration: none;
			}
			
			.p3 {
				/**
				 * letter-spacing可以指定字符间距
				 */
				/*letter-spacing: 10px;*/
				
				/*
				 * word-spacing可以设置单词之间的距离
				 * 	实际上就是设置词与词之间空格的大小
				 */
				word-spacing: 120px;
			}
			
			
			.p4{
				/*
				 * text-align用于设置文本的对齐方式
				 * 	可选值:
				 * 		left 默认值,文本靠左对齐
				 * 		right , 文本靠右对齐
				 * 		center , 文本居中对齐
				 * 		justify , 两端对齐
				 * 				- 通过调整文本之间的空格的大小,来达到一个两端对齐的目的
				 */
				text-align: justify ;
			}
			
			.p5{
				
				font-size: 20px;
				
				/*
				 * text-indent用来设置首行缩进
				 * 	当给它指定一个正值时,会自动向右侧缩进指定的像素
				 * 	如果为它指定一个负值,则会向左移动指定的像素,
				 * 		通过这种方式可以将一些不想显示的文字隐藏起来
				 *  这个值一般都会使用em作为单位
				 */
				text-indent: -99999px;
			}
			
		</style>
	</head>

	<body>
		
		<p class="p5">
			在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
		</p>
		
		<h1 class="p4">我是一个h1</h1>
		
		<p class="p4">
			在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
		</p>

		<p class="p4">
			“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
		</p>

		<p class="p3">
			在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
		</p>

		<p class="p3">
			“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
		</p>

		<a href="#">我是超链接</a>

		<p class="p2">
			“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
		</p>

		<p class="p1">
			“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
		</p>
	</body>

</html>

 

39.盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				/*
				 * 使用width来设置盒子内容区的宽度
				 * 使用height来设置盒子内容区的高度
				 * 
				 * width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,
				 * 	盒子可见框的大小由内容区,内边距和边框共同决定
				 */
				width: 300px;
				height: 300px;
				
				/*设置背景颜色*/
				background-color: #bfa;
				
				/*
				 * 为元素设置边框
				 * 	要为一个元素设置边框必须指定三个样式
				 * 		border-width:边框的宽度
				 * 		border-color:边框颜色
				 * 		border-style:边框的样式
				 */
				
				/*
				 * 设置边框的宽度
				 */
				/*border-width:10px ;*/
				
				/*
				 	使用border-width可以分别指定四个边框的宽度
				 	如果在border-width指定了四个值,
				 		则四个值会分别设置给 上 右 下 左,按照顺时针的方向设置的
				 		
				 	如果指定三个值,
				 		则三个值会分别设置给	上  左右 下
				 		
				 	如果指定两个值,
				 		则两个值会分别设置给 上下 左右	
				 		
				 	如果指定一个值,则四边全都是该值	
				 	
				 	除了border-width,CSS中还提供了四个border-xxx-width
				 		xxx的值可能是top right bottom left
				 	专门用来设置指定边的宽度	
				 * */
				/*border-width:10px 20px 30px 40px ;*/
				/*border-width:10px 20px 30px ;*/
				/*border-width: 10px 20px ;*/
				border-width: 10px;
				
				/*border-left-width:100px ;*/
				
				
				/*
				 * 设置边框的颜色
				 * 和宽度一样,color也提供四个方向的样式,可以分别指定颜色
				 * border-xxx-color
				 */
				border-color: red;
				/*border-color: red yellow orange blue;*/
				/*border-color: red yellow orange;*/
				/*border-color: red yellow;*/
				
				/*
				 * 设置边框的样式
				 * 	可选值:
				 * 		none,默认值,没有边框
				 * 		solid 实线
				 * 		dotted 点状边框
				 * 		dashed 虚线
				 * 		double 双线
				 * 
				 * style也可以分别指定四个边的边框样式,规则和width一致,
				 * 	同时它也提供border-xxx-style四个样式,来分别设置四个边
				 */
				/*border-style: double;*/
				border-style: solid dotted dashed double; 
			}
			
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

 

40.边框,边框简写属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			.box{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				
				/*设置边框
				 	大部分的浏览器中,边框的宽度和颜色都是有默认值,而边框的样式默认值都是none
				 * */
				/*border-width:10px ;
				border-color: red;
				border-style: solid;*/
				
				/*
				 * border
				 * 	- 边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色
				 * 	- 而且没有任何的顺序要求
				 * 	- border一指定就是同时指定四个边不能分别指定
				 * 
				 * border-top border-right border-bottom border-left
				 * 	可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效
				 */
				/*border: red solid 10px   ;*/
				/*border-left: red solid 10px   ;*/
				
				/*border-top: red solid 10px;
				border-bottom: red solid 10px;
				border-left: red solid 10px;*/
				
				border: red solid 10px;
				border-right: none;
				
			}
			
		</style>
	</head>
	<body>
		
		<div class="box"></div>
		
	</body>
</html>

 

41.内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/*设置边框*/
				border: 10px red solid;
				
				/*
				 * 内边距(padding),指的是盒子的内容区与盒子边框之间的距离
				 * 	一共有四个方向的内边距,可以通过:
				 * 		padding-top
				 * 		padding-right
				 * 		padding-bottom
				 * 		padding-left
				 * 			来设置四个方向的内边距
				 * 
				 * 内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,
				 * 	盒子的大小由内容区、内边距和边框共同决定
				 * 	盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
				 *  可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
				 */
				
				/*设置上内边距*/
				/*padding-top: 100px;*/
				/*设置右内边距*/
				/*padding-right: 100px;
				padding-bottom: 100px;
				padding-left: 100px;*/
				
				/*
				 * 使用padding可以同时设置四个边框的样式,规则和border-width一致
				 */
				/*padding: 100px;*/
				
				/*padding: 100px 200px;*/
				
				/*padding: 100px 200px 300px;*/
				
				padding: 100px 200px 300px 400px;
			}
			
			/*
			 * 创建一个子元素box1占满box2
			 */
			.box2{
				width: 100%;
				height: 100%;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		
		<div class="box1">
			<div class="box2"></div>
		</div>
		
	</body>
</html>

 

42.外边距,垂直外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px solid red;
				/*
				 * 外边距指的是当前盒子与其他盒子之间的距离,
				 * 	他不会影响可见框的大小,而是会影响到盒子的位置。
				 * 盒子有四个方向的外边距:
				 * 	margin-top
				 * 	margin-right
				 * 	margin-bottom
				 * 	margin-left
				 * 
				 * 由于页面中的元素都是靠左靠上摆放的,
				 * 	所以注意当我们设置上和左外边距时,会导致盒子自身的位置发生改变,
				 * 	而如果是设置右和下外边距会改变其他盒子的位置
				 */
				/*
				 * 设置box1的上外边距,盒子上边框和其他的盒子的距离
				 */
				/*margin-top: 100px;*/
				
				/*
				 * 左外边距
				 */
				/*margin-left: 100px;*/
				
				/*设置右和下外边距*/
				/*margin-right: 100px;
				margin-bottom: 100px;*/
				
				/*
				 * 外边距也可以指定为一个负值,
				 * 	如果外边距设置的是负值,则元素会向反方向移动
				 */
				/*margin-left: -150px;
				margin-top: -100px;
				margin-bottom: -100px;*/
				/*margin-bottom: -100px;*/
				
				/*
				 * margin还可以设置为auto,auto一般只设置给水平方向的margin
				 * 	如果只指定,左外边距或右外边距的margin为auto则会将外边距设置为最大值
				 * 	垂直方向外边距如果设置为auto,则外边距默认就是0
				 * 
				 * 如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值,
				 * 	就可以使元素自动在父元素中居中,所以我们经常将左右外边距设置为auto
				 * 	以使子元素在父元素中水平居中
				 * 
				 */
				
				/*margin-left: auto;
				margin-right: auto;*/
				
				/*
				 * 外边距同样可以使用简写属性 margin,可以同时设置四个方向的外边距,
				 * 	规则和padding一样
				 */
				margin: 0 auto;
				
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px solid red;
				/*
				 * 外边距指的是当前盒子与其他盒子之间的距离,
				 * 	他不会影响可见框的大小,而是会影响到盒子的位置。
				 * 盒子有四个方向的外边距:
				 * 	margin-top
				 * 	margin-right
				 * 	margin-bottom
				 * 	margin-left
				 * 
				 * 由于页面中的元素都是靠左靠上摆放的,
				 * 	所以注意当我们设置上和左外边距时,会导致盒子自身的位置发生改变,
				 * 	而如果是设置右和下外边距会改变其他盒子的位置
				 */
				/*
				 * 设置box1的上外边距,盒子上边框和其他的盒子的距离
				 */
				/*margin-top: 100px;*/
				
				/*
				 * 左外边距
				 */
				/*margin-left: 100px;*/
				
				/*设置右和下外边距*/
				/*margin-right: 100px;
				margin-bottom: 100px;*/
				
				/*
				 * 外边距也可以指定为一个负值,
				 * 	如果外边距设置的是负值,则元素会向反方向移动
				 */
				/*margin-left: -150px;
				margin-top: -100px;
				margin-bottom: -100px;*/
				/*margin-bottom: -100px;*/
				
				/*
				 * margin还可以设置为auto,auto一般只设置给水平方向的margin
				 * 	如果只指定,左外边距或右外边距的margin为auto则会将外边距设置为最大值
				 * 	垂直方向外边距如果设置为auto,则外边距默认就是0
				 * 
				 * 如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值,
				 * 	就可以使元素自动在父元素中居中,所以我们经常将左右外边距设置为auto
				 * 	以使子元素在父元素中水平居中
				 * 
				 */
				
				/*margin-left: auto;
				margin-right: auto;*/
				
				/*
				 * 外边距同样可以使用简写属性 margin,可以同时设置四个方向的外边距,
				 * 	规则和padding一样
				 */
				margin: 0 auto;
				
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

43.浏览器默认样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,
			 * 	所以为很多的元素都设置了一些默认的margin和padding,
			 * 	而它的这些默认样式,正常情况下我们是不需要使用的。
			 * 
			 * 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
			 * 	
			 */
			
			/*
			 * 清除浏览器的默认样式
			 */
			
			*{
				margin: 0;
				padding: 0;
			}
		
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: #bfa;
			}
			
			p{
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		
		<p>我是一个段落</p>
		<p>我是一个段落</p>
		<p>我是一个段落</p>
		
		<ul>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>
	</body>
</html>

 

44.内联元素的盒子

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			span{
				background-color: #bfa;
			}
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.s1{
				/*
				 	内容区、内边距 、边框 、外边距
				 * */
				
				/*
				 * 内联元素不能设置width和height
				 */
				/*width: 200px;
				height: 200px;*/
				
				/*
				 * 设置水平内边距,内联元素可以设置水平方向的内边距
				 */
				padding-left: 100px ;
				padding-right: 100px ;
				
				/*
				 * 垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局
				 */
				/*padding-top: 50px;
				padding-bottom: 50px;*/
				
				/*
				 * 为元素设置边框,
				 * 	内联元素可以设置边框,但是垂直的边框不会影响到页面的布局
				 */
				border: 1px blue solid;
				
				/*
				 * 水平外边距
				 * 	内联元素支持水平方向的外边距
				 */
				margin-left:100px ;
				margin-right: 100px;
				
				/*
				 * 内联元素不支持垂直外边距
				 */
				/*margin-top: 200px;
				margin-bottom: 200px;*/
				
			}
			
			.s2{
				/*
				 * 为右边的元素设置一个左外边距
				 * 水平方向的相邻外边距不会重叠,而是求和
				 */
				margin-left: 100px;
			}
			
			
		</style>
	</head>
	<body>
		<span class="s1">我是一个span</span>
		<span class="s2">我是一个span</span>
		<span>我是一个span</span>
		<span>我是一个span</span>
		
		<div class="box1"></div>
	</body>
</html>

 

  • 10
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值