<!--大小-->

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. seajs 使用 jquery插件
			
    define(function(require,exports,moudles){ return function(jquery){ (function($) { $.fn.pri= function ...
    
			
    2. 
						
  2. RPI学习--webcam_用fswebcam抓取图片
			
    若 ls /dev 下没有video0,可以参考http://www.cnblogs.com/skynext/p/3644873.html,更新firmware 1,安装fswebcam: sudo  ...
    
			
    3. 
						
  3. checkbox的全选、反选（计算价格）
			
    package com.baidu.jisuan; import java.util.ArrayList;import java.util.List; import com.baidu.adapter ...
    
			
    4. 
						
  4. NABCD分析
			
    NABCD——今日事 N(Need):开创的成就系统可以在一定程度上督促用户坚持下来. A(Approach):做一个APP软件,是在android平台构建. B(Benefit):可以逐步改变用户的 ...
    
			
    5. 
						
  5. Ubuntu 14.10 下sort,uniq,cut,wc命令详解
			
    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法  ...
    
			
    6. 
						
  6. C/C++ 字符串 null terminal
			
    在C/C++中,字符串以'\0'结尾是一种强制要求,或者说,只有满足这个要求的 字符数组才能被称为字符串.否则,你所做的所有操作结果都是未定义的! C标准库string.h中所有关于字符串的函数都有一 ...
    
			
    7. 
						
  7. VS2013  JS  跟踪
			
    VS2013JS  跟踪 1.在页面对应的cs文件中设置断点,F10单步执行. 2.单步执行调试会自然而然执行到JS里面.
    
			
    8. 
						
  8. C语言数据类型在IA32中的大小
			
    这个主要是一些常识问题,以及在使用AT&T语法汇编时会使用的编码后缀: C声明 Intel数据类型 汇编后缀 大小(byte) char 字节  b  1 short 字  w  2 int  ...
    
			
    9. 
						
  9. Unix command 积累
			
    UNIX is a multi-user multitasking-optimized operating system that can run on various hardware platfo ...
    
			
    10. 
						
  10. ASP.NET之Ajax系列（三）
			
    我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来 ...
    
			
    11.