css 标签分类以及模式转换

原创 2016年08月28日 23:32:28
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			问题 :	1 标题标标签中的文字不能直接使用父元素中的文字大小 ???? 发现可以
					2 标签集成问题
		-->
		<style type="text/css">
		/**
		 * 
		 * html标签分类:块级元素  行内元素  行内块元素
		 * 
		 * html元素之间的模式转换 :块级元素  行内元素   行内块元素
		 * 
		 * css特性:
		 * 		1 层叠行:  当同一个标签(权重一样)的样式发生冲突的时候,最后定义的样式会将前面定义的样式覆盖掉(层叠性)。与样式定义的顺序有关,和样式调用的顺序无关
		 * 		2 继承性:标签之间的关系属于嵌套关系   可以被继承的属性:有关文字的相关属性都可以被集成  如 颜色 大小 行高 字体
		 * 			注意:1 a标签不能直接使用父元素中的文字颜色。
		 *				2  标题标签不能直接使用父元素中的文字大小。
		 * 
		 * 伪类 :用来向选择器定义样式或添加特定的效果.常用的伪类还有focus nth-child等
		 * 		1 a:link {属性: 值;}   设置a标签默认样式
		 * 		2 a:visited {属性: 值;}   链接访问过后的样式
		 * 		3 a:hover {属性: 值;}   鼠标移动到超链接上的样式
		 * 		4 a:active {属性: 值;}   链接激活状态下的样式
		 * 		5 a:focus{属性: 值;}     获取光标焦点的样式
		 * 		注意:link  :visited  :hover :active(L oVe   H A te顺序)爱 与 恨
		 * 
		 * 背景img/img4
		 */
		
		/**
		 *	 块级元素
		 * 	代表: div,h1,p,ul ,li...
		 * 	特点:
		 *		1 元素自己独占一行显示(块级元素有默认宽度)
		 *		2 可以设置宽度和高度
		 *		3 当两个块级元素发生嵌套关系的时候,子元素如果没有设置宽度,那么该子元素的宽度与父元素的宽度一致。
		 * /	
		
		/**
		 *	行内元素
		 * 	代表:  span,a ,  strong, b ,i,s,font...
		 * 	特点:
		 * 		1 所有元素都在一行上显示
		 * 		2 行内元素不能直接设置宽度和高度
		 * /
		
		/**
		 * 行内块元素
		 * 代表:  <img>  ,input....
		 * 特点: 
		 * 		1 所有元素都在一行上显示
		 * 		2 可以设置宽度和高度。
		 */
		#jicheng{ 
			 font-size:12px; 
			 width:100px; 
			 height:40px; 
			 line-height:40px;
			 background-color: #98FB98;
		}
		
		#aa{
			color: red;
			background-color: #98FB98;
			/*display: inline-block;*/  /* 转化为  行*/
			display: inline;  /* 转化为  行*/
			
			display: block; /* 转化为 块*/
		}
		
		.one{
			color: red;
			font-size: 20px;
		}
		.two{
			color:green;
			font-size: 60px;
		}
		
		a:link {  /* 设置a标签默认样式*/
			color:red;
			text-decoration: none; /*去掉下划线*/
		}
		a:visited{	/* 链接访问过后的样式 */
			color:darkgoldenrod;
		}
		a:hover{	/* 鼠标移动到超链接上的样式 */
			color: #008000;
			text-decoration: underline;
		}
		a:active{	/* 链接激活状态下的样式 */
			color:aquamarine;
		}
		
		.beijingtupian{
			width: 400px;
			height: 400px;
			background-color: green; 
			background-image: url("../img/55e02a1e50729.jpg");
			background-repeat: no-repeat;
			/*	设置背景img/img4平铺方式
			 *  	repeat:  默认平铺
			 * 		no-repeat:  不平铺
			 * 		repeat-x: 横向平铺
			 * 		repeat-y:   纵向平铺
			 */
			background-position: 20px 40px;
			/*	设置背景img/img4的位置 (水平 垂直)
			 * 		如果设置的位置是方位名词,顺序可以调换
			 * 		如果只设置一个方位名词,另一个默认值为center
			 * 		如果设置的是具体数字,那么第一个代表水平方向。第二个代表垂直方向
			 * 		如果设置的位置中有一个是具体数字,那么第一个值代表水平方向,第二个代表垂直方向。
			 *  	20px 40px,left 20px,left top,
			 */
			background-attachment: scroll;
			/*	设置背景img/img4固定方式
			 * 		Scroll 滑动;
			 * 		Fixed: 固定;	
			 */
		}
		
		.lianxie{
				width:400px;
				height:400px;
				background: red url("../img/55e02a1e50729.jpg") no-repeat 10px 10px fixed;
		}
		
		ul{
			list-style: none; /* 去除列表前面的图标*/
		}
		
		ol{
			list-style: none; /* 去除列表前面的图标*/
		}
		
		#aabb{
			height: 100px;
			width: 100px;
			background-color: red;
			display: inline;
		}
		#aabbb{
			height: 100px;
			width: 100px;
			background-color: red;
			display: inline;
		}
		
		#a{
			color: red;
			font-size: 10px;
			font-family: 楷体;
			line-height: 50px;
		}
		#b{
			
		}
		</style>
	</head>
	<body>
		<div id="a">
			啊实打实大111111
					<a id="b" href="#">asdasds</a>
					<h1>啊实打实大</h1>
		</div>
		
		<br /><br /><br /><br />
		<span id="aa">啊实打实大</span>
		<span id="aa">啊实打实大</span>
		
		<p id="jicheng">啊实打实大</p>
		
		<p class="two">
			<h1>子类标题标签</h1>
			<a>啊</a>
			<p>阿萨德</p>
		</p>
		
		<a href="#">我要来设置伪类了!!!</a><br /><br /><br /><br />
		
		<div class="beijingtupian">啊实打实大</div><br /><br /><br /><br />
		
		<div class="lianxie">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
		
		<ul >
			<li>asdasd</li>
			<li>asdasd</li>
			<li>asdasd</li>
		</ul>
		
		<ol >
			<li>asdasd</li>
			<li>asdasd</li>
			<li>asdasd</li>
		</ol>
		<div id="aabb">
			asdasd
		</div>
		
		<div id="aabbb">
			asdasd
		</div>
	</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

(实模式+保护模式)模式切换的过程步骤(代码+文字解析)

【0】写在前面文末的个人总结是干货,前面代码仅供参考的,且source code from orange’s implemention of a os. ; ================...
  • PacosonSWJTU
  • PacosonSWJTU
  • 2015年08月26日 20:03
  • 1532

ARM处理器模式介绍和模式切换

ARM体系结构支持7种处理器模式: 用户模式:正常程序工作模式,不能直接切换到其它模式。 快中断模式:支持高速数据传输及通道处理。FIR异常响应时,进入此模式 中断模式:通用中断处理。IRQ异常...
  • maochengtao
  • maochengtao
  • 2014年09月29日 14:59
  • 1259

Linux下如何从普通用户切换到root用户

1.首先,我们输入pwd命令,查看当前用户目录: 当前用户是xg其中我解释一下[xg@localhost ~]$ 这个的含义,其中xg指的是当前的用户,localhost指的是本机服务,~指的是当前...
  • u012561176
  • u012561176
  • 2015年03月13日 21:33
  • 23257

Thumb、ARM指令 状态切换

与ARM指令集相比较,Thumb指令集中的数据处理指令的操作数仍然是32位,指令地址也为32位,但Thumb指令集为实现16位的指令长度,舍弃了ARM指令集的一些特性,如大多数的Thumb指令是无条件...
  • wuhuan_001
  • wuhuan_001
  • 2013年12月31日 21:41
  • 1088

Linux字符界面切换到图形界面

由字符界面切换到图形界面可用两种简单方法实现:  1、在字符界面输入startx或init 5 。  2、通过编辑/etc/inittab文件实现默认进入图形界面。  把其中的id:3:init...
  • educast
  • educast
  • 2014年04月16日 10:37
  • 948

为什么我们要切换到Linux?我要怎样切换到Linux?

It’stime for changing. 当你在选购电脑的时候,你可能会在Windows和macOS之间犹豫,但是可能基本不会想到 Linux。尽管如此,这个名气没那么大的操作系统仍然拥有庞大而...
  • EHome_BurNing
  • EHome_BurNing
  • 2017年11月10日 16:03
  • 80

从svn切换到git上的使用总结

git的基础知识和命令使用总结 一、git的工作区 1.工作目录(workspace):就是我们在开发工具编写代码的地方 2.暂存区(staging) 3.本地仓库(Local repos...
  • txw910
  • txw910
  • 2017年01月08日 22:05
  • 994

IIS 应用程序池 经典模式 转 集成模式 解决方案

IIS7.0中的Web应用程序有两种配置形式:经典形式和集成形式。 经典形式是为了与之前的版本兼容,运用ISAPI扩展来调用ASP.NET运转库,原先运转于IIS6.0下的Web应用程序迁移到IIS...
  • liyb5619
  • liyb5619
  • 2015年05月05日 10:52
  • 1965

PX4 如何切换到offboard 模式

最近研究px4的offboard模式,如何切换到offboard模式一筹莫展,便跟踪源代码至commander module。 一、 handle_command函数   从dronekit发送设定o...
  • xiaochengyexiao
  • xiaochengyexiao
  • 2017年04月23日 22:06
  • 397

ubuntu命令行模式与图形桌面切换方法

ubuntu命令行模式与图形桌面切换方法
  • yanlaifan
  • yanlaifan
  • 2016年12月28日 12:09
  • 8125
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 标签分类以及模式转换
举报原因:
原因补充:

(最多只允许输入30个字)