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开始学react netive:1.HTML块级元素_行内元素_CSS盒子模式_标签选择器

React Native优点 1.跨平台 2.高效 3.热更新 因为React Native用到前端的知识,可以去这个网站学习前端知识:http://www.w3school.com.cn网页...

h5学习之5(html中常见标签的分类和标签之间的转换)

html中常见标签的分类和标签之间的转换

【CSS笔记之八】CSS标签语义化、怪异模式和CSS的组织方式

CSS语义化标签需要注意的问题 1.虽然CSS布局中不推荐使用table。但是table布局在二维数据展示方面是最好的选择。table除了table、tr、td标签外,表格标题要用caption...

新闻资讯类系统 ---- 文章分类和标签的设计

零. 简介 博客、 CMS(网易新闻、 腾讯新闻) 之类的系统, 核心就是文章, 一切的一切都围绕着文章进行, 所以设计一个好的文章分类和标签的数据库关系模型, 对后续编码及维护将会起到至关...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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