常用属性

常用属性

一、背景属性

1、语法格式

background: background-color || background-image || background-repeat || background-attachment || background-position

background是一个复合值属性

2、属性

属性	版本	兼容性	继承性	简介
background	CSS1	IE4+ , NS4+	无	复合属性。设置或检索对象的背景特性
background-attachment	CSS1	IE4+ , NS6+	无	设置或检索背景图像是随对象内容滚动还是固定的
background-color	CSS1	IE4+ , NS4+	无	设置或检索对象的背景颜色
background-image	CSS1	IE4+ , NS4+	无	设置或检索对象的背景图片
background-position	CSS1	IE4+ , NS6+	无	设置或检索对象的背景图像位置
background-positionX	IE专有属性	IE5.5+	无	设置或检索对象的背景图像横坐标位置
background-positionY	IE专有属性	IE5.5+	无	设置或检索对象的背景图像纵坐标位置
background-repeat	CSS1	IE4+ , NS4+	无	设置或检索对象的背景图像是否及如何铺排

3、添加背景颜色

1. 语法格式

   background : transparent | color 
   background-color : transparent | color 
   

2. 参数说明

   可选值	说明
   transparent	背景色透明
   color	指定颜色

   ​

3. 示例代码

   div { background-color: red }
   div { background-color: rgb(223,71,177) } 
   div { background-color: #98AB6F;}
   div { background-color: transparent; }
   

4、添加背景图片

1. 语法格式

   background : none | url (url)
   background-image : none | url (url)
   

2. 参数说明

   可选值	说明
   none	无背景图
   url	使用绝对或相对地址指定背景图像

3. 示例代码

   background-image: url("img/girl.jpg"); 
   background-image: url("http://xxx/xxx.jpg); 
   

   ​

5、背景的平铺

1. 语法格式

   background-repeat : repeat | no-repeat | repeat-x | repeat-y 
   

2. 参数说明

   可选值	说明
   repeat	背景图像在纵向和横向上平铺
   no-repeat	默认,背景图像不平铺
   repeat-x	背景图像在横向上平铺
   repeat-y	背景图像在纵向平铺

3. 示例代码

    div {background-image: url("img/girl.jpg") repeat-y; } 
   

6、背景图片的滚动

1. 语法格式

   background-attachment : scroll | fixed 
   

2. 参数说明

   可选值	说明
   scroll	背景图像是随对象内容滚动
   fixed	背景图像固定

3. 示例代码

    div {background-image: url("img/girl.jpg") no-repeat fixed;  } 
   

7、背景图片的定位

1. 语法格式

   background-position : length || position
   background : url (url) || length || position
   <!--设置两个值，宽和高-->
   

2. 参数说明

   可选值	说明
   length	百分数 | 由数字和单位标识符组成的长度值。
   position	英文单词取值 top | center | bottom | left | center | right

3. 示例代码

   div { background: url("img/girl.jpg"); background-position: 40% 50%; } 
   div { background: url("img/girl.jpg"); background-position: 100 200; } 
   div { background: url("img/girl.jpg";background-position: center center; } 
   注:top left||top center||top right||center left||center center||center right||bottom left||bottom center||bottom right
   

二、文字文本属性

1、文字属性

1. 属性说明

   属性	说明
   color	文字颜色
   font-size	文字大小
   font-weight	文字粗细
   font-family	文字字体
   font-variant	小写字母以大写字母显示

2. 示例代码

   color:red;
   font-size:12px;	
   font-weight:“bold”	
   font-family:“宋体”	
   font-variant:small-caps
   

   ​

2、文本属性

1. 属性说明

   属性	说明
   text-align	文本对齐(right/left/center)
   line-height	行间距,可通过它实现文本的垂直居中(与width设置相同值)
   text-indent	首行缩进
   text-decoration	文本下划线(none/underline/overline/line-through)
   letter-spacing	字间距

2. 示例代码

   text-align:center; 
   line-height:10px;
   text-indent:2em;
   text-decoration:none;
   letter-spacing: 10px;
   

三、表格属性

1. 语法格式

   border-collapse : separate | collapse 
   border-spacing : length || length 
   

2. 参数说明

   属性	版本	兼容性	继承性	简介
   border-collapse	CSS2	IE5+	有	是否合并表格边框。
   border-spacing	CSS2	NONE	有	相邻单元格边框之间的距离。

3. 示例代码

   //默认的边框分开
   table { border-collapse: separate; } 
   //为表格设置合并边框模型
   table { border-collapse:collapse;} 
   table, td, th
           {
               border:1px solid black;
           }
   

四、尺寸

1. 属性说明

   属性	版本	兼容性	继承性	简介
   height	CSS1	IE4+ , NS6+	无	设置元素的高度
   max-height	CSS2	NONE	无	设置元素的最大高度
   min-height	CSS2	IE6+	无	设置元素的最小高度
   width	CSS1	IE4+ , NS6+	无	设置元素的宽度
   max-width	CSS2	NONE	无	设置元素的最大宽度
   min-width	CSS2	NONE	无	设置元素的最小宽度

2. 示例代码

五、图片属性

属性	可选值	说明
vertical-align	top|middle|bottom|percentage	设置图片与文字的对齐方式