<!--大小-->

width:宽度

height:高度

<!--背景与前景-->

"background-color:#0F0;   背景颜色

background-image:url(../%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/psb.jpg);  背景图片

background-attachment:fixed; 背景不随字体滚动，是固定的；

background-attachment:scroll; 背景随字体滚动；
background-size:300px 300px;背景图片的大小；
 
background-repeat: no-repeat; 背景图片的平铺；一般为norepeat



背景图片的位置




background-position:center;  居中

background-position:top left  居上居左
background-position:top 200px left 200px;居上200像素 居左200像素




<!--字体-->




style="font-family:微软雅黑;  字体类型

font-size:12px; 字体大小

font-weight: bold; 文字加粗

font-style:italic; 文字倾斜

color:red;  文字颜色

text-decoration:underline; 下划线

text-decoration:overline;上划线

text-decoration:line-through;删除线

text-decoration:none  去掉下划线

text-align:center; text-align:left; text-align:right; 水平居中，水平居左，水平居右
vertical-align:middle; line-height:40px;垂直居中，设置行高，两个一般同时出现

text-indent:20px;首行缩进20px；




超链接的样式：




<style>
#d1{
width:100px; height:30px;
background-color:red; color:#FFF; text-decoration:none}
</style>
</head>

<body>

<a id="d1" href="http://www.baidu.com">百度一下</a>

</body>






按钮效果：




<style>
#anniu{
    width:104px; height:40px; background-color:#0CF;
    color:#FFF; font-size:16px; text-align:center; vertical-align:middle; line-height:40px;}

</style>
</head>

<body>

<div id="anniu">百度一下</div>

</body>






 边距 间距：margin与padding




<style>
/* *{ margin:0px auto; padding:0px}网页都需要写，把每个元素的边距和间距都去掉,auto是把所以网页中的<div>居中。*/
#wai{
    width:300px;
    height:300px;
    background-color:red}
#nei{
    float:left;
    width:200px;
    height:200px;
    background-color:blue;
    margin:10px 20px 30px 40px;/*距wai的边距*/
    padding: 10px 20px 30px 40px;/*距li的边距*/}
#li{
        width:100px;
        height:100px;
        background-color:#FF0}
</style>
</head>

<body>
<div id="wai">
<div id="nei">
<div id="li"></div>
</div>
</div>
</body>






 <!--边界 边框-->




<style>
.bb{ border:1px solid red; width:300px; height:300px}
.aa{
    border-bottom:100px solid #96C;
    border-left:100px solid #C3F;
    border-top:100px solid #FC0;
    border-right:100px solid #00C}

</style>
</head>

<body>
<div class="bb"><div class="aa"></div></div>
</body>






 列表 方块


												


											
html部分---样式属性；的更多相关文章
	

    
						
  1. 原创：新手布局福音！微信小程序使用flex的一些基础样式属性
		
    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
    
		
    2. 
						
  2. 一起学HTML基础-CSS样式表常用样式属性
		
    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
    
		
    3. 
						
  3. 使用jquery修改css中带有!important的样式属性
		
    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
    
		
    4. 
						
  4. HTML_css样式表 样式属性 格式布局
		
    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
    
		
    5. 
						
  5. 纯css3样式属性制作各种图形图标
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    6. 
						
  6. ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)
		
    Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...
    
		
    7. 
						
  7. hack:选择符前缀法，样式属性前缀法
		
    选择符前缀法 <style> *html .test{width:100px;} /*only for IE6*/ *+html .test{width:100px;}/*for IE6  ...
    
		
    8. 
						
  8. 10 GridView 样式属性
		
    GridView 样式属性: 1,android:numColumns="auto_fit" 显示的列数 如果android:numColumns不设置那么自动每行1列 如下图 2 ...
    
		
    9. 
						
  9. js中获取css样式属性值
		
    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
    
		
    10. 
						
  10. 【3-24】css样式表分类、选择器、样式属性
		
    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. $geoNear
			
    怎么使用mongoose的geoNear 2014-11-26 15:05:20|  分类: mongodb |  标签:mongoose  |举报|字号 订阅     下载LOFTER我的照片书   ...
    
			
    2. 
						
  2. appjs desktop
			
    /*   author: daimajia       name: appjs Express example       email: daimajia@gmail.com       any qu ...
    
			
    3. 
						
  3. 【codevs2370】小机房的树 LCA 倍增
			
    2370 小机房的树  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题目描述 Description 小机房有棵焕狗种的树,树上有N个节点,节点标号为0 ...
    
			
    4. 
						
  4. 集成支付宝钱包支付iOS SDK的方法与经验
			
    流程 摘自第一个文档<支付宝钱包支付接口开发包2.0标准版.pdf> 图中的“商户客户端”就是我们的iOS客户端需要做的事情: 调用支付宝支付接口 处理支付宝返回的支付结果 在调用支付宝支 ...
    
			
    5. 
						
  5. 【转发】Linux下清除系统日志方法
			
    摘要:相信大家都是用过Windows的人.对于Windows下饱受诟病的各种垃圾文件都需要自己想办法删除,不然你的系统将会变得越来越大,越来越迟钝!windows怎么清理垃圾相信大家都知道的,那么li ...
    
			
    6. 
						
  6. xlistview的XML（头）xlistview_header
			
    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...
    
			
    7. 
						
  7. iOS多语言备选机制
			
    近期伊书突然接到一些外国用户的投诉,说伊书界面变成了中文,但他们系统语言不是中文,是法文俄文日文等,伊书只支持中文跟英文,在不支持系统所用语言的时候,理应会自动选用英文,不知为什么会选成了中文,经过艰 ...
    
			
    8. 
						
  8. 匹配IP地址的正则表达式 （转）
			
    正则表达式 ^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[ ...
    
			
    9. 
						
  9. Tomcat的目录结构（二）
			
    一.Tomcat的目录结构 bin:启动和关闭Tomcat的bat文件 conf:配置文件 server.xml:配置和server相关的信息,比如:Tomcat启动的端口号,配置Host,配置Con ...
    
			
    10. 
						
  10. c++形参和实参同名时，如何单步执行观察形参的变化。
			
    c++形参和实参同名时,如何单步执行观察形参的变化? 方法:当程序运行到函数中时,添加变量观察即可.
    
			
    11.