样式代码

样式代码与属性代码区别   样式代码必须带单位 属性不需要  多个样式代码之间用分号隔开  同一个样式里面 用空格  多个属性之间用空格隔开    举例

1.背景样式

.r

	{

		background-image:url(../../../HTML%20%20%E8%AF%BE%E4%BB%B6/n0.jpg);

		background-size:200px 300px;

		background-color:red;

		background-repeat:no-repeat;  /*  background-repeat:x-repeat;  横向平铺 */

		background-position: left 100px top 100px;   /* 注意  */

	}

2.居中：

1.           <center><div>此标签h5中移除 现在并不重要</div></center>

2.*  /*整体居中*/

	{

		margin:0px auto; padding:0;

		}

　　3.控制字体的样式

.l

		{

			font-family:隶书;/*如果浏览器中有安装的字体种类 可以直接写  也可以选*/

			font-style:italic;/* 倾斜  字体样式*/

			font-size:14px;/*网络正常用 14  其次12  和16  多人一起做项目时先统一*/

			color:red;

			font-weight:bold;

			}


特殊字符 如艺术字 需要做成图片插进去

　　4.text样式

                      .g

			{

				text-align:center;/*水平居中*/

				vertical-align:middle;/*垂直居中；垂直居中时，时在行高的中间，所以经常配合行高一起出现*/

				line-height:80px;

				/* 以上两个样式共同 控制  内容在   行的中间位置*/

				text-decoration:line-through;/*下划线 上划线  和none（取消链接下面的横杠）*/

				text-indent:3px; /*首行缩进（此处首行缩进3像素）  经常和p标签一起用*/

				text-height:90px;/*文本高度*/

			}

5. margin 外边距       padding内边距

#wai{

			width:300px;

			height:300px;

			background-color:#F00;

			}

		#nei{

			float:left;

注意float	        width:190px;

			height:160px;

			background-color:#30F;

			margin:20px 30px 20px 30px;

			padding:40px 0px 0px 10px;

			}

		#li{

			width:100px;

			height:100px;

			background-color:#0F0;

			margin:20px 0px 0px 20px;

<div id="wai">

        	<div id="nei">

            	<div id="li"></div>

            </div>

        </div>


效果图：

边距与边界：  设边距 之后内部的是原来的

Float left；

Margin：10px；《边距》  上下左右都是10像素

Margine: 2px 5px 6px 7px；  外边距   注意 使用空格分隔  不是分号    是实现了左和上起作用 因为默认  在左上角实现  如果在右下角实现效果则  只有 右下实现效果

Padding ：2px 5px 6px 7px； 内边距  相对于 div 内的div  确定    内边距只要加了边距就会默认增加  边距的像素     [修改方法  只需要把原来的图形减去相应的内边距]

-------------------------------------------------------------------------------------------------------------------------------------------------

1.边框border

	.er

	{

		border-bottom:200px red solid;

		border-right:#093 200px solid;

		border-left:#000 200px solid;

		border-top: #C0C 200px solid;

		width:0px;     div的宽度和高度

		height:0px;

		}

</style>

</head>

<body>

<div class="er"></div>


效果图





2.列表方块：




1.list-style: none

2.list-style:circle

3.list-style-image:url

4list-style-position:outside;

5.list-style-position:inside;





3.格式与布局


     position：


      ①position absolute：绝对定位 相对于浏览器  或相对于父级 绝对定位  如果相对于父级的话  那么他的父级也要绝对定位 举例：


position 移动后 原来位置可以再次写入东西   relative 移动后原来位置不能再写东西




		.em

		{

			background-color:#F00;

			width:200px;

			height:200px;

			position:absolute;

			top:100px;

       			left:50px;	
top和left只有和position在一起时才起作用 同样  right  bottom；

		}

</style>

</head>

<body>

<div class="em"></div>


效果图




如果把absolute 换成fixed 则相对于 浏览器定位   不随界面变化而变化  无论滚动条怎么变化   图片相对于屏幕位置不变
如果把  absolute换成relative  则相对于  图片原来位置定位   




4.流


float:left   ;  




		.re

		{

			float:left;

			}

</style>

</head>

<body>

<div class="re">1<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">2<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">3<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">4<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">5<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">6<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">7<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>

<div class="re">8<img src="../../../HTML  课件/n0.jpg" height="100" width="100"></div>


使用后  排列的图片或其他悬浮于 屏幕上方    可以当作 不占位置   在写内容的时候  将会沉在 之前内容的下面
再接着写内容的时候要记着清流 就是写一个div标签<div style="clear:both"> </div>




z-index    （必须同级别才能使用）




#d3{ width:900px; height:300px; background-color:#F00; position:absolute; z-index:2}

#d4{ width:200px; height:200px; background-color:#33F; position:absolute; z-index:3}


都是 position   通过调节z-index 数值大小来调节  覆盖方式




隐藏 和显示


1.display     隐藏  none   显示 block[把空间和内容一起隐藏  后边的内容自动填充过去]




#d6{width:100px; height:100px; background-color:#666; display:block;border-radius:20px;box-shadow:0 0 100px white;}


                                                                          圆角              阴影边    坐标  宽度  颜色




2.display ：inlineblock   


主要用于  span  a  div 标签改变标签边框大小（普通方法没法改）




		#s1{ width:100px; height:100px; background-color:#F00; display:inline-block}

		</style>

    </head>

  	<body>

    <span id="s1">测试文字</span>






3.visiblity  隐藏   hidden[只把内容隐藏 原来空间保留 不能重新写入  不能自动填充]


.overflow    overflow：hidden；超出部分隐藏            overflow：scroll；超出部分设置滚动条；




   #d7{ width:100px; height:100px; overflow:hidden}

    </head>

  	<body>

    <div id="d7">蝴蝶兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点兰的安静喝点啊哈大话大大话艾克大的按时</div>


自动换行 超出部分 隐藏掉








5透明圆角 阴影




 .ert

			{

	background-color:#3F6;

	width:200px;

	height:200px;

圆角     border-radius:20px;

           
阴影边框处  	box-shadow:0 0 200px #000000;

                            0 0表示刚好在图形的下方出现
                           200px 表示阴影粗细
 透明度 	opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)}

		</style>

    </head>

  	<body>

    <div class="ert"></div><br />





　　




.


　　鼠标悬浮






<style type="text/css">

a:link

{

    color:black;

    text-decoration:none;}

a:visited

{

    color:black;

    text-decoration:none;}

a:hover

{

    color:red;

    text-decoration:underline;}

a:active

{

    color:orange;

    text-decoration:underline;}

.a1:link

{

    color:#6F3;

    text-decoration:none;

    }

    .a1:visited

{

    color:#6F3;

    text-decoration:none;

    }

.a1:hover

{

    color:red;

    text-decoration:underline;

    }

.a1:active

{

    color:orange;

    text-decoration:underline;

    }

</style>




鼠标悬浮


　　


　　


　　


　　


　　


 


　　


　　


只有在写了  position时  right left top  bottom 才能单独使用；


流  float


清流  clear box


Z-index 调位置   同一等级下


Display ：none  隐藏  用来隐藏和显示元素   隐藏了位置也随之隐藏


Display：block  显示


Display ：inlineblock   用来调整大小（span元素）


Visiblity：hidden   隐藏了 但是位置保留


Overflow：hidden   超出部分隐藏；


Overflow：scrolly   超出部分  出现滚动条


透明度  opacity


Border-radius   圆角


Box-shadow：0,0，5px，white
												


											
HTML 样式表的更多相关文章
	

    
						
  1. CSS样式表分类
		
    1.内联样式表 <p  style="font-size:11px;">内联样式表</p> 2.内嵌样式表 写在head标签里 <style  typ ...
    
		
    2. 
						
  2. 深度理解CSS样式表，内有彩蛋....
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    3. 
						
  3. CSS样式表
		
    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
    
		
    4. 
						
  4. CSS样式表基础
		
    CSS的样式表其实就是美观页面的,加一些样式. 一.样式表的三种分类: ①内联样式:写在某一个标签里面的样式. 优点:控制精确. 缺点:代码重用性差.(太多了不好写)页面代码乱.(太乱,后期不方便看) ...
    
		
    5. 
						
  5. 深入理解脚本化CSS系列第四篇——脚本化样式表
		
    × 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
    
		
    6. 
						
  6. CSS：CSS样式表及选择器优先级总结
		
    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
    
		
    7. 
						
  7. Qt——浅谈样式表
		
    优秀的程序,不仅要有严密逻辑,而且应该有美观的外表.从软件界面,便可看出你是否用心在做,是否是一个有思想的人. Qt样式表的术语和语法规则和HTML CSS有很多相似之处. 样式规则 Qt中样式规则由 ...
    
		
    8. 
						
  8. 3、CCS样式表
		
    一.CCS样式表的分类(优先级从低到高): 1.浏览器默认样式表 2.外部样式表:在外部创建的.ccs文件中.使用外部样式表可以使样式应用于多个网页.通过这个方法只需改动一个文件就能改变整个网站的外观 ...
    
		
    9. 
						
  9. html嵌入样式表
		
    1.针对文件中的字体还有属性进行设置主要设置文字的大小及其颜色问题,未涉及div飘操作 处理页面CSS 先检测该内容部分是否已经设定了样式,如果没有单独设定再按照总体设计进行限定. eg:  h1 h ...
    
		
    10. 
						
  10. css样式表分类、选择器分类、css基础样式
		
    1 . 样式表  Cascading Style Sheet      css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Java五道输出易错题解析（避免小错误）
			
    收集了几个易错的或好玩的Java输出题,分享给大家,以后在编程学习中稍微注意下就OK了. 1. 看不见的空格? 下面的输出会正常吗? package basic; public class Integ ...
    
			
    2. 
						
  2. 预处理prepareStatement是怎么防止sql注入漏洞的？
			
    序,目前在对数据库进行操作之前,使用prepareStatement预编译,然后再根据通配符进行数据填值,是比较常见的做法,好处是提高执行效率,而且保证排除SQL注入漏洞. 一.prepareStat ...
    
			
    3. 
						
  3. jQuery 2.0发布，不再支持IE6/7/8
			
    有时发现jQuery库引用的都对,javascript代码写的也没问题,可是jquery就是出现问题,额--我发现换个jquery库就没问题了,长时间不关注jquery的问题而已: 很多人都没有使用最 ...
    
			
    4. 
						
  4. [译]Profile and debug your ASP.NET MVC app with Glimpse
			
    原文:http://www.asp.net/mvc/overview/performance/profile-and-debug-your-aspnet-mvc-app-with-glimpse Gl ...
    
			
    5. 
						
  5. UI第三节—— UITextField详解
			
    戏言:UITextField对于需要登陆注册的界面的作用还是相当明显,但是对于键盘过的遮挡问题,可是重点哦!这里就涉及到通知(NSNotificationCenter)的内容. //注册事件 [[NS ...
    
			
    6. 
						
  6. Swift实战之2048小游戏
			
    上周在图书馆借了一本Swift语言实战入门,入个门玩一玩^_^正好这本书的后面有一个2048小游戏的实例,笔者跟着实战了一把. 差不多一周的时间,到今天,游戏的基本功能已基本实现,细节我已不打算继续完 ...
    
			
    7. 
						
  7. JS的构造函数
			
    //构造函数  //使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法  //当对象被实例化后,构造函数会立即执行它所包含的任何代码  function myObject(ms ...
    
			
    8. 
						
  8. Javascript高级程序设计——基本包装类型
			
    既然js中的基本类型没有属性和方法那么为什么对字符串进行subString()方法可以呢?基本类型不应该没有方法的吗? 这就是基本包装类型啦! ECMAScript提供了三个特殊的引用类型,Boole ...
    
			
    9. 
						
  9. iOS开发——UI基础-懒加载，plist文件，字典转模型，自定义view
			
    一.懒加载 只有使用到了商品数组才会创建数组 保证数组只会被创建一次 只要能够保证数组在使用时才创建, 并且只会创建一次, 那么我们就称之为懒加载 lazy - (void)viewDidLoad 控 ...
    
			
    10. 
						
  10. BZOJ2780——[Spoj]8093 Sevenk Love Oimaster
			
    0.题意:给定N个原始字符串S,M次查询某个特殊的字符串S'在多少个原始串中出现过. 1.分析:这个题我们第一感觉就是可以用后缀自动机来搞,然后我们发现不是本质不同的字串..求出现过的次数,也就是说多 ...
    
			
    11.